JS組件系列之Bootstrap Table凍結列功能IE瀏覽器兼容性問題怎么解決？解決方案分享

最近項目里面需要用到表格的凍結列功能，所謂“凍結列”，就是某些情況下表格的列比較多，需要固定前面的幾列，后面的列滾動。遺憾的是，bootstrap table里自帶的fixed column功能有一點bug ，于是和同事討論該如何解決，于是就有了這篇文章。
一、起因回顧
最近項目里面有一個表格需求，該表格列是動態產生的，而且列的數量操作一定值以后就會出現橫向滾動條，滾動的時候需要前面幾列固定。也就是所謂的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調用如下

加兩個參數fixedColumns和fixedNumber即可，什么意思不用過多解釋，是否凍結列、凍結列的列數。還有一點需要說明的是，這里調用的時候不能指定它的height ，如果指定height，表格的凍結顯示會有問題。
【JS組件系列之Bootstrap Table凍結列功能IE瀏覽器兼容性問題怎么解決？解決方案分享】