GridView样式的美化应用

更新时间:2024-01-12 作者:用户投稿原创标记本站原创 点赞:3551 浏览:11268

摘 要:ASP.NET4.0中GridView控件主要用于显示数据库的查询结果.文中对GridView控件的样式美化进行了研究,探讨了GridView控件在应用过程中的自动排序及动态添加列等功能,并给出了其实现方法.经过系统的应用与实践验证,基本实现了预期的效果.

关 键 词:GridView;class绑定;事件

中图分类号:TP311文献标识码:A文章编号:1009-3044(2012)28-6716-03

序、更新、删除、选择和分页.当GridView控件绑定到某个数据源控件时,GridView控件可利用该数据源控件的功能并提供自动排序、更新和删除功能,而这些功能的实现有时可以不写代码或写很少的代码.

GridView还引入了一批新的功能强大的视图控件,并为方便开发人员写作编程提供了大量的模板支持.但这些模板往往不能满足许多特定的要求,本文就对GridView的样式及一些常用功能做了简单的研究.

1GridView样式

1.1表头样式

要改变GridView的表头样式我们可以通过控制列标记内设置来实现,代码如下:

然后在css样式表中设置:

但这样你会发现表头并未按你的要求居左显示,由于GridView在生成的时候,表头对应的是th标记,th的默认的样式是居中粗体,即使你定义并在HeaderStyle中应用了样式:text-align:left;,表头依然是居中显示.这是因为生成时时该样式是被应用在tr上的,类似:,所以,你这样应用的表头样式是无法生效的.只有你在样式表中定义了:tr{text-align:left},才可以让表头靠左显示.

1.2边框样式

这样的缺点是不太灵活,如果需要用主题来控制界面样式,而代码中又有这样的语句的话,就不是很合适,利用css提供的机制,可以比较好的解决这个问题,代码如下:

然后在css样式表中设置:

这样就解决了gridview的边框问题

1.3隔行变色

为了提高表格的可阅读性和界面的友好性,GridView一般都采用现在比较流行的隔行改变背景色的效果,也可以通过GridView提供的AlternatingRowStyle属性来控制但常常会出现表格错乱等现象,因此我们采用通过js计算单双行来改变背景色的方法,代码简单且兼容性也较好,代码如下:

//设置每一行的背景色和事件,循环从1开始而非0,可以避开表头那一行

调用:

2.4鼠标经过行变色

想要实现很炫的鼠标经过行变色效果只需在GridView的RowDataBound事件中加入如下代码:

//判断是否为数据行

//鼠标悬停把原来颜色赋给C,修改当前颜色为#00ffee

//鼠标离开改回原来颜色

2GridView常用功能

2.1动态添加列

在实际应用中我们经常要在末尾列或任意位置动态的添加列,其实现代码如下:


//构造一个数据列对象出来

//加此数据列进入GridView

//或者插入到指定位置

2.2自动序列号

有时我们需要对GridView表格显示的结果增加一列自动递增编号列,以标示每一行的序号.要实现这一功能,先在GridView第一列加入一个TemplateField,并在TemplateField的3总结

该文对.编程中常用的GridView控件的样式做了详细的说明,并对在日常编程中会遇到的一些问题的解决做了详细的说明,这些代码都在实践的开发中作了验证,并达到了预期的效果.