2013-03-01 87 views
14

的每一列我有一個jqgrid,顯示僱員的詳細信息,我想使用它,用戶可以輸入公司名稱中的每一列添加一個過濾器和網格顯示所有符合該僱員行過濾網格中。添加過濾器的jqGrid

google搜索了很多,但沒有成功。任何參考示例/鏈接將有所幫助。

+1

你檢查了'欄search'功能? – Konstant 2013-03-01 14:03:17

+0

此鏈接也有驗證的解決方案..簡短和甜蜜的解決方案 - http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28462507.html – 2015-09-29 13:08:08

回答

19

,您應該使用filterToolbar選項,當您在文本框中的數據將通過記錄fiter測試案例的名稱,這裏是代碼和工作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>