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


 
 

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行,还是能够分页的。

然后运行程序,看看我们的界面吧:

image

接下来看看我们要完成的分页保持选中。

第一步,添加一个全局的数据,用来保存选中的数据

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()
    });
});
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值