改善 DataGrid 的默認分頁使其更友好
DataGrid 是 .net 平台下開發 Web 應用程序最常用的控件，使用該控件可以幫助您專注與商務邏輯的開發，數據的顯示交給它來處理就好了，隻要簡單的設置一些相關的屬性，一張漂亮的表格就出來了，同時，它提供的模板列更大的提高了它的可編程性，使我們的設計更加靈活，想想都覺得這是一件興奮的事！然而，令人感覺美中不足的是，它的分頁功能實在是不怎麼樣，光禿禿的幾個數字掛在上面，既沒有統計信息又沒有跳頁功能，我想，這樣的用戶體驗太乏味了一點吧！於是我就想能不能改善它的分頁功能呢，使它具備上述功能！恩，現在想法有了，問題剩下如何實現？先讓我們想一下， DataGrid 最終在客戶端表現為一個 table ，也就是說服務器將 DataGrid 解析為一段以
1<table> 開始 </table>
結束的 html 代碼，然後將這段代碼發送到請求頁面的客戶端，請注意這個過程是先解析然後發送，既然過程是這樣的，那問題也就迎刃而解了，我們可以在解析後發送前這段時間為控件增加新的功能啊！接下來的問題是我要如何攔截到這段時間並讓整個過程停住去執行我寫的代碼，別急，先讓我們了解一下 DataGrid 的組成結構， DataGrid 由行集和列集構成，它們分別在服務端表現為 DataGrid.Items 和 DataGrid.Columns ， DataGrid 分頁區是一個 DataGridItem ，包含在整個 Items 集合中，每當 DataGrid 在創建一個 Item 時，都會引發一個 ItemCreated 事件，我們可以通過捕捉該事件來獲取 "DataGrid 分頁區 " 對象，並在該對象呈現至它包含的 Page 對象 時 ，也就是發生 PreRender 事件時，編寫代碼為其加入新功能， 如下所示：
private void dgProducts_ItemCreated( object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Pager)
{
// 獲取 DataGrid 分頁區對象並為其指定 PreRender 事件的處理函數
pagerItem = e.Item;
pagerItem.PreRender += new System.EventHandler( this .pagerItem_PreRender);
}
}
private void pagerItem_PreRender( object sender, EventArgs e)
{
// 編寫事件處理代碼實現頁面統計信息以及跳頁功能
.......
}
由於在執行上述事件時 DataGrid 已經經過解析生成了 html ，所以我們也隻能向其中添加 html 代碼來實現所需的功能。最終生成的新的分頁如下圖所示：
在實現跳頁功能時我使用 JavaScript 將用戶在文本框中輸入的值保存在一個 Html 隱藏字段裡，然後在服務端獲取該隱藏字段的值，並將 DataGrid 指定到該頁，我曾經試過用 URL 傳參數的方式並指定 window.location 為新的 URL 字符串，可是使用 window.location 會導致 Page_Load() 執行兩次。從而得不到想要的結果。我也考慮過使用 ViewState ，可那個文本框和按鈕是動態添加進去的 Html 標簽，事先沒有在服務端定義，又如何操控它們呢！於是這個念頭也就一閃而過了！到最後也隻有採用 " 隱藏字段 " 這種不怎麼高級但確實能解決的方法。以下是點 " go " 按鈕時執行的 JavaScript 函數：
function go(ctrl,max)
{
// 驗証用戶輸入值是否符合要求
if (ctrl. value >= 1 && ctrl. value <= max.innerText)
{
// 將輸入值保存到隱藏字段裡
document.all.PageNum. value = ctrl. value ;
}
else
{
alert(' 您輸入的頁碼必須是符合頁面要求的數字 , 最大值是： '+max.innerText);
ctrl. value ="";
ctrl.focus();
return false ;
}
}
全部代碼如下：
.Apsx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace Sky_MsdnDataGrid
{
///
1<summary>
2
3/// SortDataGrid 的摘要描述。
4
5/// </summary>
public class SortDataGrid : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid dgProducts;
private string connStr;
private string cmdText;
private DataGridItem pagerItem;
protected System.Web.UI.HtmlControls.HtmlInputHidden PageNum;
private int pagerNum = 1;
private DataTable productTable;
private void Page_Load( object sender, System.EventArgs e)
{
// 頁面加載時判斷隱藏字段中是否有值，如果有值代表用戶使用了跳頁功能，並將 DataGrid 的當前頁設為用戶指定頁
if ( this .PageNum.Value != string .Empty)
{
this .dgProducts.CurrentPageIndex = Convert.ToInt32( this .PageNum.Value) - 1;
if (ViewState["SortExprName"] != null )
this .BindData("select * from Products order by " + ViewState["SortExprName"].ToString() + " asc");
else
this .BindData("select * from Products");
this .PageNum.Value = string .Empty;
}
else
{
this .BindData("select * from Products");
}
}
// 綁定數據
private void BindData( string sqlText)
{
this .connStr = "server=localhost;database=NorthWind;uid=sa";
this .cmdText = sqlText;
SqlConnection conn = new SqlConnection();
SqlCommand cmd = new SqlCommand();
SqlDataAdapter adapter = new SqlDataAdapter();
productTable = new DataTable("Products");
conn.ConnectionString = this .connStr;
cmd.CommandType = CommandType.Text;
cmd.CommandText = this .cmdText;
cmd.Connection = conn;
adapter.SelectCommand = cmd;
adapter.Fill(productTable);
this .dgProducts.DataSource = productTable;
this .dgProducts.DataBind();
}
#region Web Form 設計工具產生的程式碼
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 此為 ASP.NET Web Form 設計工具所需的呼叫。
//
InitializeComponent();
base .OnInit(e);
}
///
1<summary>
2
3/// 此為設計工具支援所必須的方法 \- 請勿使用程式碼編輯器修改
4
5/// 這個方法的內容。
6
7/// </summary>
private void InitializeComponent()
{
this .dgProducts.ItemCreated += new System.Web.UI.WebControls.DataGridItemEventHandler( this .dgProducts_ItemCreated);
this .dgProducts.PageIndexChanged += new System.Web.UI.WebControls.DataGridPageChangedEventHandler( this .dgProducts_PageIndexChanged);
this .dgProducts.SortCommand += new System.Web.UI.WebControls.DataGridSortCommandEventHandler( this .dgProducts_SortCommand);
this .Load += new System.EventHandler( this .Page_Load);
}
#endregion
// 實現排序功能
private void dgProducts_SortCommand( object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
{
this .dgProducts.CurrentPageIndex = 0;
ViewState["SortExprName"] = e.SortExpression;
this .BindData("select * from Products order by "+ e.SortExpression + " asc");
}
private void dgProducts_PageIndexChanged( object source, System.We