C# GridView中固定表头的jQuery实现

听到GridView,你肯定觉得这种控件方式的WebForm开发已经是过时的技术了,连微软自己都将MVC推出了5个版本了。但是,要知道做技术万变不离其宗,至今还有人用asp打造cms系统,还在写asp的微信支付、微信公众号管理平台,任何一门技术用好了,用户体验上下足功夫,做一个让用户喜欢用的功能、模块、软件,那才是最重要的,最终用户那管你用什么技术写的后台,前台看到页面无非就是HTML5的代码,加上javascript代码,加上图片和后台的数据等!

言归正传,表格是网页上比较常用的呈现数据的一种形式,表格的样式,排序,行动态背景,表头固定,列固定都是比较常见的需求,其实这点需求主要来自于Excel类(OpenOffice也有类似的)的用户体验。更高级的用户需求是基于网页的可编辑的表格,其实很多时候,我们大概了解一下实现原理,然后整合一下交付用户满足需求就已经完成了一个很重要的使命:高级的技术>实用的技术>最终用户能完成好这点使命,就足以获得较好的工作机会,生意机会,确保衣食无忧,从而再去研究更高达上的技术,反哺最终用户。

如果你在百度,必应搜索“gridview固定表头”会发现很多结果,大部分都是过时的方法和插件,这浪费了我很多时间去实验和比较哪种更适合我。淘汰了那些自己写的javascript片段,还有那些不紧固定表头,还必须固定表高的,我尝试了3个插件:

  1. FixedHeaderTable:http://www.fixedheadertable.com/

  2. Sticky Table Headers & Columns:http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

  3. 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图发到博客上来:

Loading

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据