主体

一年前，博主分享了一篇关于bootstrapTable组件JS组件系列——冻结列的解决方案，bootstrapTable冻结列功能ie浏览器兼容问题的解决方案。通过本文，可以实现冻结引导表列的效果，并且可以兼容IE浏览器。这一年有一些园林朋友和群里的朋友问我关于冻结柱页的效果在固定高度后不能对齐的问题，但是博主太忙了，没有时间优化这个问题。最近这个bug在项目中不断被提及，不能再推了，必须正视“惨淡bug”。所以昨天我们用了一天的时间修改了原来的延长线，可以完美解决固定高度后冻柱的问题。此外，博主还增加了一些功能，如右侧冻结栏目、选择冻结栏目等。让有需要的朋友可以捧一捧场。相信通过这篇文章，老板再也不用担心我的冻柱不能固定在高度了~ ~

一、问题追踪

记得前一篇文章介绍过bootstrapTable组件的冻结列扩展与ie浏览器不兼容，甚至最新版本的ie都无法使用，对于一般系统来说是无法忍受的。因此，该文章给出了解决方案，但没有分析ie浏览器不兼容的原因。昨天，博主专门花了一些时间调试源代码。原来，在ie中，使用jquery clone()方法不同于Google等浏览器。要显示这种差异，请在此抛砖引玉。例如，有以下代码：

表id=' tbtest ' trtdaaa/tdtdbbb/tdtdtdccc/TD/tr trtdddd/TDT eee/TDT fff/TD/tr trtdggg/TDT hhh/TDT iii/TD/tr/tablescript type=' text/JavaScript ' var $ tr=$(' # tbtest tr : eq(0)')。clone()；var $ TDS=$ tr . find(' TD ')；$ tr . html(' ')；alert($tds.eq(0))。html())；/script代码本身很简单，只是为了测试。看到这里，你可以试着猜测一下警戒的结果。

算了，不考大家，就贴吧，有图有真相！

我不需要解释哪个是ie，哪个是谷歌。

它们之间的区别是显而易见的。谷歌得到“aaa”，而ie得到一个空字符串。这是为什么？

其实如果用值类型和引用类型的区别来解释这种区别，也不难理解。在谷歌浏览器中，$tr变量是一个引用类型。当您清空它的内容时，您只清除变量$tr或point的“指针”。$tds变量仍然指向$tr的原始内容，因此当您调用$tds.eq(0)时仍然可以得到它。相同的代码在ie浏览器中。$tr变量是值类型。清空其内容后，$tds的内容也会被清空。如果你有更好的解释，请给我你的建议。

组件的原生js之所以与ie浏览器不兼容，是因为它使用了clone()，导致在不同的浏览器下会有不同的结果。相信bootstrapTable组件的作者应该知道这个区别，但是他并没有太在意。从作者做的很多功能的兼容性可以看出，他做的很多功能都没有过多考虑ie浏览器的效果。

二、效果预览

还是老样子，没有图不行，小二，上图！

如果没有固定高度：单列冻结。

多柱冷冻。

固定任何高度效果

ie浏览器没有问题，这里就不重复上面的图片了。

三、源代码分析

关于源代码没什么好说的。有兴趣可以自己看看。主要原理是重写bootstrapTable构造函数的事件，以达到预期的效果。

（函数($) { '使用“严格”；$.扩展($。fn。bootstraptable。默认值，{ fixedColumns: false，固定数字： 1 })；var BootstrapTable=$。fn。BootstrapTable。构造函数，_ init header=BootstrapTable。原型。init头，_ init体=BootstrapTable。原型。init body，_ resetView=BootstrapTable。原型。resetViewbootstraptable。原型。initfixed columns=函数TiO