• 前端:固定表格(table)表头的实现方式
  • 脸谱不靠谱 发表于 2016/2/24 15:34:00 | 分类标签: 固定表头 jquery
  •  在写插件bootstrap table的时候,当数据过多的时候,需要对表格的 thead进行固定,然后滚动表格的tbody。但是在实际的操作上,花了很多的时间在这个问题上,到现在也没有找到完美的解决方案,在这里记录下这个问题。

    方案一(<=1.0.6)

    最开始的解决方法是通过设置th中的div的 positionabsolute,从而达到固定表头的效果:

    <thead>
        <tr>
            <th>
                <div class="th-inner" style="position: absolute; width: 197px;">
                    Item ID
                </div>
            </th>
            <th>
                <div class="th-inner" style="position: absolute; width: 346px;">
                    Item Name
                </div>
            </th>
            <th>
                <div class="th-inner" style="position: absolute; width: 255px;">
                    Item Price
                </div>
            </th>
        </tr>
    </thead>
    

    这里的width,是需要通过对tbody的第一行元素的宽度进行计算出来的。

    这个方法虽然可行,但是会出现如: https://github.com/wenzhixin/bootstrap-table/issues/34 这个问题所描述的当表头文字过长,而表格内容过短,就会显示 ... 的问题,显然这种方法是存在很大的问题的。

    方案二(<=1.1.2)

    参考了很多方法,方案二使用 jQuery 的`clone方法生成两个相同的 table,并将第一个 table 的tbody和第二个 table 的thead隐藏起来,这里需要将第一个 table 的overflow设置为hidden,第二个 table 的margin-top设置为第一个 table 表头的负高度。

    这个方案适应所有的浏览器,但是会出现如: https://github.com/wenzhixin/bootstrap-table/issues/52 这个问题所描述的当使用浏览器自带的搜索时,会出现两处相同的内容,并且出现在表头处(overflow 会自动调整),显然这种方法会对用户造成困扰和极大的影响用户体验。

    方案三

    方案三参考了许多 GitHub 上其他实现固定表头的 jQuery 插件,例如:fixedheadertabledatatables,跟方案二有点类似,他们都是通过 clone 表格的thead,然后将其固定住,并根据原来 table 的每一列的宽度重新计算设置固定表头的宽度,关键代码如下:

    this.$body.find('tr:first-child:not(.no-records-found) > *').each(function(i) {
        that.$header_.find('div.fht-cell').eq(i).width($(this).innerWidth());
    });
    

    这个办法是可行的,但是发现了一个小瑕疵,那就是使用 firefox (其他浏览器都正常使用)的时候,即使表头的宽度和原来表格的宽度一模一样,有时候会渲染的不是很完美(刚刚提到的其他插件也存在这个问题)。

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:脸谱不靠谱
  • 加入时间:2014/6/1 14:38:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮