DataGrid中页导航栏的自定义样式
我們可以利用DataGrid的ItemCreat()方法來實現DataGrid中頁腳(Foot)和頁導航欄的自定義樣式。ItemCreat,顧名思義,就是在數據項創建時發生的事件,對于DataGrid來講,表頭(Head)、數據項(DataItem)、頁腳(Foot)、頁導航(Pager)都是一個Item。下面的例子將實現頁腳與頁導航的自定義樣式。我們希望在頁腳現實DataGrid中的總頁數,對于頁導航中的LinkButton,我們希望能夠以[<Page Index>]的格式來顯示,對于當前頁的頁導航索引,我們希望顯示成Page <PageIndex>的格式。
前臺文件:
<%@ Page language="c#" Codebehind="Chp2_DGPagination.aspx.cs" AutoEventWireup="false" Inherits="DemoProject.Chp2_DGPagination" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
???? <HEAD>
???????? <title>Chp2_DGPagination</title>
???????? <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
???????? <meta name="CODE_LANGUAGE" Content="C#">
???????? <meta name="vs_defaultClientScript" content="JavaScript">
???????? <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
???????? <link href="myStyle.css" type="text/css" rel="stylesheet">
???? </HEAD>
???? <body MS_POSITIONING="GridLayout">
???????? <form id="Form1" method="post" runat="server">
<asp:DataGrid id="Products" runat="server" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
???? BackColor="White" CellPadding="4" AutoGenerateColumns="False" Font-Size="X-Small" Font-Names="Verdana"
???? AllowPaging="True" Width="600px" ShowFooter="True" GridLines="Horizontal">
???? <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
???? <ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
???? <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
???? <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
???? <Columns>
???????? <asp:BoundColumn DataField="ProductName" HeaderText="ProductName">
????????????? <HeaderStyle Width="40%"></HeaderStyle>
???????? </asp:BoundColumn>
???????? <asp:BoundColumn DataField="QuantityPerUnit" HeaderText="QuantityPerUnit">
????????????? <HeaderStyle Width="40%"></HeaderStyle>
???????? </asp:BoundColumn>
???????? <asp:BoundColumn DataField="UnitsInStock" HeaderText="UnitsInStock">
????????????? <HeaderStyle Width="20%"></HeaderStyle>
???????? </asp:BoundColumn>
???? </Columns>
???? <PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC" Mode="NumericPages"></PagerStyle>
</asp:DataGrid>
???????? </form>
???? </body>
</HTML>
?
后臺文件:
?
using?System;using?System.Collections;
using?System.ComponentModel;
using?System.Data;
using?System.Drawing;
using?System.Web;
using?System.Web.SessionState;
using?System.Web.UI;
using?System.Web.UI.WebControls;
using?System.Web.UI.HtmlControls;
using?System.Configuration;
using?System.Data.SqlClient;
?
namespace?DemoProject
{
using?System;
using?System.Collections;
using?System.ComponentModel;
using?System.Data;
using?System.Drawing;
using?System.Web;
using?System.Web.SessionState;
using?System.Web.UI;
using?System.Web.UI.WebControls;
using?System.Web.UI.HtmlControls;
using?System.Configuration;
using?System.Data.SqlClient;
?
namespace?DemoProject
{
?????public?class?Chp2_DGPagination?:?System.Web.UI.Page
?????{
?????????protected?System.Web.UI.WebControls.DataGrid?Products;
?????
?????????private?void?Page_Load(object?sender,?System.EventArgs?e)
?????????{
??????????????if(!Page.IsPostBack)
???????????????????SetBind();
?????????}
?
?????????private?void?SetBind()
?????????{
??????????????SqlConnection?MyConn?=?new?SqlConnection(ConfigurationSettings.AppSettings["conn"]);
??????????????SqlDataAdapter?MyAdpt?=?new?SqlDataAdapter("SELECT?ProductID,ProductName,QuantityPerUnit,UnitsInStock?FROM?Products",MyConn);
??????????????DataSet?MyDs?=?new?DataSet();
??????????????MyAdpt.Fill(MyDs,"Products");
??????????????DataTable?MyTab?=?MyDs.Tables["Products"];
??????????????Products.DataSource?=?MyTab.DefaultView;
??????????????Products.DataBind();
?????????}
?
?????????Web#region?Web?
?????????override?protected?void?OnInit(EventArgs?e)
?????????{
??????????????InitializeComponent();
??????????????base.OnInit(e);
?????????}
?????????
?????????private?void?InitializeComponent()
?????????{????
??????????????this.Products.ItemCreated?+=?new?System.Web.UI.WebControls.DataGridItemEventHandler(this.Products_ItemCreated);
??????????????this.Products.PageIndexChanged?+=?new?System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.Products_PageIndexChanged);
??????????????this.Load?+=?new?System.EventHandler(this.Page_Load);
?
?????????}
?????????#endregion
?
?????????private?void?Products_ItemCreated(object?sender,?DataGridItemEventArgs?e)
?????????{
??????????????ListItemType?elemType?=?e.Item.ItemType;
??????????????if(elemType?==?ListItemType.Pager)
??????????????{
???????????????????TableCell?pager?=?(TableCell)e.Item.Controls[0];
???????????????????for(int?i=0;i<pager.Controls.Count;i+=2)
???????????????????{
???????????????????????object?o?=?pager.Controls[i];
???????????????????????if(o?is?LinkButton)
???????????????????????{
????????????????????????????LinkButton?h?=?(LinkButton)?o;
????????????????????????????h.Text?=?"["+h.Text+"]";
???????????????????????}
???????????????????????else
???????????????????????{
????????????????????????????Label?l?=?(Label)?o;
????????????????????????????l.Text?=?"Page?"?+l.Text;
???????????????????????}
???????????????????}
??????????????}
??????????????if(elemType?==?ListItemType.Footer)
??????????????{
???????????????????TableCellCollection?tcc?=?e.Item.Cells;
???????????????????int?nTotalCols?=?tcc.Count;
?
???????????????????for(int?i?=0;?i<nTotalCols-1;i++)
???????????????????????e.Item.Cells.RemoveAt(i);
?
???????????????????TableCell?c?=?e.Item.Cells[0];
???????????????????c.ColumnSpan?=?nTotalCols;
???????????????????c.Text?=?Products.PageCount.ToString()?+?"pages?found";
??????????????}
?????????}
?
?????????private?void?Products_PageIndexChanged(object?source,?DataGridPageChangedEventArgs?e)
?????????{
??????????????Products.CurrentPageIndex?=?e.NewPageIndex;
??????????????SetBind();
?????????}
?
?????}
}
?
}
在后臺代碼中,有如下幾點需要注意:
1,SetBind()方法用于實現DataGrid與數據源的綁定,因為每次在指定DataGrid的CurrentPageIndex屬性后,都要重新綁定數據源才能實現分頁;
2, InitializeComponent()方法中,添加如下兩句代碼,聲明兩個事件:
???? this.Products.ItemCreated += new System.Web.UI.WebControls.DataGridItemEventHandler(this.Products_ItemCreated);
???? this.Products.PageIndexChanged += new System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.Products_PageIndexChanged);
3,ItemCreated()方法中的DataGridEventArgs參數e返回DataGrid創建的Item的類型,即ListItemType。Item就相當于一個TableRow,我們在屬性生成器中生成的樣式都是針對于<TR>的,所以如果對其中的內容自定義,只有通過ItemCreat方法。TableCell pager = (TableCell)e.Item.Controls[0]; 這句代碼用pager來代替這個TableRow中的<TD>,而其中的內容(pager.Controls[])正是也導航按鈕(LinkButton或Label),通過pager.Controls.Count返回控件數目,也就是頁數,然后通過for循環結構,逐個判斷pager中的控件類型,進行相應的轉換。實現頁導航的自定義;
4,用ItemCreated()方法同時實現了對Foot的自定義樣式。Foot默認為與DataItem相同的帶有n個單元格的TableRow,我們希望這些單元格合并后顯示總頁數。首先,通過TableCellCollection對象tcc的Removeat方法,以此移掉前n-1個單元格,留下最后一個,設置最后一個的ColumnSpan屬性為n(相當于HTML標記中TD的COLSPAN屬性),通過設置它的對齊、字體等樣式及內容,既可以實現對Foot的自定義了。或者:
private?void?dgShowC_ItemCreated(object?sender,?System.Web.UI.WebControls.DataGridItemEventArgs?e)
????????{
????????????if(e.Item.ItemType?==?ListItemType.Pager)
????????????{????
????????????????foreach?(Control?c?in?e.Item.Cells[0].Controls)
????????????????{
????????????????????if?(c?is?Label)??//當前頁數
????????????????????{
????????????????????????Label?lblpage=(Label)c;
????????????????????????//??????lblpage.ForeColor=?System.Drawing.ColorTranslator.FromHtml("#e78a29");?//#e78a29?,#FF0000?????
????????????????????????//??????lblpage.Font.Bold=true;
????????????????????????lblpage.Text="[<font?color=#e78a29><b>"+lblpage.Text+"</b></font>]";?????
????????????????????????//((Label)c).ForeColor?=?System.Drawing.Color.Green;??????
????????????????????????//??????break;
????????????????????}
????????????????????if(c?is?LinkButton)?//鏈接的其他頁數
????????????????????{??????
????????????????????????LinkButton?linkButton?=?(LinkButton)c;???????
????????????????????????linkButton.Text?=?"["?+?linkButton.Text+"]";?
????????????????????}
????????????????}????
????????????}
????????}
原貼:http://www.mscenter.edu.cn/blog/drummer/archive/2005/10/18/6249.html
轉載于:https://www.cnblogs.com/Dragon-China/archive/2006/12/20/598267.html
總結
以上是生活随笔為你收集整理的DataGrid中页导航栏的自定义样式的全部內容,希望文章能夠幫你解決所遇到的問題。