2013-03-01 10 views
14

Mam jqgrid, który pokazuje szczegóły dotyczące pracowników i chciałbym dodać filtr w każdej kolumnie, za pomocą którego użytkownik może wpisać nazwę firmy, a siatka pokazuje wszystkie wiersze pracowników, które pasują do tego filtr w siatce.Dodawanie filtra do każdej kolumny jqgrid

Wyszukiwane za dużo, ale bez powodzenia. Pomocne mogą być dowolne przykłady/odnośniki.

+1

pan sprawdzić 'Pasek search' funkcjonalność? – Konstant

+0

Ten link ma również sprawdzone rozwiązanie. Krótkie i słodkie rozwiązanie - http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28462507.html –

Odpowiedz

19

Należy użyć opcji filterToolbar gdy wpiszesz nazwę testu w polu tekstowym wy dane fiter poprzez zapisy, oto kod i pracy 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> 
Powiązane problemy