改变DataGrid分页栏的样式

原创 2004年06月22日 19:18:00

如何使DataGrid控件的分页导航条变个样式。

用DataGrid控件进行分页时,要么上一页,下一页,要么全是数字,做出后自己都看不过眼,更别提普通浏览者了。可是怎么改变一下呢??

其实也不是很难,先看看DataGrid显示的是什么东东,这样可能会有点眉目。¢

在DataGrid中,分页导航栏是用一行(TableRow)来表现出来,在这个行(TableRow)中,只有一个列(TableCell),我们所看到的所有的数字超链接按钮(LinkBurron)都是这个列(TableCell)里的控件,里面的布局是:一个超链接(LinkBurron),一个空格,再接一个超链接(LinkButton),再接一个空格。。。值得一说的是,ASP.NET里面生成的所有东东都是控件,所以那个空格也逃不了。于是,我们要想改变样式,就是改变那个TableCell里面的控件就行了。

为了达到改变TableCell里面控件的目的,我们还要用到ItemCreated事件,MSDN上写:

当创建 DataGrid 控件中的项时(不论是在往返行程中还是在将数据绑定到控件时),都会引发 ItemCreated 事件。ItemCreated 事件通常用于控制 DataGrid 控件中行的内容和外观。

好了,下面看看具体是怎么实现的:

1.在DataGrid的属性里,添加  OnItemCreated = “ItemCreaged”;

2.在下面的代码里加上

void ItemCreated ( object sender, DataGridItemEventArgs e )

{

  ListItemType type = e.Item.Type;//ListItemType是枚举,表示可以包含在列表控件中的不同项

  if ( type == 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 = “第“+l.Text+“页“;

      }

    }

  }

}

以上这些代码就可以实现不同于默认样式的分页导航条了。

深入DataGrid分页样式实例

DataGrid提供了分页功能,不过看上去功能有限,但是我们可以通过DataGrid的一些属性来获取状态以及增加首页、尾页功能按钮。这里没有使用DataGrid的自定义分页功能,如果在速度效率不是很讲...
  • limshirley
  • limshirley
  • 2017年04月17日 14:16
  • 441

easyUI自定义DataGrid分页栏

@author YHC datagrid内置一个很好特性的分页功能,自定义也相当简单,在这个教程中,我们将创建一个datagrid 和添加一些自定义按钮在分页工具栏. 查看 Dem...
  • yhc13429826359
  • yhc13429826359
  • 2012年08月10日 16:47
  • 7497

替换jqgrid 分页小箭头样式

替换jqgrid 分页小箭头样式
  • Alex81320
  • Alex81320
  • 2016年12月20日 20:11
  • 1713

easyUI自定义DataGrid分页栏

@author 雨泽 datagrid内置一个很好特性的分页功能,自定义也相当简单,在这个教程中,我们将创建一个datagrid 和添加一些自定义按钮在分页工具栏. 查看...
  • me4405801
  • me4405801
  • 2016年01月07日 10:38
  • 363

EasyUI 之 DataGrid分页组件中文显示的两种方法(语言的切换)

在过去的这一段时间参与了高校云平台的评教系统,在系统的前端要求用MVC+Easyui,从今天开始就来给大家讲讲MVC+EasyUI的前端应用。         JQueryEasyUI:一组...
  • zhongqing_fzq
  • zhongqing_fzq
  • 2016年06月27日 19:35
  • 3416

jqgrid+bootstrap样式实践

jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.mi...
  • allenwdj
  • allenwdj
  • 2015年10月16日 11:05
  • 33056

jqgrid--分页

jqGrid的翻页要定义在html里,通常是在grid的下面,且是一个div对象:     写道 jQuery("#grid_id").jqGrid({ ... pager : '...
  • whatlookingfor
  • whatlookingfor
  • 2014年08月05日 10:51
  • 9175

easyUI使用datagrid分页栏不显示

今天在使用easyUI的时候,发现一个很奇怪的问题,就是我的中部布局的div中在加了一个table后,里面表格的分页栏就不能显示出来了,不多说了,直接上代码吧 datagrid表格加载函数 $('...
  • PTtaoge
  • PTtaoge
  • 2017年08月31日 15:59
  • 1737

easyui datagrid 不显示分页栏,可以自定义显示分页按钮

项目里遇到的需求是 :用户在页面查询的时候,后台要根据一个查询条件的值去判断是不是要显示分页,因为查询一页数据,做了更新操作,被当前用户锁定,对于其他用户是不可见的,每次查询未处理的数据不显示分页按钮...
  • a417074865
  • a417074865
  • 2016年04月25日 20:43
  • 4647

jgGrid 学习整理

jqGrid使用记录 一、要引用的文件   要使用jqGrid,首先页面上要引入如下css与js文件。   1、css   link href="/css/ui.jqgrid.cs...
  • xiaoxiongaman
  • xiaoxiongaman
  • 2015年02月11日 20:22
  • 1819
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:改变DataGrid分页栏的样式
举报原因:
原因补充:

(最多只允许输入30个字)