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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 23:43:15  来源:igfitidea点击:

Adding filter to each column of jqgrid

javascriptsearchfilterjqgrid

提问by Vishweshwar Kapse

I have a jqgridthat 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>