最近由于客戶需要對grid進行大量的檢索操作,而現有的grid數據是以分頁的形式從數據庫端獲取,每次檢索都需要重新進行獲取,效率很低.

因而將數據進行一次加載,每次的檢索操作在前臺extjs進行過濾,效果就能得到很大的提升.(節約了每次與服務器的交互時間,但數據渲染所消耗時間無法縮短,因瀏覽器而議)

首先根據需求將grid的store改為加載全部數據

?? ?var testItemStore = new Ext.data.JsonStore({
?? ??? ?root:'datas',
?? ??? ?//不分頁,總數據量可以不要
?? ??? ?//totalProperty:'sum',
?? ??? ?url:'<%=basePath%>item/testItem!getList.action',
?? ??? ?idProperty:'id',
?? ??? ?fields:[{name:'id'},{name:'businessType'},{name:'businessTypeCode'},{name:'itemDesc'},
?? ??? ??? ??? ?{name:'unit'},{name:'unitCode'},{name:'charge'},{name:'oftenGroup'},
?? ??? ??? ??? ?{name:'oftenGroupCode'},{name:'note'},{name:'sum'},{name:'subtotal'},
?? ??? ??? ??? ?{name:'briefCode'},{name:'code'}]
?? ?});
?? ?testItemStore.load();
?? ?
在grid的tbar中添加檢索框,我這里需要的是根據store中briefCode信息進行檢索
?? ?var select_id = {
?? ??? ?xtype:'textfield',
?? ??? ?width:120,
?? ??? ?emptyText:'簡碼',
?? ??? ?inputType:'text',
?? ??? ?invalidText:'error',
?? ??? ?id:'select_testItem_briefCode',
?? ??? ?//開啟鍵盤監聽
?? ??? ?enableKeyEvents:true,
?? ??? ?listeners:{
?? ??? ??? ?//鍵盤按鍵監聽
?? ??? ??? ?keyup:function(field, e){
?? ??? ??? ??? ?var data = field.getValue();
?? ??? ??? ??? ?//store的過濾
?? ??? ??? ??? ?testItemStore.filter('briefCode',data,true,false);
?? ??? ??? ?}
?? ??? ?}
?? ?};
?? ?
Store中filter(String|Array field, String|RegExp value, [Boolean anyMatch], [Boolean caseSensitive], [Boolean exactMatch])

根據指定的參數過濾records。可以選擇傳遞一個過濾選項數組，根據多個參數過濾。
單個過濾器示例:store.filter('name', 'Ed', true, true); //查找所有records中name包含'Ed'子串的記錄
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? //anyMatch可選,默認為true,caseSensitive可選,默認為true
多個過濾器示例:store.filter([{property:'name',value:'Ed',anyMatch:true,caseSensitive:true},{fn:function(record){return record.get('age') == 24},scope: this}]);
參數
?? ?field:String|Array
?? ??? ?你的數據記錄的一個屬性,或者一個包含多個過濾條件的數組
?? ?value:String/RegExp
?? ??? ?要么是一個屬性名的起始字符串,么是一個需要在屬性上進行測試的 正則表達式
?? ?anyMatch:Boolean
?? ??? ?(可選)true時將全字匹配,而不僅僅是匹配起始字符串
?? ?caseSensitive:Boolean
?? ??? ?(可選)true比較時將會對大小寫敏感
?? ?exactMatch:Boolean
?? ??? ?true將會強制精確匹配(在正則中添加^和$字符).默認為fales.如果anyMatch參數為true,忽略此配置。
???

轉載于:https://www.cnblogs.com/wenzhuolanshan/p/3656851.html

總結

以上是生活随笔為你收集整理的store前台数据过滤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。