改善DataGrid的默認分頁使其更友好

DataGrid是.net平台下開發Web應用程序最常用的控件，使用該控件可以幫助您專注與商務邏輯的開發，數據的顯示交給它來處理就好了，隻要簡單的設置一些相關的屬性，一張漂亮的表格就出來了，同時，它提供的模板列更大的提高了它的可編程性，使我們的設計更加靈活，想想都覺得這是一件興奮的事！然而，令人感覺美中不足的是，它的分頁功能實在是不怎麼樣，光禿禿的幾個數字掛在上面，既沒有統計信息又沒有跳頁功能，我想，這樣的用戶體驗太乏味了一點吧！於是我就想能不能改善它的分頁功能呢，使它具備上述功能！恩，現在想法有了，問題剩下如何實現？先讓我們想一下，DataGrid最終在客戶端表現為一個table，也就是說服務器將DataGrid解析為一段以<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

{

/// <summary>

/// SortDataGrid 的摘要描述。

/// </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);

}

/// <summary>

/// 此為設計工具支援所必須的方法 - 請勿使用程式碼編輯器修改

/// 這個方法的內容。

/// </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.Web.UI.WebControls.DataGridPageChangedEventArgs e)

{

this.dgProducts.CurrentPageIndex = e.NewPageIndex;

if (ViewState["SortExprName"] != null)

this.BindData("select * from Products order by " + ViewState["SortExprName"].ToString() + " asc");

else

this.BindData("select * from Products");

}

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)

{

if (this.pagerNum == 1)

{

this.pagerNum = this.pagerNum - 1;

return;

}

// currentPageNum-當前頁碼 recordCount-總記錄條數 pageCount-頁數

string currentPageNum = Convert.ToString(this.dgProducts.CurrentPageIndex + 1);

string recordCount = this.productTable.Rows.Count.ToString();

string pageCount = this.dgProducts.PageCount.ToString();

// 創建單元格包含頁面統計信息

TableCell groupCell = new TableCell();

groupCell.Text = "<b><font face='標楷體' size=3><font color=OliveDrab>當前第</font><font color=red>" + currentPageNum + "</font><font color=OliveDrab>頁每頁<font color=red>" + this.dgProducts.PageSize.ToString() + "</font>條 (" +

"共</font><font color=red>" + recordCount + "</font><font color=OliveDrab>條，共</font><font color=red><label id='maxPage'>" + pageCount + "</label></font><font color=OliveDrab>頁)</font></font></b>";

// 創建單元格包含跳頁功能

TableCell operCell = new TableCell();

operCell.Text = "<input type='text' id='textbox' name='T1' size='4' style='border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px'>&nbsp" +

"<input type='submit' value='go' name='B1' onclick='return go(textbox,maxPage)' style='border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px'>";

// pagerItem.Cells[0]代表DataGrid默認分頁，將其所跨列設為1

pagerItem.Cells[0].ColumnSpan = 1;

groupCell.HorizontalAlign = HorizontalAlign.Left;

groupCell.ColumnSpan = this.dgProducts.Columns.Count - 2;

operCell.HorizontalAlign = HorizontalAlign.Right;

pagerItem.Cells.AddAt(0,groupCell);

pagerItem.Cells.AddAt(2,operCell);

}

.Aspx

<%@ Page language="c#" Codebehind="SortDataGrid.aspx.cs" AutoEventWireup="false" Inherits="Sky_MsdnDataGrid.SortDataGrid" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>SortDataGrid</title>

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;

}

</script>

</HEAD>

<asp:DataGrid id="dgProducts" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 16px" runat="server" Width="100%" AllowSorting="True" AutoGenerateColumns="False" AllowPaging="True">

<asp:BoundColumn DataField="ProductID" HeaderText="產品編號">

</asp:BoundColumn>

<asp:BoundColumn DataField="SupplierID" HeaderText="供應商編號">

</asp:BoundColumn>

<asp:BoundColumn DataField="ProductName" SortExpression="ProductName" HeaderText="產品名稱">

</asp:BoundColumn>

<asp:BoundColumn DataField="UnitPrice" SortExpression="UnitPrice" HeaderText="產品單價">

</asp:BoundColumn>

<asp:BoundColumn DataField="UnitsInStock" SortExpression="UnitsInStock" HeaderText="供應單價">

</asp:BoundColumn>

</Columns>

</asp:DataGrid>

</form>

</body>

</HTML>

最終運行效果：