閱讀目錄

• 一、問題追蹤
• 二、效果預覽
• 三、源碼解析
  • 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()方法和谷歌等瀏覽器有所區別。為了展示這個區別，這里先拋個磚。比如有如下代碼：

<table id="tbtest"><tr><td>aaa</td><td>bbb</td><td>ccc</td></tr><tr><td>ddd</td><td>eee</td><td>fff</td></tr><tr><td>ggg</td><td>hhh</td><td>iii</td></tr> </table><script type="text/javascript">var $tr = $('#tbtest tr:eq(0)').clone();var $tds = $tr.find('td');$tr.html('');alert($tds.eq(0).html()); </script>

代碼本身很簡單，只是為了測試用。看到這里你可以試著猜一下alert的結果。

算了，不考大家了，直接貼出來吧，有圖有真相！

相信不用我過多的解釋哪個是ie，哪個是谷歌了吧。

兩者的區別很明顯，谷歌里面得到“aaa”，而ie里面得到空字符串。這是為什么呢？

其實如果你用值類型和引用類型的區別來解釋這個差別你就不難理解了，在谷歌瀏覽器里面，$tr變量是一個引用類型，當你清空了它里面的內容，只是清除了$tr這個變量的“指針”，或者叫指向，$tds變量仍然指向了$tr的原始內容，所以調用$tds.eq(0).html()的時候仍然能得到結果aaa；同樣的代碼在ie瀏覽器里面，$tr變量就是一個值類型，你清空了它里面的內容之后，$tds的內容也被清空了。如果你有更好的解釋，歡迎賜教哈。

之所以組件原生的js不能兼容ie瀏覽器，就是因為它使用了clone()這個方法，導致在不同的瀏覽器看到不同的結果。相信bootstrapTable組件的作者應該是知道這個區別的，只不過沒有太在意這些，從作者做的很多功能的兼容性能夠看出，他做的功能很多沒有太多的考慮ie瀏覽器的效果。

回到頂部

二、效果預覽

還是老規矩，說了這個多，沒圖怎么行，小二，上圖！

沒有固定高度的情況：單列凍結。

?

多列凍結。

?固定任意高度效果?

?

ie瀏覽器也沒有問題，這里就不再重復上圖了。

回到頂部

三、源碼解析

源碼沒啥說的，有興趣可以自己看看，主要的原理還是重寫bootstrapTable構造器的事件，來達到想要的效果。

?bootstrap-table-fixed-columns.js ?bootstrap-table-fixed-columns.css

如何使用呢？這里博主單獨搞了一個靜態的html測試頁，還是貼出來供大家參考。

?bootstrapTableFixColumns.html

?代碼釋疑：

回到頂部

1、源碼各個方法解釋

• BootstrapTable.prototype.initFixedColumns ：當初始化的時候配置了fixedColumns: true時需要執行的凍結列的方法。
• BootstrapTable.prototype.initHeader：重寫組件的的初始化表頭的方法，加入凍結的表頭。
• BootstrapTable.prototype.initBody：重寫組件的初始化表內容的方法，加入凍結的表內容。
• ?BootstrapTable.prototype.resetView：重寫“父類”的resetView方法，通過setTimeout去設置凍結的表頭和表體的寬度和高度。
• BootstrapTable.prototype.fitHeaderColumns：設置凍結列的表頭的寬高。
• BootstrapTable.prototype.fitBodyColumns ：設置凍結列的表體的寬高，以及滾動條和主體表格的滾動條同步。

回到頂部

?2、對于上述拋出的ie和谷歌的兼容性問題的解析

查看BootstrapTable.prototype.initBody方法，你會發現里面寫有部分注釋。

this.$body.find('> tr[data-index]').each(function () {var $tr = $(this).clone(),$tds = $tr.find('td');//$tr.html('');這樣存在一個兼容性問題，在IE瀏覽器里面，清空tr,$tds的值也會被清空。//$tr.html('');var $newtr = $('<tr></tr>');$newtr.attr('data-index', $tr.attr('data-index'));$newtr.attr('data-uniqueid', $tr.attr('data-uniqueid'));var end = that.options.fixedNumber;if (rowspan > 0) {--end;--rowspan;}for (var i = 0; i < end; i++) {$newtr.append($tds.eq(i).clone());}that.$fixedBodyColumns.append($newtr);if ($tds.eq(0).attr('rowspan')) {rowspan = $tds.eq(0).attr('rowspan') - 1;}});

這一段做了部分修改，有興趣可以調適細看。

回到頂部

3、項目中的使用

?最近在研究學習abp的相關源碼，將bootstrapTable融入abp里面去了，貼出表格凍結的一些效果圖。

?

回到頂部

4、擴展

除此之外，還特意做了右邊操作列的凍結。

和左邊列的凍結一樣，最右邊列的凍結也是可以做的，最不同的地方莫過于右邊列有一些操作按鈕，如果在點擊凍結列上面的按鈕時觸發實際表格的按鈕事件是難點。如果有這個需求，可以看看。

?bootstrap-table-fixed-columns.js ?bootstrap-table-fixed-columns.css

需要說明的是，由于時間問題，右側固定列的代碼和上述解決高度的代碼并未合并，所以如果你既想要解決凍結列的高度，又想要右側列的凍結，需要自己花點時間合并下代碼。

回到頂部

四、總結

至此本文就結束了，關于凍結列的課題終于可以暫時告一段落了，這個問題博主糾結了很久，總算是解決了。如果你覺得本文能夠幫助你，可以右邊隨意?打賞?博主，打賞后可以獲得博主永久免費的技術支持。

轉載于:https://www.cnblogs.com/libin-1/p/7100778.html

總結

以上是生活随笔為你收集整理的JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。