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

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")) {
                            selModel.select(record, true, true);    //选中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()
    });
});