关于bootstrap-table冻结列生成多个冻结表头和表格主体的问题

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

项目中有3个页面的表格使用到了 bootstrap-table 冻结列的功能
其中，某个表格要实现如下图所示的功能：正常列表头的某些单元格需要将字体加粗并且将字体颜色变为红色

功能实现了是没错，但是当使用 Ctrl + +（加号） 对浏览器页面进行缩放时，发生了特别诡异的现象：不但字体颜色消失了，而且冻结列发生了及其严重的错位现象，并且这种错位是不可逆的。也就是说，一旦错位产生就只能通过重新刷新页面才能恢复正常。【很奇怪的现象】
按F12打开浏览器的控制台，在Elements选项卡那一栏中发现：当对页面进行缩放时，表格就会自动创建一层冻结列。如果不停的对页面进行缩放，表格就会生成很多层冻结列。因为冻结列本来就是漂在正常列的上一层，如果多层冻结列叠加显示，就会产生很多视觉和功能上的问题，很是令人头疼。
经过测试发现，有两个页面的表格冻结列都出现了同一个问题：当页面加载以后，表格就会进行初始化，初始化成功后，按F12打开浏览器的控制台，你会惊奇的看到，居然生成了多个冻结表头（ $(".fixed-table-header-columns") ）和冻结表格主体（ $(".fixed-table-body-columns") ）。【如下图所示】

通过查看 bootstrap-table-fixed-columns.js源码和bootstrap-table的HTML结构可以知道：冻结列是通过在 正常的table 前新增一个div表格，并且这个div表格是置于正常table对应的div之上来实现的。
正常情况下，开启 bootstrap-table 的冻结列功能，只会出现一个冻结表头和冻结表格主体。【如下图所示】

那到底是什么原因造成的呢？【说实话，这个问题在项目一开始就已经被我发现了，但由于我刚开始接触 bootstrap-table ，对它的实现原理不了解也不熟悉，再加上当时这个问题的存在对功能也没有什么影响，所以问题就一直存在着，没有被解决。直到最后项目结项时，测试测出的bug要求必须解决，这才又重新回过头来寻找问题的根源。】
当我最近再次查看这个问题的时候，依然不知所措。平时遇到不会或者无法解决的问题，直接百度就可以找到答案或解决方法，毕竟有前车之鉴，解决起来还不算特别困难。但是这次，对于我目前要解决的这个问题，在网上并没有搜索到答案。可能是没有人遇到过类似的问题吧。

分析问题

由于我只负责协助后台调前端的样式和功能，所以后台开发人员在遇到阻力时才会找我帮助解决问题。在平时的开发过程中，前端代码他们自己可以胜任一些。
为了找到问题的根源所在，我使用了四种方法，分别是：
1. 百度搜索 【未果】
2. 控制台自行打断点调试 bootstrap-table 生成冻结列部分的源码（bootstrap-table-fixed-columns.js）。虽然不能完全看懂，但是我依然在关键位置给每一行代码都打上了断点。 【花费了很长时间一行行看代码，依然未果】
3. 查看 bootstrap-table 创建表格的源码（bootstrap-table.js ）并且打断点调试，看看会不会有什么新的发现。 【结果并没有】
4. 比对正常页面和非正常页面初始化Bootstrap Table 的部分js 代码。【写法一致，没什么差异，后台说就是一套复制粘贴过去的】

虽然我不知道 生成多层冻结列 的具体原因是什么，但我经过一下午的代码调试，也是有所发现的。

疑问：为何会生成生成多层冻结列呢？
肯定是将冻结表头和冻结表格主体进行了多次初始化。

主要看了bootstrap-table-fixed-columns.js中的这些地方：

BootstrapTable.prototype.initHeader = function () {}
BootstrapTable.prototype.initBody  = function () {}
BootstrapTable.prototype.resetView = function () {}

因为试了很多方法都没有作用，而且中途也花费了不少时间和精力。实在是心有余而力不足，随后我就放弃了。

万万没想到

第二天在调整正常表格冻结列的那个页面的HTML结构时，被我发现了异常。
虽然听本人说是全套复制粘贴过去的，但在复制粘贴过程中，还是出现了纰漏。
因为之前将重心都放在了比对js代码上，而忽略了HTML结构。万万没想到，居然是HTML结构出的问题。

这个问题就涉及到了 Bootstrap Table是如何使用的。

当我们在HTML页面中引入Bootstrap Table所需要的js 和 css文件之后，我们最重要的就是：要定义好一个空的表格并给一个id，然后使用其自带的语法来创建一个Bootstrap Table。
即

//非常简单
<table id="exampleTable"></table>

注意：

当然 Bootstrap Table 还提供了一种简洁的用法，直接在table标签里面定义类似“data-...”等相关属性，就不需要在js里面进行注册了。
这种用法虽然简单，但不太灵活。所以还是统一使用在js里面初始化的方式来使用table组件。

但是，正常的表格冻结列页面中可不是这么写的：发现里面有一行代码被注释掉了

//写法如下：
<table id="exampleTable"></table>
//<table id="exampleTable" data-mobile-responsive="true"></table>

我在问及为什么有一行代码被注释掉了，他本人给的说法是：最开始就是那样写的，也不知道后来怎么注释的。

这下恍然大悟，原来就是因为 设置了 data-mobile-responsive 属性 才导致冻结列出现了不该有的问题。

于是我把注释掉的代码重新打开，将上面那一行注释掉，结果可想而知：表格中确实出现了多层冻结列。
为了记住这个坑，我就把data-mobile-responsive="true"改为了data-mobile-responsive="false"。【现在，问题终于解决了。】

随后，我在当前页面所引入的js代码中发现：在引入Bootstrap Table的相关js 和 css 文件时，里面多引入了一个js文件。即：【可能是为了适配移动端才引入的，但是在这里完全没有必要加，直接去掉就好了】

<script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>

结束语

至此，问题就完美解决了。