當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2025/4/5 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了改善DataGrid的默認分頁使其更友好小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

DataGrid是.net平臺下開發(fā)Web應用程序最常用的控件，使用該控件可以幫助您專注與商務邏輯的開發(fā)，數(shù)據(jù)的顯示交給它來處理就好了，隻要簡單的設置一些相關的屬性，一張漂亮的表格就出來了，同時，它提供的模板列更大的提高了它的可編程性，使我們的設計更加靈活，想想都覺得這是一件興奮的事！然而，令人感覺美中不足的是，它的分頁功能實在是不怎麼樣，光禿禿的幾個數(shù)字掛在上面，既沒有統(tǒng)計信息又沒有跳頁功能，我想，這樣的用戶體驗太乏味了一點吧！於是我就想能不能改善它的分頁功能呢，使它具備上述功能！恩，現(xiàn)在想法有了，問題剩下如何實現(xiàn)？先讓我們想一下，DataGrid最終在客戶端表現(xiàn)為一個table，也就是說服務器將DataGrid解析為一段以<table>開始</table>結束的html代碼，然後將這段代碼發(fā)送到請求頁面的客戶端，請注意這個過程是先解析然後發(fā)送，既然過程是這樣的，那問題也就迎刃而解了，我們可以在解析後發(fā)送前這段時間為控件增加新的功能啊！接下來的問題是我要如何攔截到這段時間並讓整個過程停住去執(zhí)行我寫的代碼，別急，先讓我們了解一下DataGrid的組成結構，DataGrid由行集和列集構成，它們分別在服務端表現(xiàn)為DataGrid.Items和DataGrid.Columns，DataGrid分頁區(qū)是一個DataGridItem，包含在整個Items集合中，每當DataGrid在創(chuàng)建一個Item時，都會引發(fā)一個ItemCreated事件，我們可以通過捕捉該事件來獲取"DataGrid分頁區(qū)"對象，並在該對象呈現(xiàn)至它包含的Page對象時，也就是發(fā)生PreRender事件時，編寫代碼為其加入新功能，如下所示：

private void dgProducts_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)

{

???? if (e.Item.ItemType == ListItemType.Pager)

???? {

?????????? // 獲取DataGrid分頁區(qū)對象並為其指定PreRender事件的處理函數(shù)

?????????? pagerItem = e.Item;

?????????? pagerItem.PreRender += new System.EventHandler(this.pagerItem_PreRender);

???? }

}

private void pagerItem_PreRender(object sender, EventArgs e)

{

???? // 編寫事件處理代碼實現(xiàn)頁面統(tǒng)計信息以及跳頁功能

???? .......

}

由於在執(zhí)行上述事件時DataGrid已經(jīng)經(jīng)過解析生成了html，所以我們也隻能向其中添加html代碼來實現(xiàn)所需的功能。最終生成的新的分頁如下圖所示：

在實現(xiàn)跳頁功能時我使用JavaScript將用戶在文本框中輸入的值保存在一個Html隱藏字段裡，然後在服務端獲取該隱藏字段的值，並將DataGrid指定到該頁，我曾經(jīng)試過用URL傳參數(shù)的方式並指定window.location為新的URL字符串，可是使用window.location會導致Page_Load()執(zhí)行兩次。從而得不到想要的結果。我也考慮過使用ViewState，可那個文本框和按鈕是動態(tài)添加進去的Html標簽，事先沒有在服務端定義，又如何操控它們呢！於是這個念頭也就一閃而過了！到最後也隻有採用"隱藏字段"這種不怎麼高級但確實能解決的方法。以下是點"go"按鈕時執(zhí)行的JavaScript函數(shù)：

function go(ctrl,max)

{

???? // 驗証用戶輸入值是否符合要求

???? if(ctrl.value >= 1 && ctrl.value <= max.innerText)

???? {

?????????? // 將輸入值保存到隱藏字段裡

?????????? document.all.PageNum.value = ctrl.value;

???? }

???? else

???? {

?????????? alert('您輸入的頁碼必須是符合頁面要求的數(shù)字,最大值是：'+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");

??????????????? }

?????????? }

??????????

?????????? // 綁定數(shù)據(jù)

?????????? 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 設計工具產(chǎn)生的程式碼

?????????? 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

??????????

?????????? // 實現(xiàn)排序功能

?????????? 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分頁區(qū)對象並為其指定PreRender事件的處理函數(shù)

???????????????????? 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-總記錄條數(shù) pageCount-頁數(shù)

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

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

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

???????????????

??????????????? // 創(chuàng)建單元格包含頁面統(tǒng)計信息

??????????????? 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>";

???????????????

??????????????? // 創(chuàng)建單元格包含跳頁功能

??????????????? 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' οnclick='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>

?????????? <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">

?????????? <meta content="C#" name="CODE_LANGUAGE">

?????????? <meta content="JavaScript" name="vs_defaultClientScript">

?????????? <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

?????????? <script language="javascript">

??????????????? function go(ctrl,max)

??????????????? {

???????????????????? // 驗証用戶輸入值是否符合要求

???????????????????? if(ctrl.value >= 1 && ctrl.value <= max.innerText)

???????????????????? {

?????????????????????????? // 將輸入值保存到隱藏字段裡

?????????????????????????? document.all.PageNum.value = ctrl.value;

???????????????????? }

???????????????????? else

???? ?? ???????????? {

???? ??? ??????????? alert('您輸入的頁碼必須是符合頁面要求的數(shù)字,最大值是：'+max.innerText);

???? ??? ??????????? ctrl.value="";

???? ??? ??????????? ctrl.focus();

???? ?????? ???????? ???? return false;

???????????????????? }

??????????????? }

?????????? </script>

???? </HEAD>

???? <body MS_POSITIONING="GridLayout">

?????????? <form id="Form1" method="post" runat="server">

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

???????????????????? <FooterStyle ForeColor="#4A3C8C" BackColor="#B5C7DE"></FooterStyle>

???????????????????? <SelectedItemStyle Font-Bold="True" ForeColor="#F7F7F7" BackColor="#738A9C"></SelectedItemStyle>

???????????????????? <AlternatingItemStyle Font-Size="X-Small" BackColor="#CCFFFF"></AlternatingItemStyle>

???????????????????? <ItemStyle Font-Size="X-Small" BackColor="White"></ItemStyle>

???????????????????? <HeaderStyle Font-Size="X-Small" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BackColor="#99CCCC"></HeaderStyle>

???????????????????? <Columns>

?????????????????????????? <asp:BoundColumn DataField="ProductID" HeaderText="產(chǎn)品編號">

??????????????????????????????? <HeaderStyle Width="15%"></HeaderStyle>

??????????????????????????????? <ItemStyle HorizontalAlign="Center"></ItemStyle>