JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题

阅读目录

一、问题追踪

二、效果预览

三、源码解析

1、源码各个方法解释

2、对于上述抛出的ie和谷歌的兼容性问题的解析

3、项目中的使用

4、扩展

四、总结

正文

前言：一年前，博主分享过一篇关于bootstrapTable组件冻结列的解决方案 JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ，通过该篇，确实可以实现bootstrapTable的冻结列效果，并且可以兼容ie浏览器。这一年的时间，不断有园友以及群里面的朋友问过我关于固定高度之后，冻结列页面效果不能对齐的问题，奈何博主太忙，一直没有抽空将这个问题优化。最近项目里面也不断有人提过这个bug，这下子不能再推了，必须要直面“惨淡的bug”，于是昨天利用一天的时间将原来的扩展做了一下修改，能够完美解决固定高度之后冻结列的问题，并且，博主还加了一些特性，比如右侧列的冻结、冻结列的选中等等，有需要的朋友可以捧个场。相信通过此篇，老板再也不用担心我的冻结列不能固定高度了~~

本文原创地址：http://www.cnblogs.com/landeanfen/p/7095414.html

回到顶部

一、问题追踪

记得在之前的那篇里面介绍过，bootstrapTable组件自带的冻结列扩展，不能兼容ie浏览器，即使最新版本的ie也会无法使用，这是一般的系统不能忍受的，所以在那篇里面给出过解决方案，但并未分析ie浏览器不能兼容的原因，昨天博主花了点时间特意调试了下源码，原来在ie里面，使用jquery的clone()方法和谷歌等浏览器有所区别。为了展示这个区别，这里先抛个砖。比如有如下代码：

bootstrap-table-fixed-columns.js
bootstrap-table-fixed-columns.css
如何使用呢？这里博主单独搞了一个静态的html测试页，还是贴出来供大家参考。

bootstrapTableFixColumns.html
代码释疑：

bootstrap-table-fixed-columns.js
bootstrap-table-fixed-columns.css
需要说明的是，由于时间问题，右侧固定列的代码和上述解决高度的代码并未合并，所以如果你既想要解决冻结列的高度，又想要右侧列的冻结，需要自己花点时间合并下代码。

回到顶部

四、总结

至此本文就结束了，关于冻结列的课题终于可以暂时告一段落了，这个问题博主纠结了很久，总算是解决了。如果你觉得本文能够帮助你，可以右边随意 打赏 博主，打赏后可以获得博主永久免费的技术支持。