听到GridView,你肯定觉得这种控件方式的WebForm开发已经是过时的技术了,连微软自己都将MVC推出了5个版本了。但是,要知道做技术万变不离其宗,至今还有人用asp打造cms系统,还在写asp的微信支付、微信公众号管理平台,任何一门技术用好了,用户体验上下足功夫,做一个让用户喜欢用的功能、模块、软件,那才是最重要的,最终用户那管你用什么技术写的后台,前台看到页面无非就是HTML5的代码,加上javascript代码,加上图片和后台的数据等!
言归正传,表格是网页上比较常用的呈现数据的一种形式,表格的样式,排序,行动态背景,表头固定,列固定都是比较常见的需求,其实这点需求主要来自于Excel类(OpenOffice也有类似的)的用户体验。更高级的用户需求是基于网页的可编辑的表格,其实很多时候,我们大概了解一下实现原理,然后整合一下交付用户满足需求就已经完成了一个很重要的使命:高级的技术>实用的技术>最终用户 ,能完成好这点使命,就足以获得较好的工作机会,生意机会,确保衣食无忧,从而再去研究更高达上的技术,反哺最终用户。
如果你在百度,必应搜索“gridview固定表头”会发现很多结果,大部分都是过时的方法和插件,这浪费了我很多时间去实验和比较哪种更适合我。淘汰了那些自己写的javascript片段,还有那些不紧固定表头,还必须固定表高的,我尝试了3个插件:
-
FixedHeaderTable:http://www.fixedheadertable.com/
-
Sticky Table Headers & Columns:http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
-
StickyTableHeaders:https://github.com/jmosbech/StickyTableHeaders
最终选择了这个:StickyTableHeaders,调用简单,无需复杂配置,表头固定非常好用!美中不足是当数据表长度列太多,表格行数太多,返回顶部时会出现明显的加载表头的过程。
插件调用方法很简单:
$(function () { $('#gridView').stickyTableHeaders(); });
Webform的GridView还需要做一个简单设定,用来生成标准的带有thead,tbody,tfooter的表格。
前台GridView增加事件: OnPreRender="gridView_PreRender",后台的事件如下:
protected void gridView_PreRender(object sender, EventArgs e) { if (this.gridView.Rows.Count > 0) { //使用<th>替换<td> this.gridView.UseAccessibleHeader = true; //HeaderRow放<thead>内,数据行放<tbody>内 this.gridView.HeaderRow.TableSection = TableRowSection.TableHeader; //FooterRow放<tfoot>内 this.gridView.FooterRow.TableSection = TableRowSection.TableFooter; } }
大功搞成,看看效果吧,第一次制作gif图发到博客上来: