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="%">全部</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方法：
//刷新数据
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 = g.lastData;
} else
{
g.data = g.currentData;
if (!g.data) g.data = {};
if (!g.data[p.root]) g.data[p.root] = [];
g.lastData = g.data;
}
loadServer = false;
}
else if (typeof (loadDataParm) == "boolean")
{
loadServer = loadDataParm;
}
else if (typeof (loadDataParm) == "object" && loadDataParm)
{
loadServer = false;
p.dataType = "local";
p.data = loadDataParm;
}
//参数初始化
if (!p.newPage) p.newPage = 1;
if (p.dataAction == "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 = p.data || g.currentData;
if (clause)
g.filteredData[p.root] = g._searchData(g.filteredData[p.root], clause);
if (p.usePager)
g.currentData = g._getCurrentPageData(g.filteredData);
else
{
g.currentData = g.filteredData;
}
g._convertTreeData();
g._showData();
}
else if (p.dataAction == "local" && !loadServer)
{
if (g.data && g.data[p.root])
{
g.filteredData = g.data;
if (clause)
g.filteredData[p.root] = g._searchData(g.filteredData[p.root], clause);
g.currentData = g._getCurrentPageData(g.filteredData);
g._convertTreeData();
g._showData();
}
}
else
{
g.loadServerData(param, clause);
//g.loadServerData.ligerDefer(g, 10, [param, clause]);
}
g.loading = false;
},
（代码编辑器真心糟糕！一个打不开，一个有时候又不生效。）
这样改虽然可以，但感觉还是不太好。
可以修改一下源码来复用。
例如：加个方法，加个全局数组，将数据加到数组中去，然后将参数加到loadData方法里。
有时间试试！
Liger UI 表格数据查找/通过条件加载数据,布布扣,bubuko.com
原文：http://www.cnblogs.com/skyeyh/p/3760803.html