Ext.Net 1.2.0_Ext.Net.GridPanel 服务器端分页
本文内容
- 概述
- 演示 GridPanel 服务器端分页
- 运行结果
- 备注
- 修改记录
概述
分页都有两种，要么在客户端，要么在服务器端。Ext.Net 也不例外。而它的服务器端分页，是 Ext.Net.Store 的代理中，利用处理程序（.ashx）或是 Web Service（.asmx）方式等实现。参考 http://examples.ext.net/，并检索 "Paging and Sorting"。
演示 GridPanel 服务器端分页
本例演示，接近早先 ASP.NET 的分页实现。从服务器端获得下一页数据，绑定到 GridPanel 显示。方便起见，用 Linq 获取分页的数据。
自定义 MyCompany.cs 类
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ExtNetGridPanelServerPaging
{
public class MyCompany
{
public MyCompany(string name, double price, double change, double pctChange)
{
this.Name = name;
this.Price = price;
this.Change = change;
this.PctChange = pctChange;
}
public MyCompany()
{
}
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PctChange { get; set; }
public static List<MyCompany> GetDataSource()
{
List<MyCompany> data = new List<MyCompany>
{
new MyCompany("3m Co", 71.72, 0.02, 0.03),
new MyCompany("Alcoa Inc", 29.01, 0.42, 1.47),
new MyCompany("Altria Group Inc", 83.81, 0.28, 0.34),
new MyCompany("American Express Company", 52.55, 0.01, 0.02),
new MyCompany("American International Group, Inc.", 64.13, 0.31, 0.49),
new MyCompany("AT&T Inc.", 31.61, -0.48, -1.54),
new MyCompany("Boeing Co.", 75.43, 0.53, 0.71),
new MyCompany("Caterpillar Inc.", 67.27, 0.92, 1.39),
new MyCompany("Citigroup, Inc.", 49.37, 0.02, 0.04),
new MyCompany("E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
new MyCompany("Exxon Mobil Corp", 68.1, -0.43, -0.64),
new MyCompany("General Electric Company", 34.14, -0.08, -0.23),
new MyCompany("General Motors Corporation", 30.27, 1.09, 3.74),
new MyCompany("Hewlett-Packard Co.", 36.53, -0.03, -0.08),
new MyCompany("Honeywell Intl Inc", 38.77, 0.05, 0.13),
new MyCompany("Intel Corporation", 19.88, 0.31, 1.58),
new MyCompany("International Business Machines", 81.41, 0.44, 0.54),
new MyCompany("Johnson & Johnson", 64.72, 0.06, 0.09),
new MyCompany("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
new MyCompany("McDonald\"s Corporation", 36.76, 0.86, 2.40),
new MyCompany("Merck & Co., Inc.", 40.96, 0.41, 1.01),
new MyCompany("Microsoft Corporation", 25.84, 0.14, 0.54),
new MyCompany("Pfizer Inc", 27.96, 0.4, 1.45),
new MyCompany("The Coca-Cola Company", 45.07, 0.26, 0.58),
new MyCompany("The Home Depot, Inc.", 34.64, 0.35, 1.02),
new MyCompany("The Procter & Gamble Company", 61.91, 0.01, 0.02),
new MyCompany("United Technologies Corporation", 63.26, 0.55, 0.88),
new MyCompany("Verizon Communications", 35.57, 0.39, 1.11),
new MyCompany("Honeywell Intl Inc", 38.77, 0.05, 0.13),
new MyCompany("Intel Corporation", 19.88, 0.31, 1.58),
new MyCompany("International Business Machines", 81.41, 0.44, 0.54),
new MyCompany("Johnson & Johnson", 64.72, 0.06, 0.09),
new MyCompany("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
new MyCompany("McDonald\"s Corporation", 36.76, 0.86, 2.40),
new MyCompany("Merck & Co., Inc.", 40.96, 0.41, 1.01),
new MyCompany("Microsoft Corporation", 25.84, 0.14, 0.54),
new MyCompany("Pfizer Inc", 27.96, 0.4, 1.45),
new MyCompany("The Coca-Cola Company", 45.07, 0.26, 0.58),
new MyCompany("The Home Depot, Inc.", 34.64, 0.35, 1.02),
new MyCompany("The Procter & Gamble Company", 61.91, 0.01, 0.02),
new MyCompany("United Technologies Corporation", 63.26, 0.55, 0.88),
new MyCompany("Verizon Communications", 35.57, 0.39, 1.11),
new MyCompany("Honeywell Intl Inc", 38.77, 0.05, 0.13),
new MyCompany("Intel Corporation", 19.88, 0.31, 1.58),
new MyCompany("International Business Machines", 81.41, 0.44, 0.54),
new MyCompany("Johnson & Johnson", 64.72, 0.06, 0.09),
new MyCompany("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
new MyCompany("McDonald\"s Corporation", 36.76, 0.86, 2.40),
new MyCompany("Merck & Co., Inc.", 40.96, 0.41, 1.01),
new MyCompany("Microsoft Corporation", 25.84, 0.14, 0.54),
new MyCompany("Pfizer Inc", 27.96, 0.4, 1.45),
new MyCompany("The Coca-Cola Company", 45.07, 0.26, 0.58),
new MyCompany("The Home Depot, Inc.", 34.64, 0.35, 1.02),
new MyCompany("The Procter & Gamble Company", 61.91, 0.01, 0.02),
new MyCompany("United Technologies Corporation", 63.26, 0.55, 0.88),
new MyCompany("Verizon Communications", 35.57, 0.39, 1.11),
new MyCompany("Honeywell Intl Inc", 38.77, 0.05, 0.13),
new MyCompany("Intel Corporation", 19.88, 0.31, 1.58),
new MyCompany("International Business Machines", 81.41, 0.44, 0.54),
new MyCompany("Johnson & Johnson", 64.72, 0.06, 0.09),
new MyCompany("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
new MyCompany("McDonald\"s Corporation", 36.76, 0.86, 2.40),
new MyCompany("Merck & Co., Inc.", 40.96, 0.41, 1.01),
new MyCompany("Microsoft Corporation", 25.84, 0.14, 0.54),
new MyCompany("Pfizer Inc", 27.96, 0.4, 1.45),
new MyCompany("The Coca-Cola Company", 45.07, 0.26, 0.58),
new MyCompany("The Home Depot, Inc.", 34.64, 0.35, 1.02),
new MyCompany("The Procter & Gamble Company", 61.91, 0.01, 0.02),
new MyCompany("United Technologies Corporation", 63.26, 0.55, 0.88),
new MyCompany("Verizon Communications", 35.57, 0.39, 1.11),
new MyCompany("Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
};
return data;
}
public static IEnumerable<MyCompany> GetPaging(int startRec, int MaxRec, ref int total)
{
List<MyCompany> data = GetDataSource();
IEnumerable<MyCompany> query = data.Skip(startRec).Take(MaxRec);
total = data.Count();
return query;
}
}
}
页面代码
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">1:2: protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)3: {4: IEnumerable<ExtNetGridPanelServerPaging.MyCompany> data = null;5: int total = 0;6: data = ExtNetGridPanelServerPaging.MyCompany.GetPaging(e.Start <= 0 ? 0 : e.Start, this.PagingToolbar1.PageSize, ref total);7: e.Total = total;8: this.Store1.DataSource = data;9: this.Store1.DataBind();10: }11:</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh" AutoLoad="true">
<Proxy>
<ext:PageProxy>
</ext:PageProxy>
</Proxy>
<Reader>
<ext:JsonReader IDProperty="Name">
<Fields>
<ext:RecordField Name="Name" />
<ext:RecordField Name="Price" />
<ext:RecordField Name="Change" />
<ext:RecordField Name="PctChange" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="Company List"
AutoExpandColumn="Company" Width="600" Height="350">
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="Name" />
<ext:Column Header="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="Change" DataIndex="Change" />
<ext:Column Header="Change" DataIndex="PctChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<LoadMask ShowMask="true" />
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" StoreID="Store1">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>
运行结果
备注
上面演示，只需对 Store 进行两项设置：OnRefreshData="MyData_Refresh" 和 AutoLoad="true"，并在后台获取分页数据，就可以实现服务器端分页功能。其中，OnRefreshData 事件是刷新 Store 时，客户端调用服务器端的方法；AutoLoad 是当点击“下一页”、“上一页”等时，Store 可以根据 OnRefreshData 事件自动刷新。
无论如何实现服务器端分页，服务器端都必须知道，用户当前是第几页，一页多少条数据，总共有多少条数据等，或是通过参数传递给服务器端，或是通过视图变量（ASP.NET 常见）。比如，本例中，每次点击“下一页”时，服务器端会从 StoreRefreshDataEventArgs 获得客户端发送过来的相关分页信息。
修改记录
- 第一次 2011-12-18 [ADD] 备注