唯品秀前端博客
当前位置: 前端开发 > Js前端框架 > bootstrap插件bootstrap-table-fixed-columns表格列左边右边固定及点击事件

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

右侧列固定

这个问题分版本,并不是插件不支持,如果你是老版本,那只支持左侧固定,如果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')
        }
      }
    })
  }
});

固定后的列无法点击

网上查了大半天,也没找到解决方式,然后我的解决方式是:因为固定列实际就是悬浮在最上层的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实在不便。

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(2) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

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

最新评论

    暂无留言哦~~

博客简介

一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,梦想一旦被付诸行动,就会变得神圣,愿景:成为宇宙中最具有代表性的前端技术类博客。主题开源 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 295 篇
  • 草稿数目: 0 篇
  • 分类数目: 17 个
  • 独立页面: 7 个
  • 评论总数: 1020 条
  • 链接总数: 14 个
  • 标签总数: 490 个
  • 注册用户: 2 人
  • 访问总量: 9,530,673 次
  • 最近更新: 2021年10月19日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线