Extjs实现分页效果
Extjs实现分页还是比较简单的，主要是这套流程弄明白就可以了。（Extjs4.0以后版本适用）
首先js文件需要引入PagingMemoryProxy.js
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '../../../Scripts/ExtJS/ux');
Ext.require([
'Ext.ux.pagingMemoryProxy.PagingMemoryProxy',
]);Extjs中引入，当然在HTML页面引入也可以，注意顺序放对就可以了。
定义单页显示记录条数：var itemsPerPage = 20;//单页显示记录条数
在store中添加pageSize和root以及totalProperty
//表格数据源
var gridStore1 = Ext.create('Ext.data.Store', {
autoLoad: false,
fields: ['id', 'stateName', 'ariNumber', 'Tagid', 'FactoryId', 'WorkShopId', 'operator', 'operateTime', 'totalCount'],
pageSize: itemsPerPage,
proxy: {
type: "ajax",
actionMethods: { read: "POST" },
url: "CommunicationStatusCFFind.aspx?method=GetCommunicationStatusCFData",
reader: {
type: "json",
root: 'items',
totalProperty: 'totalProperty'
}
}
});这种方式是通过和C#后台交互返回totalproperty的属性值得。
var grid1 = Ext.create('Ext.grid.Panel', {
forceFit: true,
border: 0,
store: gridStore1,
columnLines: true,
columns: [
new Ext.grid.RowNumberer(),
{
text: 'ID号',
width: 100,
dataIndex: 'id',
field: {
xtype: 'textfield'
}
},
{
text: '通讯状态名称',
width: 100,
dataIndex: 'stateName',
field: {
xtype: 'textfield'
}
},
{
text: '所属车间',
width: 120,
dataIndex: 'workShopId'
},
{
header: '工厂名称',
dataIndex: 'FactoryId',
align: 'center'
},
{
header: '车间名称',
dataIndex: 'WorkShopId',
align: 'center'
},
{
text: '操作人',
width: 150,
dataIndex: 'operator',
},
{
text: '操作时间',
width: 150,
dataIndex: 'operateTime',
}
],
dockedItems: [
{
xtype: 'toolbar',
height: 30,
items: [
'-',
{
xtype: 'combo',
labelWidth: 65,
labelAlign: 'right',
width: 185,
id: 'theFactory',
fieldLabel: '工厂名称',
editable: false,
queryMode: 'local',
valueField: 'id',
displayField: 'AriName',
store: FactoryStore
},
{
xtype: 'combo',
labelWidth: 65,
labelAlign: 'right',
width: 185,
id: 'theWorkShop',
fieldLabel: '车间名称',
editable: false,
queryMode: 'local',
valueField: 'id',
displayField: 'AriName',
store: WorkShopStore
},
{
xtype: 'combo',
labelWidth: 65,
labelAlign: 'right',
width: 255,
id: 'theDevice',
fieldLabel: '设备名称',
editable: false,
queryMode: 'local',
valueField: 'id',
displayField: 'AriName',
store: DeviceStore
},
'->',
{
text: '查询',
width: 70,
handler: function () {
var FactoryId = Ext.getCmp("theFactory").getValue();
var WorkShopId = Ext.getCmp("theWorkShop").getValue();
var DeviceId = Ext.getCmp("theDevice").getValue();
var proxy1 = gridStore1.getProxy();
proxy1.extraParams = {
FactoryId: FactoryId,
WorkShopId: WorkShopId,
DeviceId: DeviceId
};
gridStore1.load();
}
},
' '
]
},
{
xtype: 'pagingtoolbar',
store: gridStore1, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}
],
renderTo: Ext.getBody()
});在表格grid中的dockeditems中添加分页以及跳转的工具栏
{
xtype: 'pagingtoolbar',
store: gridStore1, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}C#后台获取数据：只需要返回单页的记录条数，不要返回所有的，否则分页效果显示不出来，仍然显示所有的
public void GetCommunicationStatusCFData()
{
int enterpriseId = AriMethod.GetEnterpriseId(); //企业Id
string factoryId = Request["FactoryId"];
string workShopId = Request["WorkShopId"];
string DeviceId = Request["DeviceId"];
string start = Request["start"];
string limit = Request["limit"];
List models = BLL.ModuleHB.CommunicationStatusCFManager.GetAllCommunicationStatusCF(enterpriseId,factoryId,workShopId,DeviceId);
int totalProperty = models.Count;
int end = Convert.ToInt32(start) + Convert.ToInt32(limit);
if (end > totalProperty)
{
end = totalProperty;
}
DataTable tbl = new DataTable();
tbl.Columns.Add("id", typeof(String));//id
tbl.Columns.Add("stateName", typeof(String));//状态名称
tbl.Columns.Add("ariNumber", typeof(String));//设备编码
tbl.Columns.Add("Tagid", typeof(String));
tbl.Columns.Add("FactoryId", typeof(String));
tbl.Columns.Add("WorkShopId", typeof(String));
tbl.Columns.Add("operator", typeof(String)); //操作人
tbl.Columns.Add("operateTime", typeof(String)); //操作时间
for (int i = Convert.ToInt32(start); i < end; i++)
{
DataRow row = tbl.NewRow();
row["id"] = models[i].AriId;
row["stateName"] = models[i].StateName;
if (BLL.ModuleHB.EnvironmentEquCFManager.GetOne(enterpriseId, models[i].AriNumber) != null)
row["ariNumber"] = BLL.ModuleHB.EnvironmentEquCFManager.GetOne(enterpriseId, models[i].AriNumber).AriName;
else
row["ariNumber"] = models[i].AriNumber;
row["Tagid"] = models[i].Tagid;
if (BLL.ModuleHB.FactoryCFManager.GetOne(enterpriseId, models[i].FactoryId) != null)
row["FactoryId"] = BLL.ModuleHB.FactoryCFManager.GetOne(enterpriseId, models[i].FactoryId).AriName;
else
row["FactoryId"] = models[i].FactoryId;
if (BLL.ModuleHB.WorkSpaceCFManager.GetArinumber(enterpriseId, models[i].WorkShopId) != null)
row["WorkShopId"] = BLL.ModuleHB.WorkSpaceCFManager.GetArinumber(enterpriseId, models[i].WorkShopId).AriName;
else
row["WorkShopId"] = models[i].WorkShopId;
row["operator"] = models[i].Operator;
row["operateTime"] = models[i].OperateTime;
tbl.Rows.Add(row);
}
string json = JSON.Encode(tbl);
json = "{'items':" + json + "," + "'totalProperty':" + totalProperty + "}";
Response.Write(json);
Response.End();
} 其中start和limit参数不需要在前端定义，这应该是PagingMemoryProxy中有的参数，在后台直接Request获取即可。