首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >C# GridView中固定表头的jQuery实现

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

作者头像
崔文远TroyCui
发布2019-02-26 14:57:39
2.1K0
发布2019-02-26 14:57:39
举报
文章被收录于专栏:远在上海远在上海

听到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图发到博客上来

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年6月14日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档