唯品秀前端博客

最近在老的后台项目用到表格固定列这个插件,但这个插件也相对老了,里面还是有些细节问题后续作者也没很好去维护支持,在此记录下我的解决方式

准备工作

1
2
3
4
5
6
7
bootstrap.min.css
bootstrap-table.css
bootstrap-table-fixed-columns.css // 核心css
jquery.min.js
bootstrap.min.js
bootstrap-table.js
bootstrap-table-fixed-columns.js // 核心js

基本用法

1
2
3
4
5
6
7
$el.bootstrapTable(‘destroy’).bootstrapTable({
columns: columns, // 渲染表头,columns是我们拿到数据后,表头数据的数组
data: data, // 表格主题内容 data是我们拿到数据后,表格主体的数据
fixedColumns: true, // 是否固定表头
fixedNumber: 1 // 固定几列
});
// 注意页面不要手动设置水平滚动条,否则不生效

右侧列固定

这个问题分版本,并不是插件不支持,如果你是老版本,那只支持左侧固定,如果jQuery v1.11.0、bootstrap-table.js和bootstrap-table-fixed-columns.min.js是新v1.18.2(其他版本自测)就没问题

固定表格表头和列无法对齐

思路:在表格完全渲染后,将表格的每一列实际占据宽度获取依次赋值给表头,当然,你也可以根据你数据的差异性,将表头宽度赋值给表格tableBody的第一列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$baseTable.bootstrapTable({
  rowStyle: function rowStyle(row) {
    var week = Global.Util.dateIsWeekend(row.dt);
    var color = week && /Det|History/.test(currentTab) ? '#f00' : '#000';
    return { css: { color: color } };
  },
  height: dataHeight,
  columns: this.baseTableColumns(),
  silent: true,
  fixedColumns: /info_flowTiling/.test(currentTab) ? true : false,
  fixedNumber: 7,
  onClickCell:function(field, value, row, $element)
  {
      console.log(JSON.stringify(field));
  },
  onPostBody: function () {
    // 处理表对齐问题
    setTimeout(function () {
      var fixedHeader = $(".fixed-table-header-columns table thead tr:first th");
      var fixedBody = $('.fixed-table-body-columns tbody tr').eq(0).find('td');
      if (fixedBody.length) {
        for (var i = 0; i < fixedBody.length; i++) {
          fixedBody.eq(i).css("width", fixedHeader.eq(i).find('.fht-cell').outerWidth(true) + 'px')
        }
      }
    })
  }
});

固定列垂直列错位bug解决

该问题发生在使用固定列情况下,修改bootstrap-table-fixed-coluumns.js源码:132行:-2改为-1;153行:-1删掉

还不行?

上述方式如果还不行,将上面截图最后三行改成下面代码即可

1
2
3
4
var $height = this.$body.find('> tr').eq(0).height();
this.$body.find('> tr').each(function (i) {
   that.$fixedBody.find('tr:eq(' + i + ')').height($height);
});

固定后的列无法点击

网上查了大半天,也没找到解决方式,然后我的解决方式是:因为固定列实际就是悬浮在最上层的table,我把这个表格用css3给穿透,就可以直接点到底下正常表格,找到插件bootstrap-table-fixed-columns.js源码,修改位置如下:

1
2
3
4
5
6
this.$fixedBody.css({
    width: this.$fixedHeader.width(),
    height: height,
    top: top,
    pointerEvents:'none' // 新增,将悬浮的固定表格给穿透掉
}).show();

小结

毕竟项目和插件都比较老,现在大家都用mvvm去了,关注这块问题的比较少,所以在此记录下,方便维护老项目的小伙伴能看到及时解决问题,顺便附一个中文文档,官方文档看着还是挺累的,查个api实在不便。

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(3) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"bootstrap插件bootstrap-table-fixed-columns表格列左边右边固定及点击事件"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏