閱讀目錄

• 一、問(wèn)題追蹤
• 二、效果預(yù)覽
• 三、源碼解析
  • 1、源碼各個(gè)方法解釋
  • ?2、對(duì)于上述拋出的ie和谷歌的兼容性問(wèn)題的解析
  • 3、項(xiàng)目中的使用
  • 4、擴(kuò)展
• 四、總結(jié)

?

正文

前言：一年前，博主分享過(guò)一篇關(guān)于bootstrapTable組件凍結(jié)列的解決方案 ?JS組件系列——Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問(wèn)題解決方案?，通過(guò)該篇，確實(shí)可以實(shí)現(xiàn)bootstrapTable的凍結(jié)列效果，并且可以兼容ie瀏覽器。這一年的時(shí)間，不斷有園友以及群里面的朋友問(wèn)過(guò)我關(guān)于固定高度之后，凍結(jié)列頁(yè)面效果不能對(duì)齊的問(wèn)題，奈何博主太忙，一直沒(méi)有抽空將這個(gè)問(wèn)題優(yōu)化。最近項(xiàng)目里面也不斷有人提過(guò)這個(gè)bug，這下子不能再推了，必須要直面“慘淡的bug”，于是昨天利用一天的時(shí)間將原來(lái)的擴(kuò)展做了一下修改，能夠完美解決固定高度之后凍結(jié)列的問(wèn)題，并且，博主還加了一些特性，比如右側(cè)列的凍結(jié)、凍結(jié)列的選中等等，有需要的朋友可以捧個(gè)場(chǎng)。相信通過(guò)此篇，老板再也不用擔(dān)心我的凍結(jié)列不能固定高度了~~

本文原創(chuàng)地址：http://www.cnblogs.com/landeanfen/p/7095414.html

回到頂部

一、問(wèn)題追蹤

記得在之前的那篇里面介紹過(guò)，bootstrapTable組件自帶的凍結(jié)列擴(kuò)展，不能兼容ie瀏覽器，即使最新版本的ie也會(huì)無(wú)法使用，這是一般的系統(tǒng)不能忍受的，所以在那篇里面給出過(guò)解決方案，但并未分析ie瀏覽器不能兼容的原因，昨天博主花了點(diǎn)時(shí)間特意調(diào)試了下源碼，原來(lái)在ie里面，使用jquery的clone()方法和谷歌等瀏覽器有所區(qū)別。為了展示這個(gè)區(qū)別，這里先拋個(gè)磚。比如有如下代碼：

<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>

代碼本身很簡(jiǎn)單，只是為了測(cè)試用?？吹竭@里你可以試著猜一下alert的結(jié)果。

算了，不考大家了，直接貼出來(lái)吧，有圖有真相！

相信不用我過(guò)多的解釋哪個(gè)是ie，哪個(gè)是谷歌了吧。

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

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

之所以組件原生的js不能兼容ie瀏覽器，就是因?yàn)樗褂昧薱lone()這個(gè)方法，導(dǎo)致在不同的瀏覽器看到不同的結(jié)果。相信bootstrapTable組件的作者應(yīng)該是知道這個(gè)區(qū)別的，只不過(guò)沒(méi)有太在意這些，從作者做的很多功能的兼容性能夠看出，他做的功能很多沒(méi)有太多的考慮ie瀏覽器的效果。

回到頂部

二、效果預(yù)覽

還是老規(guī)矩，說(shuō)了這個(gè)多，沒(méi)圖怎么行，小二，上圖！

沒(méi)有固定高度的情況：單列凍結(jié)。

?

多列凍結(jié)。

?固定任意高度效果?

?

ie瀏覽器也沒(méi)有問(wèn)題，這里就不再重復(fù)上圖了。

回到頂部

三、源碼解析

源碼沒(méi)啥說(shuō)的，有興趣可以自己看看，主要的原理還是重寫(xiě)bootstrapTable構(gòu)造器的事件，來(lái)達(dá)到想要的效果。

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

如何使用呢？這里博主單獨(dú)搞了一個(gè)靜態(tài)的html測(cè)試頁(yè)，還是貼出來(lái)供大家參考。

?bootstrapTableFixColumns.html

?代碼釋疑：

回到頂部

1、源碼各個(gè)方法解釋

• BootstrapTable.prototype.initFixedColumns ：當(dāng)初始化的時(shí)候配置了fixedColumns: true時(shí)需要執(zhí)行的凍結(jié)列的方法。
• BootstrapTable.prototype.initHeader：重寫(xiě)組件的的初始化表頭的方法，加入凍結(jié)的表頭。
• BootstrapTable.prototype.initBody：重寫(xiě)組件的初始化表內(nèi)容的方法，加入凍結(jié)的表內(nèi)容。
• ?BootstrapTable.prototype.resetView：重寫(xiě)“父類(lèi)”的resetView方法，通過(guò)setTimeout去設(shè)置凍結(jié)的表頭和表體的寬度和高度。
• BootstrapTable.prototype.fitHeaderColumns：設(shè)置凍結(jié)列的表頭的寬高。
• BootstrapTable.prototype.fitBodyColumns ：設(shè)置凍結(jié)列的表體的寬高，以及滾動(dòng)條和主體表格的滾動(dòng)條同步。

回到頂部

?2、對(duì)于上述拋出的ie和谷歌的兼容性問(wèn)題的解析

查看BootstrapTable.prototype.initBody方法，你會(huì)發(fā)現(xiàn)里面寫(xiě)有部分注釋。

this.$body.find('> tr[data-index]').each(function () {var $tr = $(this).clone(),$tds = $tr.find('td');//$tr.html('');這樣存在一個(gè)兼容性問(wèn)題，在IE瀏覽器里面，清空tr,$tds的值也會(huì)被清空。//$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;}});

這一段做了部分修改，有興趣可以調(diào)適細(xì)看。

回到頂部

3、項(xiàng)目中的使用

?最近在研究學(xué)習(xí)abp的相關(guān)源碼，將bootstrapTable融入abp里面去了，貼出表格凍結(jié)的一些效果圖。

?

回到頂部

4、擴(kuò)展

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

和左邊列的凍結(jié)一樣，最右邊列的凍結(jié)也是可以做的，最不同的地方莫過(guò)于右邊列有一些操作按鈕，如果在點(diǎn)擊凍結(jié)列上面的按鈕時(shí)觸發(fā)實(shí)際表格的按鈕事件是難點(diǎn)。如果有這個(gè)需求，可以看看。

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

需要說(shuō)明的是，由于時(shí)間問(wèn)題，右側(cè)固定列的代碼和上述解決高度的代碼并未合并，所以如果你既想要解決凍結(jié)列的高度，又想要右側(cè)列的凍結(jié)，需要自己花點(diǎn)時(shí)間合并下代碼。

回到頂部

四、總結(jié)

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

轉(zhuǎn)載于:https://www.cnblogs.com/libin-1/p/7100778.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。