[转]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。