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代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<form id="gridParams">     号码筛选：<input id="numberFilter" type="text" name="numberFilter" />     号码区：<select name="numberArea" id="numberArea">         <option value="%">全部</option>         <option value="10">10</option>         <option value="20">20</option>         <option value="30">30</option>         <option value="40">40</option>         <option value="50">50</option>         <option value="60">60</option>     </select>     <input id="btnOK" type="button" value="查找" onclick="search()" /> </form>   <div class="l-clear"></div> <br />     <div id="maingrid"></div> </body>

 

编辑器真糟糕，想在代码里着色都不行，直接把html标签显示出来了。-_-!

---

 

更新：

发现了一个问题：如果点击表格上的翻页或刷新，还是未过滤的数据。无奈，只能继续摸索了。

---

解决：修改了ligerGrid.js源码

在ligerGrid.js中，搜索loadData方法：

?

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

if (p.dataAction == "server")            {                if (p.usePager)                {                    param.push({ name: p.pageParmName, value: p.newPage });                    param.push({ name: p.pagesizeParmName, value: p.pageSize });                                         //2014.5.30修改<br>　　　　　　　　　　　　//: START  将参数加到表格的param中，传到后台                    var numberFilter = document.getElementById("numberFilter");                    var numberArea = document.getElementById("numberArea");                    if(numberFilter != null){                        if(numberFilter.value != null){                            param.push({name:"numberFilter", value:numberFilter.value});                        }                    }                    if(numberArea != null){                        if(numberArea.value != null){                            param.push({name:"numberArea", value:numberArea.value});                        }                    }                　　// END                                        }                if (p.sortName)                {                    param.push({ name: p.sortnameParmName, value: p.sortName });                    param.push({ name: p.sortorderParmName, value: p.sortOrder });                }            };

---

（代码编辑器真心糟糕！一个打不开，一个有时候又不生效。）

这样改虽然可以，但感觉还是不太好。

可以修改一下源码来复用。

例如：加个方法，加个全局数组，将数据加到数组中去，然后将参数加到loadData方法里。

有时间试试！

---

 

 2014/6/4更新

本来想自己写一个传参数的方法，看源码的时候发现已经有了=_=！当初看api没看仔细，汗！

setParm(name,value)方法可以设置传递给ajax的参数。LigerUI源码中方法如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

setParm: function (name, value)         {             var g = this;             var parms = g.get('parms');             if (!parms) parms = {};             if (parms instanceof Array)             {                 removeArrItem(parms, function (p) { return p.name == name; });                 parms.push({ name: name, value: value });             } else             {                 parms[name] = value;             }             g.set('parms', parms);         },

　即将设置的参数加到了parms变量中。而loadData方法中，下面这段代码将parms中的参数全部取出来放入param中了：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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] });                     }                 }             }

最后，如果从服务器加载数据，将param传递：

?

1	g.loadServerData(param, clause);

loadServerData方法实际上就是用ajax调用远程数据,param直接传给了data参数。

所以，我自己的js代码只写了一个刷新方法，直接设置了查询的参数，查询时直接调用这个方法即可：

?

1 2 3 4 5 6 7

//刷新 function refresh(){     maingrid.setParm("numberFilter",$("#numberFilter").val());     maingrid.setParm("numberArea",$("#numberArea").val());           maingrid.reload(); }

 另外，ajax方法可以这样写：先设置参数变量，再调用ajax方法。这样参数设置更灵活。

?

1	$.ajax(ajaxOptions);