bootstrap-table實現表頭固定以及列固定
之前使用bootstrap寫了一個報表表格,最近突然找到我,說讓我看看能不能將表格的表頭和第一列進行固定,這樣的話方便檢視資料,於是,我開始了苦逼的研究起來,畢竟我是個後端啊,對於前端的樣式問題,特別是小功能,煩的一批
這裡就記錄下我的研究成果
一:引入js和css
<!-- 引入jquery --> <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script> <!-- 引入bootstrap的js和css檔案 --> <link rel="stylesheet" href="./css/bootstrap.min.css" > <script src="./js/bootstrap.min.js" ></script> <!-- 固定表頭所需的js和css(bootstrap-table) --> <link rel="stylesheet" type="text/css" href="./css/bootstrap-table.min.css"> <script src="./js/bootstrap-table.min.js"></script> <!-- 固定列所需的js和css(bootstrap-table-fixed-columns) --> <link rel="stylesheet" type="text/css" href="./css/bootstrap-table-fixed-columns.css"> <script src="./js/bootstrap-table-fixed-columns.js"></script>
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表格(固定表頭)
<tableclass="table table-bordered" id="table" data-toggle="table" data-height="200"> <thead> <tr> <th>表頭一</th> <th>表頭二</th> <th>表頭三</th> <th>表頭四</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table>
上面程式碼中的table標籤中的
data-toggle="table"表示的是啟用bootstrap表格,
data-height="200"表示設定表格的高度,用於配置固定表頭
由於我這裡編寫的表格資料較少,所以展示出來的資料可能不會出現滑輪,看不出來固定表頭現象,你可以向表格中新增多一點資料就可以了
三:固定列
<script> $(function(){ //#table表示的是上面table表格中的id $("#table").bootstrapTable('destroy').bootstrapTable({ fixedColumns: true, fixedNumber: 1 //固定列數 }); }) </script>
四:當瀏覽器視窗變化時,表頭與表格不對齊解決:
<script> $(function(){ $('#table').bootstrapTable(); $(window).resize(function () { $('#table').bootstrapTable('resetView'); }); }) </script>
五:初次展示時表頭和表格資料不對齊解決(個人使用的方法,方法有點傻)
進過上面的過程我們已經實現了表格的表格和列固定功能了,於是我便開始將報表修改起來,開始修改起來十分的輕鬆,沒有問題,但是,當我修改到一個報表的時候發現,開始的時候,表頭和資料之間就發生了不對齊現象:
於是我開始在網上搜索起來,但是網上搜索的答案根本解決不了,例如:
找到bootstrap-table的原始碼中
if (this.options.showHeader && this.options.height) { this.$tableHeader.show(); //註釋掉下面兩行 取消表頭初始化解決表頭和內容不對齊問題 //this.resetHeader(); //padding += this.$header.outerHeight(); }
不知道寫這個的兄弟有沒有自己測試過,反正我註釋了之後,確實表頭和資料對齊了,但是表頭固定功能消失了,表頭和資料不對齊的原因就是因為你設定了固定表頭影響的,你這樣將表頭固定功能去掉了,那麼我直接將table標籤中的data-height="200"去掉不久行了嗎,為什麼還要改原始碼呢?
於是我自己開始研究起來
最後我使用審查元素找到錯位的表頭位置,發現這樣一段程式碼
<div class="fht-cell" style="width: 146px;"></div>
這裡將寬度設定為了146但是我的資料寬度只有120,這才造成了錯位,
然後我找到bootstrap-table原始碼設定div的class為fht-cell寬度的程式碼位置
雖然我找到了問題所在,但是原始碼哪裡出問題了,我還是不清楚,有知道的夥伴,歡迎告訴我答案
既然我不知道原始碼出問題出在哪,那麼我就使用十分傻的方法,直接設定class為fht-cell的寬度,將之前寬度為146的覆蓋
.fht-cell{width:120px!important;}
然後開啟觀看,錯誤問題解決了!!!