最近在老的后台项目用到表格固定列这个插件，但这个插件也相对老了，里面还是有些细节问题后续作者也没很好去维护支持，在此记录下我的解决方式
准备工作
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
赞(4)
打赏
标签：
Bootstrap 下一篇：axios.defaults.withCredentials跨域携带cookie
共 0 条评论关于"bootstrap插件bootstrap-table-fixed-columns表格列左边右边固定及点击事件"
最新评论