bootstrap插件bootstrap-table-fixed-columns表格列左边右边固定及点击事件

原文作者：https://www.weipxiu.com/7907.html

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

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

固定表格表头和列无法对齐
思路：在表格完全渲染后，将表格的每一列实际占据宽度获取依次赋值给表头，当然，你也可以根据你数据的差异性，将表头宽度赋值给表格tableBody的第一列。

$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源码，修改位置如下：

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

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

我是搬砖工，感谢原文作者的奉献，请大家移步观摩原文作者：https://www.weipxiu.com/7907.html