我们可以利用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中页导航栏的自定义样式相关推荐

  1. CSS中定义多个链接样式,在CSS中定义【导航栏】超链接样式

    1.案例css代码 .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标悬停黑色 */ .divcs ...

  2. Android中导航栏之自定义导航布局

    Toolbar系列文章导航 Android中导航栏之Toolbar的使用 Android中导航栏之溢出菜单OverflowMenu Android中导航栏之搜索框SearchView Android中 ...

  3. 定制iOS 7中的导航栏和状态栏

    近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外观上有大量的改动.从开发者的角度来看,导航栏和状态栏就发生了明显的变化.状态栏现在是半透明的了,这也就意味着导航栏 ...

  4. uniapp 底部菜单_利用uni-app怎么对底部导航栏进行自定义

    利用uni-app怎么对底部导航栏进行自定义 发布时间:2020-12-14 15:15:03 来源:亿速云 阅读:78 利用uni-app怎么对底部导航栏进行自定义?相信很多没有经验的人对此束手无策 ...

  5. uniapp模拟导航栏，自定义导航栏的使用

    文章目录 需求 隐藏原生导航 局部页面隐藏 全局页面隐藏(一般用不到) 使用:页面结构与样式 需求 在做uniAPP的时候,官方的导航栏不满足设计页面的需求,需要自定义才可以实现,于是就把原生的导航栏 ...

  6. html表格中加入导航栏,用HTML中的列表标签做个导航栏吧

    我们在网上浏览的好多网页都有导航栏,它提供信息导航的功能,想知道它是怎么做出来的吗? 首先要知道的:HTML中的列表标签都有那些呢? ul-li无序列表 ( 网页中显示的默认样式一般为:每项 li 前 ...

  7. css中侧边导航栏怎么隐藏,CSS3手机侧边导航栏滑动隐藏特效

    [温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 共4种CSS3手机侧边导航栏滑动隐藏特效 1.默认的点击滑动侧边栏菜单效果. 2.带3D transforms的滑 ...

  8. 微信小程序实现原生导航栏和自定义头部导航栏

    原生导航栏: 可以在 app.json 的 window 属性中或页面的 JSON 文件中设置 navigationBarTitleText(导航栏标题内容).navigationBarTextSty ...

  9. 【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

    文章目录 一.盒子测量及样式 1.总体盒子测量及样式 2.左侧盒子测量及样式 3.中间盒子测量及样式 4.右侧盒子测量及样式 二.横版导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.显示 ...

最新文章

  1. MPB：林科院袁志林组-​枫香-真菌互作培养体系构建
  2. navcat设置oracle表主键自增_初识 Oracle 表空间设置与管理
  3. 大雁塔为什么七层_“大唐不夜城”广场旁边的千年古佛塔为何被叫“大雁塔”？...
  4. Matplotlib实例教程（五）绘制散点图
  5. 科来网络分析系统概要介绍
  6. 集成学习-Boosting集成学习算法LightGBM
  7. 第十一届蓝桥杯省赛C++组试题 第6题
  8. 【特别关注】2021数据技术嘉年华直播观看指南
  9. not found for dependency: expected at least 1 bean which qualifies as autowire
  10. 【Java从0到架构师】SpringBoot - MyBatis
  11. python uiautomation_使用python UIAutomation从QQ2017(v8.9)群界面获取所有群成员详细资料,...
  12. dot watch+vs code提升asp.net core开发效率
  13. FISCO BCOS Solidity 智能合约 返回数组
  14. android重写view和viewgroup的区别
  15. max3232ese_【MAX3232ESE+ PDF数据手册】_中文资料_引脚图及功能_(美信 Maxim Integrated)-采芯网...
  16. android mapping文件作用,Android打包代码混淆后的Mapping文件路径
  17. python瓦登尔湖词频统计
  18. PTA 6 循环日程表
  19. 从零开始学前端 - 16. JS对象Object介绍及常用方法
  20. 10004 函数重载

热门文章

  1. Spark Executor内幕
  2. HTML5 Canvas、内联 SVG、Canvas vs. SVG
  3. mkisofs简单定制linux iso
  4. 第四讲：debugging simulation mismatches
  5. LaTex 使用特殊章节符号 (§)
  6. MYSQL 生成UUID() 即 ORACLE 中的guid()函数
  7. EJS 模板中，js 如何获取后端传来的数据
  8. AngularJS 拦截器和好棒例子
  9. 一个网站的诞生- MagicDict开发总结3 [日语字典数据结构]
  10. 年底了，游戏大作连连