原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection

ExtJS中經常要用到分頁和選擇，但是當選擇遇到分頁的時候，杯具就發生了，每一次翻頁，其它頁面的選中行就消失了。Ext 沒有為我們提供內置的保持選中的支持，只有我們自己動手來實現了。

先說一下具體的思路吧：首先在頁面中創建一個數組，用來存儲Grid的所有選中行，然后分別處理selModel的select和unselect事件和Store的load事件。

• 在select事件中，將選中的行存儲在全局數組中
• 在unselect事件中，將取消選中的行從數組中移除
• 在load事件中，遍歷加載到的數據，判斷哪些應該選中

那么，首先我們來快速的創建一個Grid，并綁定一些分頁數據：

Ext.onReady(function () {var supplierStore = Ext.create("Ext.data.Store", { fields: [ { name: "Name", type: "string" }, { name: "Phone", type: "string" }, { name: "Address", type: "string" } ], autoLoad: true, pageSize: 3, proxy: { type: "ajax", url: rootUrl + "Grid/FetchPageData", actionMethods: { read: "POST" }, reader: { type: "json", root: "data.records", totalProperty: "data.total" } } }); var grid = Ext.create("Ext.grid.GridPanel", { border: true, width: 600, height: 200, store: supplierStore, columnLines: true, enableColumnHide: false, enableColumnMove: false, enableLocking: true, selModel: Ext.create("Ext.selection.CheckboxModel", { mode: "MULTI", checkOnly: true }), columns: [ { text: "名稱", dataIndex: "Name", width: 150, sortable: false }, { text: "電話", dataIndex: "Phone", width: 150, sortable: false }, { text: "地址", dataIndex: "Address", width: 260, sortable: false } ], bbar: { xtype: "pagingtoolbar", store: supplierStore, displayInfo: true }, renderTo: Ext.getBody() }); });

服務器段的代碼：

public JsonResult FetchPageData() {int pageIndex = Convert.ToInt32(Request["page"]); int pageSize = Convert.ToInt32(Request["limit"]); OperateResult result = new OperateResult(); var pageData = SupplierModel.SupplierRecords.Skip((pageIndex - 1) * pageSize).Take(pageSize); result.Set(true, new { records = pageData, total = SupplierModel.SupplierRecords.Count }); return Json(result); }

這里面用到的SupplierModel代碼如下：

public class SupplierModel {public string Name { get; set; } public string Phone { get; set; } public string Address { get; set; } public static List<SupplierModel> SupplierRecords = null; static SupplierModel() { SupplierRecords = new List<SupplierModel>(); SupplierRecords.Add(new SupplierModel() { Name = "北京電信", Phone = "10000", Address = "北京市XX區XX路" }); SupplierRecords.Add(new SupplierModel() { Name = "北京移動", Phone = "10086", Address = "北京市XX區XX路" }); SupplierRecords.Add(new SupplierModel() { Name = "北京聯通", Phone = "10010", Address = "北京市XX區XX路" }); SupplierRecords.Add(new SupplierModel() { Name = "北京鐵通", Phone = "", Address = "北京市XX區XX路" }); SupplierRecords.Add(new SupplierModel() { Name = "北京郵政", Phone = "95599", Address = "北京市XX區XX路" }); } }

硬編碼了一些數據，如果我們每頁顯示3行，還是能夠分頁的。

然后運行程序，看看我們的界面吧：

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

第一步，添加一個全局的數據，用來保存選中的數據

var AllSelectedRecords = [];

第二步，為selModel添加select事件

listeners: {select: function (me, record, index, opts) {AllSelectedRecords.push(record);} }

第三步，為selModel添加unselect事件

deselect: function (me, record, index, opts) { AllSelectedRecords = Ext.Array.filter(AllSelectedRecords, function (item) { return item.get("Name") != record.get("Name"); }); },

第四步，store添加load事件

listeners: {load: function (me, records, success, opts) {if (!success || !records || records.length == 0)return; //根據全局的選擇，初始化選中的列 var selModel = grid.getSelectionModel(); Ext.Array.each(AllSelectedRecords, function () { for (var i = 0; i < records.length; i++) { var record = records[i]; if (record.get("Name") == this.get("Name")) { selModel.select(record, true, true); //選中record，并且保持現有的選擇，不觸發選中事件 } } }); } },

完成這四個步驟以后，我們來看一下完整的代碼：

Ext.onReady(function () {var supplierStore = Ext.create("Ext.data.Store", { fields: [ { name: "Name", type: "string" }, { name: "Phone", type: "string" }, { name: "Address", type: "string" } ], autoLoad: true, pageSize: 3, listeners: { load: function (me, records, success, opts) { if (!success || !records || records.length == 0) return; //根據全局的選擇，初始化選中的列 var selModel = grid.getSelectionModel(); Ext.Array.each(AllSelectedRecords, function () { for (var i = 0; i < records.length; i++) { var record = records[i]; if (record.get("Name") == this.get("Name"//選中record，并且保持現有的選擇，不觸發選中事件 } } }); } }, proxy: { type: "ajax", url: rootUrl + "Grid/FetchPageData", actionMethods: { read: "POST" }, reader: { type: "json", root: "data.records", totalProperty: "data.total" } } }); var AllSelectedRecords = []; var grid = Ext.create("Ext.grid.GridPanel", { border: true, width: 600, height: 200, store: supplierStore, columnLines: true, enableColumnHide: false, enableColumnMove: false, enableLocking: true, selModel: Ext.create("Ext.selection.CheckboxModel", { mode: "MULTI", listeners: { deselect: function (me, record, index, opts) { AllSelectedRecords = Ext.Array.filter(AllSelectedRecords, function (item) { return item.get("Name") != record.get("Name"); }); }, select: function (me, record, index, opts) { AllSelectedRecords.push(record); } } }), columns: [ { text: "名稱", dataIndex: "Name", width: 150, sortable: false }, { text: "電話", dataIndex: "Phone", width: 150, sortable: false }, { text: "地址", dataIndex: "Address", width: 260, sortable: false } ], bbar: { xtype: "pagingtoolbar", store: supplierStore, displayInfo: true }, renderTo: Ext.getBody() }); });

然后再次運行程序，試試翻頁的選中的效果吧，少年，這樣就輕松的實現了分頁的選中。這樣做的優點的非常的靈活，可以在頁面中自由的使用，缺點也很明 顯，他并不能夠復用，如果你在別的Grid中使用，那就要繼續再定義一個全局變量，以后的章節中我們會完成一個封裝好的grid。

總結

以上是生活随笔為你收集整理的[转]ExtJS Grid 分页时保持选中的简单实现方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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