DataGrid中页导航栏的自定义样式

最新推荐文章于 2022-03-25 18:26:04 发布

weixin_34380948

最新推荐文章于 2022-03-25 18:26:04 发布

阅读量92

点赞数

文章标签： ui c# javascript ViewUI

我们可以利用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>

</HEAD>

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

<asp:BoundColumn DataField="ProductName" HeaderText="ProductName">

</asp:BoundColumn>

<asp:BoundColumn DataField="QuantityPerUnit" HeaderText="QuantityPerUnit">

</asp:BoundColumn>

<asp:BoundColumn DataField="UnitsInStock" HeaderText="UnitsInStock">

</asp:BoundColumn>

</Columns>

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

weixin_34380948

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DataGrid中页导航栏的自定义样式

我们可以利用DataGrid的ItemCreat()方法来实现DataGrid中页脚（Foot）和页导航栏的自定义样式。ItemCreat，顾名思义，就是在数据项创建时发生的事件，对于DataGrid来讲，表头（Head）、数据项（DataItem）、页脚（Foot）、页导航（Pager）都是一个Item。下面的例子将实现页脚与页导航的自定义样式。我们希望在页脚现实DataGrid中的总页数，对于...
复制链接

扫一扫