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

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

2013-11-25 22:30

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()
    });
});