jqgrid - beforeSearch和afterSearch函數沒有觸發

Question

我試圖顯示一個進度條，當用戶試圖過濾jqgrid中的數據。但是，beforeSearch和afterSearch函數不會被觸發。

我試圖按照文檔：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching但是，不知道我失蹤...

這裏是小提琴手：http://jsfiddle.net/14f3Lpnk/1/

<table id="list"></table> 
<div id="pager"></div> 

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, 
    ignoreCase: true, 
    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", 
     beforeSearch: function() { 
      alert('Filter Started');    
     }, 
     afterSearch: function() { 
      alert('Filter Complete');    
     } 
}).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" }); 

任何幫助表示讚賞。

Answer 1

beforeSearch和afterSearch是filterToolbar方法的回調函數，而不是網格本身。所以，你應該使用有下列方式

.jqGrid('filterToolbar', { 
    stringResult: true, 
    searchOnEnter: true, 
    defaultSearch: "cn", 
    beforeSearch: function() { 
     alert('Filter Started');    
    }, 
    afterSearch: function() { 
     alert('Filter Complete');    
    } 
}); 

看到修改後的演示http://jsfiddle.net/OlegKi/14f3Lpnk/2/