[转]ExtJS Grid 分页时保持选中的简单实现方法

原文地址 :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。

转载于:https://www.cnblogs.com/dirgo/p/5443018.html