bootstrap-table實現表頭固定以及列固定

B0B0 發布于2019-08-23 15:42 / 2812人閱讀

摘要：之前使用寫了一個報表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進行固定，這樣的話方便查看數據，于是，我開始了苦逼的研究起來，畢竟我是個后端啊，對于前端的樣式問題，特別是小功能，煩的一批這里就記錄下我的研究成果一引入和引入

之前使用bootstrap寫了一個報表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進行固定，這樣的話方便查看數據，于是，我開始了苦逼的研究起來，畢竟我是個后端啊，對于前端的樣式問題，特別是小功能，煩的一批
這里就記錄下我的研究成果
一：引入js和css

query下載地址：http://www.jq22.com/jquery-in...
bootstrap下載地址：http://www.bootcss.com/
bootstrap-table下載地址：https://bootstrap-table.com/
bootstrap-table-fixed-columns下載地址：https://github.com/wenzhixin/...
這里注意：
引入jquery時，不要引入jquery2.0.0(包括2.0.0)版本以下，如果你引入了2.0.0版本以下的jquery的話，當你編寫完代碼之后，在控制臺會出現如下錯誤：

二：編寫table表格(固定表頭)

表頭一	表頭二	表頭三	表頭四
1	2	3	4
1	2	3	4

上面代碼中的table標簽中的
data-toggle="table"表示的是啟用bootstrap表格，
data-height="200"表示設置表格的高度，用于配置固定表頭
由于我這里編寫的表格數據較少，所以展示出來的數據可能不會出現滑輪，看不出來固定表頭現象，你可以向表格中添加多一點數據就可以了
三：固定列

四：當瀏覽器窗口變化時，表頭與表格不對齊解決：

五：初次展示時表頭和表格數據不對齊解決(個人使用的方法，方法有點傻)
進過上面的過程我們已經實現了表格的表格和列固定功能了，于是我便開始將報表修改起來，開始修改起來十分的輕松，沒有問題，但是，當我修改到一個報表的時候發現，開始的時候，表頭和數據之間就發生了不對齊現象：

于是我開始在網上搜索起來，但是網上搜索的答案根本解決不了，例如：

找到bootstrap-table的源碼中

if (this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
            //注釋掉下面兩行 取消表頭初始化解決表頭和內容不對齊問題
            //this.resetHeader();
            //padding += this.$header.outerHeight();
}

不知道寫這個的兄弟有沒有自己測試過，反正我注釋了之后，確實表頭和數據對齊了，但是表頭固定功能消失了，表頭和數據不對齊的原因就是因為你設置了固定表頭影響的，你這樣將表頭固定功能去掉了，那么我直接將table標簽中的data-height="200"去掉不久行了嗎，為什么還要改源碼呢？

于是我自己開始研究起來

最后我使用審查元素找到錯位的表頭位置，發現這樣一段代碼

這里將寬度設置為了146但是我的數據寬度只有120,這才造成了錯位，

然后我找到bootstrap-table源碼設置div的class為fht-cell寬度的代碼位置

雖然我找到了問題所在，但是源碼哪里出問題了，我還是不清楚，有知道的伙伴，歡迎告訴我答案

既然我不知道源碼出問題出在哪，那么我就使用十分傻的方法，直接設置class為fht-cell的寬度，將之前寬度為146的覆蓋

.fht-cell{width:120px!important;}

然后打開觀看，錯誤問題解決了！！！

云服務器 GPU云服務器固定表頭表格固定表頭固定表頭html asp 表頭固定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102459.html

jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

soasme 2019-08-02 16:07 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

everfly 2019-08-23 14:05 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

張巨偉 2019-08-30 15:54 評論0 收藏0
今天，你的瀏覽器 “滾動” 了嗎？

摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。今天，你的瀏覽器滾動了嗎？序在 Web 頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經常...

leo108 2019-08-21 11:51 評論0 收藏0