标签： gridview固定表头

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