将过滤器添加到jqgrid的每一列 [英] Adding filter to each column of jqgrid

问题描述

我有一个 jqgrid ，它显示了雇员的详细信息，我想在每列中添加一个过滤器，用户可以使用该过滤器键入公司名称，并且网格显示与之匹配的所有雇员行在网格中进行过滤.

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.

大量Google搜索，但未成功.任何参考示例/链接都会有所帮助.

Googled alot but no success. Any refrence examples/link will help.

推荐答案

在文本框内键入测试用例的名称时，应使用filterToolbar选项，数据将适合记录，这是代码，工作时示例演示

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

 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> 

这篇关于将过滤器添加到jqgrid的每一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！