之前使用bootstrap寫了一個(gè)報(bào)表表格，最近突然找到我，說(shuō)讓我看看能不能將表格的表頭和第一列進(jìn)行固定，這樣的話方便查看數(shù)據(jù)，于是，我開(kāi)始了苦逼的研究起來(lái)，畢竟我是個(gè)后端啊，對(duì)于前端的樣式問(wèn)題，特別是小功能，煩的一批
這里就記錄下我的研究成果

一：引入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" rel="external nofollow" >
<script src="./js/bootstrap.min.js" ></script>
<!-- 固定表頭所需的js和css(bootstrap-table) -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap-table.min.css" rel="external nofollow" >
<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" rel="external nofollow" >
<script src="./js/bootstrap-table-fixed-columns.js"></script>

query下載地址：http://www.dbjr.com.cn/zt/jquerydown.htm
bootstrap下載地址：http://www.bootcss.com/
bootstrap-table下載地址：https://bootstrap-table.com
bootstrap-table-fixed-columns下載地址：https://github.com/wenzhixin/bootstrap-table-fixed-columns

這里注意：

引入jquery時(shí)，不要引入jquery2.0.0(包括2.0.0)版本以下，如果你引入了2.0.0版本以下的jquery的話，當(dāng)你編寫完代碼之后，在控制臺(tái)會(huì)出現(xiàn)如下錯(cuò)誤：

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

<table class="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標(biāo)簽中的data-toggle="table"表示的是啟用bootstrap表格，data-height="200"表示設(shè)置表格的高度，用于配置固定表頭。由于我這里編寫的表格數(shù)據(jù)較少，所以展示出來(lái)的數(shù)據(jù)可能不會(huì)出現(xiàn)滑輪，看不出來(lái)固定表頭現(xiàn)象，你可以向表格中添加多一點(diǎn)數(shù)據(jù)就可以了

三：固定列

<script>
$(function(){
 //#table表示的是上面table表格中的id
 $("#table").bootstrapTable('destroy').bootstrapTable({
  fixedColumns: true, 
  fixedNumber: 1 //固定列數(shù)
 });
})
</script>

四：當(dāng)瀏覽器窗口變化時(shí)，表頭與表格不對(duì)齊解決：

<script>
$(function(){
$('#table').bootstrapTable();
 $(window).resize(function () {
  $('#table').bootstrapTable('resetView');
 });
})
</script>

五：初次展示時(shí)表頭和表格數(shù)據(jù)不對(duì)齊解決(個(gè)人使用的方法，方法有點(diǎn)傻)

進(jìn)過(guò)上面的過(guò)程我們已經(jīng)實(shí)現(xiàn)了表格的表格和列固定功能了，于是我便開(kāi)始將報(bào)表修改起來(lái)，開(kāi)始修改起來(lái)十分的輕松，沒(méi)有問(wèn)題，但是，當(dāng)我修改到一個(gè)報(bào)表的時(shí)候發(fā)現(xiàn)，開(kāi)始的時(shí)候，表頭和數(shù)據(jù)之間就發(fā)生了不對(duì)齊現(xiàn)象：

于是我開(kāi)始在網(wǎng)上搜索起來(lái)，但是網(wǎng)上搜索的答案根本解決不了，例如：

找到bootstrap-table的源碼中

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

不知道寫這個(gè)的兄弟有沒(méi)有自己測(cè)試過(guò)，反正我注釋了之后，確實(shí)表頭和數(shù)據(jù)對(duì)齊了，但是表頭固定功能消失了，表頭和數(shù)據(jù)不對(duì)齊的原因就是因?yàn)槟阍O(shè)置了固定表頭影響的，你這樣將表頭固定功能去掉了，那么我直接將table標(biāo)簽中的data-height="200"去掉不久行了嗎，為什么還要改源碼呢？

于是我自己開(kāi)始研究起來(lái)

最后我使用審查元素找到錯(cuò)位的表頭位置，發(fā)現(xiàn)這樣一段代碼

<div class="fht-cell" style="width: 146px;"></div>

這里將寬度設(shè)置為了146但是我的數(shù)據(jù)寬度只有120,這才造成了錯(cuò)位，

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

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

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

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

然后打開(kāi)觀看，錯(cuò)誤問(wèn)題解決了?。?！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論