javascript 为 jqgrid 的每一列添加过滤器
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15159452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding filter to each column of jqgrid
提问by Vishweshwar Kapse
I have a jqgrid
that shows details of employees and i would like to add a filter in each column using which a user can type in company name and the grid shows all the employee rows that matches that filter in the grid.
我有一个jqgrid
显示员工详细信息的文件,我想在每列中添加一个过滤器,用户可以使用该过滤器输入公司名称,并且网格显示与网格中该过滤器匹配的所有员工行。
Googled alot but no success. Any refrence examples/link will help.
谷歌搜索了很多,但没有成功。任何参考示例/链接都会有所帮助。
回答by CharlesMighty
You should use filterToolbar option when you type the name of test case in the text box you data will fiter through the records, here is the code and working example demo
当您在文本框中键入测试用例的名称时,您应该使用 filterToolbar 选项,您的数据将通过记录过滤,这是代码和工作示例演示
var mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"blah",note:"stuff",tax:"10.00",total:"210.00"},
];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 10,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: "#pager",
viewrecords: true,
autowidth: true,
height: 'auto',
caption: "Test Grid"
});
jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
<table id="list"></table>
<div id="pager"></div>