首页 > 代码库 > Liger UI 表格数据查找/通过条件加载数据
Liger UI 表格数据查找/通过条件加载数据
api上的例子是在本地过滤的,无法使用,自己摸索了一下。
javascript代码:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | //初始化ligerui控件 $( function (){ maingrid = $( "#maingrid" ).ligerGrid({ columns: [ { display: ‘类型‘ , name: ‘type‘ }, { display: ‘号码‘ , name: ‘number‘ , editor:{type: ‘text‘ }}, { display: ‘级别‘ , name: ‘level‘ , editor:{type: ‘text‘ }} ], width: ‘100%‘ , height: ‘90%‘ , enabledEdit: true , clickToEdit: false , //rownumbers:true, url: "<%=basePath%>number/getValidNumbers.action" , parms:{numberFilter:$( "#numberFilter" ).val(),numberArea:$( "#numberArea" ).val()} //此parms只在第一次加载时有效,之后刷新就不会获取查找条件了。 //注意一下,parms而不是params,我开始写成params,怎么也传不进数据。不知道这个单词是不是作者写错了。 }); //另外,不要将$("form").serialize()当作参数传递给parms,因为serialize得到的数据是a=11&b=22这种形式,而parms需要的是对象。 //alert($("form").serialize()); }); <br> //查找号码 function search(){ //params中获取过滤条件 var params = { numberFilter:$( "#numberFilter" ).val(), numberArea:$( "#numberArea" ).val(), //查询号码的过滤条件 page:maingrid.options.page, //注意:loadServerData不会再带上分页的信息,所以要手动加上分页的页数和每页个数。而表格的属性在maingrid的options里。 pagesize:maingrid.options.pageSize //注意2:grid加载ajax数据时,传递到后台的每页个数是pagesize,而表格的size属性用自动pageSize表示,S要大写。 }; //传入参数,调用loadServerData方法 maingrid.loadServerData(params); } |
部分html代码如下:
<form id="gridParams"> 号码筛选:<input id="numberFilter" type="text" name="numberFilter" /> 号码区:<select name="numberArea" id="numberArea"> <option value="http://www.mamicode.com/%">全部</option> <option value="http://www.mamicode.com/10">10</option> <option value="http://www.mamicode.com/20">20</option> <option value="http://www.mamicode.com/30">30</option> <option value="http://www.mamicode.com/40">40</option> <option value="http://www.mamicode.com/50">50</option> <option value="http://www.mamicode.com/60">60</option> </select> <input id="btnOK" type="button" value="http://www.mamicode.com/查找" onclick="search()" /> </form> <div class="l-clear"></div> <br /> <div id="maingrid"></div> </body>
编辑器真糟糕,想在代码里着色都不行,直接把html标签显示出来了。-_-!
更新:
发现了一个问题:如果点击表格上的翻页或刷新,还是未过滤的数据。无奈,只能继续摸索了。
解决:修改了ligerGrid.js源码
在ligerGrid.js中搜索loadData方法:
//刷新数据 loadData: function (loadDataParm) { var g = this, p = this.options; g.loading = true; g.trigger(‘loadData‘); var clause = null; var loadServer = true; if (typeof (loadDataParm) == "function") { clause = loadDataParm; if (g.lastData) { g.data = http://www.mamicode.com/g.lastData;"boolean") { loadServer = loadDataParm; } else if (typeof (loadDataParm) == "object" && loadDataParm) { loadServer = false; p.dataType = "local"; p.data = http://www.mamicode.com/loadDataParm;"server") { if (!p.sortOrder) p.sortOrder = "asc"; } //-------------------------------------------------------------- //这里是参数,有page和pagesize分页信息,所以在这部分加上我自己的查询信息 //-------------------------------------------------------------- var param = []; if (p.parms) { var parms = $.isFunction(p.parms) ? p.parms() : p.parms; if (parms.length) { $(parms).each(function () { param.push({ name: this.name, value: this.value }); }); } else if (typeof parms == "object") { for (var name in parms) { param.push({ name: name, value: parms[name] }); } } } if (p.dataAction == "server") { if (p.usePager) { param.push({ name: p.pageParmName, value: p.newPage }); param.push({ name: p.pagesizeParmName, value: p.pageSize }); //--------------------------------------------------------------- //:START 将页面的查询条件加到param参数中去 var numberFilter = document.getElementById("numberFilter").value; var numberArea = document.getElementById("numberArea").value; if(numberFilter != null){ param.push({name:"numberFilter", value:numberFilter}); } if(numberArea != null){ param.push({name:"numberArea", value:numberArea}); } //END 到这里结束。 //---------------------------------------------------------------- } if (p.sortName) { param.push({ name: p.sortnameParmName, value: p.sortName }); param.push({ name: p.sortorderParmName, value: p.sortOrder }); } }; $(".l-bar-btnload span", g.toolbar).addClass("l-disabled"); if (p.dataType == "local") { g.filteredData = http://www.mamicode.com/p.data || g.currentData;"local" && !loadServer) { if (g.data && g.data[p.root]) { g.filteredData = http://www.mamicode.com/g.data;>
(代码编辑器真心糟糕!一个打不开,一个有时候又不生效。)
这样改虽然可以,但感觉还是不太好。
可以修改一下源码来复用。
例如:加个方法,加个全局数组,将数据加到数组中去,然后将参数加到loadData方法里。
有时间试试!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。