最近项目里面需要用到表格的冻结列功能，所谓“冻结列”，就是某些情况下表格的列比较多，需要固定前面的几列，后面的列滚动 。遗憾的是，bootstrap table里自带的fixed column功能有一点bug，于是和同事讨论该如何解决，于是就有了这篇文章 。
一、起因回顾
【JS组件系列之Bootstrap Table冻结列功能IE浏览器兼容性问题怎么解决？解决方案分享】最近项目里面有一个表格需求，该表格列是动态产生的，而且列的数量操作一定值以后就会出现横向滚动条，滚动的时候需要前面几列固定 。也就是所谓的excel的冻结列功能 。该如何实现呢?不用多说，当然是查文档，于是找到了这篇http://issues.wenzhixin.net.cn/bootstrap-table/index.html#extensions/fixed-columns.html 。谷歌浏览器效果如下：
第一列固定
文章插图
文章插图
貌似问题完美解决!可是，事与愿违，很遗憾，上面说了，这是谷歌浏览器的效果，没有问题 。我们来看看IE里面IE11效果：
文章插图
文章插图
IE10效果：
文章插图
文章插图
很显然，不管是IE内核版本多少，冻结的列里面的内容都无法显示 。怎么办?这可为难死宝宝了!
二、解决方案
还好有万能的开源，查看该页面源代码发现可以找到冻结列这个js的源码 。
文章插图
文章插图
点击进入可以看到这个js的所有源码，找到源码就好办了，我们试着改改源码看是否能解决这个bug 。
我们在bootstrap-table下面的extensions文件夹下面新增加一个文件夹fixed-column
文章插图
文章插图
下面就贴出我们改好的源码：
文章插图
文章插图
文章插图
主要修改的地方：
1)源码里面将thead和tbody分别封装成了一个单独的表格，修改后将thead和tbody放到了一个table里面;
2)依次遍历冻结的列放入到固定的tbody里面;
其实也就改了那么几个地方，就能完美解决IE的bug 。我们先来看看效果：
IE11
文章插图
文章插图
IE10
文章插图
文章插图
IE8
文章插图
文章插图
我们再来看看如何使用 。
1、引用js和对应的css
文章插图
2、js调用如下
推荐阅读
- 关于狐狸的电视剧
- 势胜网络是什么充值平台
- 钉钉云课堂批量导入试题方法
- 一人之下战备阶段在哪打开
- win11强制删除文件教程
- 山西省有哪些中专院校
- 吃瓜子会胖吗
- 八月最后一天发朋友圈说说 暑假最后一天的文案短句
- 白墙溅上油怎么能弄干净