本文共 2611 字,大约阅读时间需要 8 分钟。
Write By Monkeyfly
以下内容均为原创,如需转载请注明出处。
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要求必须解决,这才又重新回过头来寻找问题的根源。】
bootstrap-table
生成冻结列部分的源码(bootstrap-table-fixed-columns.js
) 。虽然不能完全看懂,但是我依然在关键位置给每一行代码都打上了断点。 【花费了很长时间一行行看代码,依然未果】bootstrap-table
创建表格的源码 (bootstrap-table.js
)并且打断点调试,看看会不会有什么新的发现。 【结果并没有】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
。
//非常简单
注意:
Bootstrap Table
还提供了一种简洁的用法,直接在table
标签里面定义类似“data-...”
等相关属性,就不需要在js
里面进行注册了。js
里面初始化的方式来使用table
组件。但是,正常的表格冻结列页面中可不是这么写的:发现里面有一行代码被注释掉了
//写法如下:
我在问及为什么有一行代码被注释掉了,他本人给的说法是:最开始就是那样写的,也不知道后来怎么注释的。
这下恍然大悟,原来就是因为 设置了 data-mobile-responsive 属性
才导致冻结列出现了不该有的问题。
于是我把注释掉的代码重新打开,将上面那一行注释掉,结果可想而知:表格中确实出现了多层冻结列。
为了记住这个坑,我就把data-mobile-responsive="true"
改为了data-mobile-responsive="false"
。【现在,问题终于解决了。】 随后,我在当前页面所引入的js
代码中发现:在引入Bootstrap Table
的相关js
和 css
文件时,里面多引入了一个js
文件。即:【可能是为了适配移动端才引入的,但是在这里完全没有必要加,直接去掉就好了】
至此,问题就完美解决了。