ExtJS Grid 分頁時保持選中的簡單實現方法

2013-11-25 22:30

extjs中經常要用到分頁和選擇，但是當選擇遇到分頁的時候，杯具就發生了，每一次翻頁，其它頁面的選中行就消失了。ext 沒有為我們提供內建的保持選中的支援，只有我們自己動手來實現了。
先說一下具體的思路吧：首先在頁面中建立乙個陣列，用來儲存grid的所有選中行，然後分別處理selmodel的select和unselect事件和store的load事件。
那麼，首先我們來快速的建立乙個grid，並繫結一些分頁資料：
ext.onready(
function 
() ,,],
autoload: 
true
,        pagesize: 3,
proxy: ,
reader: 
}});
var 
grid = ext.create(
"ext.grid.gridpanel"
, ),
columns: [,,
],bbar: ,
renderto: ext.getbody()
});});

public 

jsonresult 
fetchpagedata()
);    
return 
json(result);
}

public class 

suppliermodel
public string 
phone 
public string 
address 
public static 
list
<
suppliermodel
> supplierrecords = 
null
;    
static 
suppliermodel()
);supplierrecords.add(
new 
suppliermodel
() );
supplierrecords.add(
new 
suppliermodel
() );
supplierrecords.add(
new 
suppliermodel
() );
supplierrecords.add(
new 
suppliermodel
() );}}

然後執行程式，看看我們的介面吧：

接下來看看我們要完成的分頁保持選中。

var 

allselectedrecords = ;

listeners: 

}

deselect: 

function 
(me, record, index, opts) );
},

listeners: 

}});}},

ext.onready(

function 
() ,,],
autoload: 
true
,        pagesize: 3,
listeners: 
}});}},
proxy: ,
reader: 
}});
var 
allselectedrecords = ;
var 
grid = ext.create(
"ext.grid.gridpanel"
, );
},select: 
function 
(me, record, index, opts) 
}}),
columns: [,,
],bbar: ,
renderto: ext.getbody()
});});

ExtJs grid遠端分頁編輯

在使用gird分頁時，一般有兩種實現方式 前端本地分頁 遠端伺服器分頁 當資料體量大時，肯定第二種方法優先，但是當使用了遠端分頁後，在進行編輯時，對於資料的儲存就要特殊處理下了。具體實現效果如下 由於 在進行切頁時，資料會從服務端重新拉取，並重新渲染到前端store。所以，在切頁時需要將當前頁改變的...

extjs Grid 時,預設初始選中

最近在使用帶核取方塊grid元件的時候發現了乙個奇怪的問題，第一次載入這個grid元件時就給這個grid元件初始化資料並選中其中的某一項，但始終無法選中，經單步除錯發現，選中行的方法已被執行了，只是在所有的東西都執行完後，grid又重新整理了一下，導致原先選中的項丟失。如下 js ext.onrea...

ExtJs Grid分頁時序號自增的實現

extjs grid分頁時，預設情況下每頁的序號都是從1起始的，這往往不符合我們的習慣。這裡實現了序號的自動增加。先看效果圖 實現步驟如下 1 定義全域性變數。var record start 0 2 grid的columns部分的定義。columns new ext.grid.rownumbere...