BootStrap table表格插件自適應固定表頭(超好用)

2019-11-20 09:09:56

字體：大中小

來源：轉載

供稿：網友

首先是簡單的頁面形式，大家可以按照平常畫表格的方式來創建html表格，然后通過js控制特殊的樣式等操作（優點是表格更加直觀，方便調整表格樣式等，速度快）

當然，也可以只在頁面上放一個table標簽，之后的所有數據和樣式都通過js控制也是可以的，后面會說（優點方便控制修改數據，尤其是ajax方式獲取的json格式，但是調整樣式比較麻煩）

ps：這個是插件的官網，里面有英文api和例子：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

還有，使用前請引入bootstrap的相關css，js，jQuery，以及bootstrap-table的css，js至少這5個基本文件

一，html表格方式

例一：需求，簡單的表格數據呈現，表頭是兩行，還有一個上下浮的箭頭

分析：很簡單，只需要html就可以實現，按照常規的表格來畫，添加上bootstrap-table獨有的自定義屬性即可，注意如果不使用js請在最開始的table標簽中加上data-toggle

html代碼：

<div><table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover" id="tableL01"><thead><tr><th data-field="lhc" data-rowspan="2" data-align="center" data-valign="middle">來耗存</th><th data-field="dr" data-colspan="3" data-align="center" data-valign="middle">當日</th><th data-field="bz" data-colspan="3" data-align="center" data-valign="middle">本周</th><th data-field="by" data-colspan="3" data-align="center" data-valign="middle">本月</th></tr><tr><th data-field="drbq" data-align="center" data-valign="middle">本期</th><th data-field="drtb" data-align="center" data-valign="middle">同比</th><th data-field="drhb" data-align="center" data-valign="middle">環比</th><th data-field="bzbq" data-align="center" data-valign="middle">本期</th><th data-field="bztb" data-align="center" data-valign="middle">同比</th><th data-field="bzhb" data-align="center" data-valign="middle">環比</th><th data-field="bybq" data-align="center" data-valign="middle">本期</th><th data-field="bytb" data-align="center" data-valign="middle">同比</th><th data-field="byhb" data-align="center" data-valign="middle">環比</th></tr></thead><tbody><tr><td>來煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>來煤量</td><td>76573</td><td><i class='glyphicon glyphicon-arrow-down'></i>4.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>1.45</td><td>234534</td><td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.75</td><td>44225</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.74</td><td><i class='glyphicon glyphicon-arrow-up'></i>3.45</td></tr><tr><td>耗煤量</td><td>43363</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>32422</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>13345</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>來煤量</td><td>34624</td><td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td><td><i class='glyphicon glyphicon-arrow-up'></i>1.23</td><td>452346</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.32</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.05</td><td>94524</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr></tbody></table></div>

例二：需求，第二個表格后面有個顯示進度的自定義單元格，并且第一行要求是做一個合計的統計展示，這兩個功能需要用js來設定自定義行列

html代碼：

<div><table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover" id="tableL02"><thead><tr><th data-field="id" data-align="center" data-valign="middle">序號</th><th data-field="gys" data-align="center" data-valign="middle">供應商</th><th data-field="pz" data-align="center" data-valign="middle">品種</th><th data-field="rz" data-align="center" data-valign="middle">熱值</th><th data-field="mj" data-align="center" data-valign="middle">煤價</th><th data-field="bmdj" data-align="center" data-valign="middle">標煤單價</th><th data-field="drlm" data-align="center" data-valign="middle">當日來煤</th><th data-field="ljlm" data-align="center" data-valign="middle">累計來煤</th><th data-field="yjhl" data-align="center" data-valign="middle">月計劃量</th><th data-field="yjhjd" data-align="center" data-valign="middle" data-formatter="progress">月計劃完成進度</th></tr></thead><tbody><tr><td>2</td><td>雙欣礦業</td><td>低硫煤</td><td></td><td></td><td></td><td></td><td>6686.08</td><td>30000</td><td>22%</td></tr><tr><td>3</td><td>伊泰股份</td><td>工程煤</td><td></td><td></td><td></td><td></td><td>51888.72</td><td>70000</td><td>74%</td></tr><tr><td>4</td><td>嘉遠公司</td><td>中高硫煤</td><td></td><td></td><td></td><td></td><td>20041.86</td><td>90000</td><td>100%</td></tr><tr><td>5</td><td>愛地能源</td><td>低硫煤</td><td></td><td></td><td></td><td></td><td>5191.08</td><td>30000</td><td>0%</td></tr><tr><td>6</td><td>恒泰煤炭</td><td>中高硫煤</td><td></td><td></td><td></td><td></td><td>18265.56</td><td>0</td><td>22%</td></tr><tr><td>7</td><td>雙欣礦業</td><td>低硫煤</td><td></td><td></td><td></td><td></td><td>6686.08</td><td>30000</td><td>22%</td></tr><tr><td>8</td><td>雙欣礦業</td><td>低硫煤</td><td></td><td></td><td></td><td></td><td>6686.08</td><td>30000</td><td>22%</td></tr><tr><td>9</td><td>雙欣礦業</td><td>低硫煤</td><td></td><td></td><td></td><td></td><td>6686.08</td><td>30000</td><td>22%</td></tr></tbody></table></div>

js代碼：

//聲明用來統計合計（累計來煤，月計劃）的變量var yjhArr=[];var ljlmArr=[];//顯示進度條的自定義列function progress (value,row){var width=parseInt(row.yjhjd);var red='#e63737';var blue='#b6ccf4';yjhArr.push(row.yjhl);ljlmArr.push(row.ljlm);return "<div style='height:20px;border:1px solid #b6ccf4;'><span style='display:block;float:left;width:"+width+"%;height:100%;background-color:"+<br>　　　　　　　　　　(width>=100?red:blue)+";'>"+value+"</span></div>"}//計算合計數值的方法function yjhTotal(){var subyjh=0;var subljlm=0;var row=[];for(var i=0;i<yjhArr.length;i++){if(yjhArr[i]==""){yjhArr[i]=0;}subyjh+=parseFloat(yjhArr[i]);}for(var j=0;j<ljlmArr.length;j++){if(ljlmArr[j]==""){ljlmArr[j]=0;}subljlm+=parseFloat(ljlmArr[j]);}row.push({id:1,gys:'合計',pz:'',rz:'',mj:'',bmdj:'',drlm:'',ljlm:subljlm.toFixed(2),yjhl:subyjh,yjhjd:'107%'});return row}

分析：自定義行列需要添加data-formatter=‘方法名'，其中progress（）方法中的參數row，會在表格生成行的時候每生成一行就執行一次并將該行的對象傳進來。

二：js方式

通過這種方法，可以很方便的為表格設置參數，處理數據方面十分便捷，尤其是設置請求方式和地址時，不過這個項目暫時只是靜態頁面，有關數據的以后接觸在寫上來

例一：同上例一

html：

<div><table class="table table-striped table-bordered table-hover" id="tableL01"></table></div>

js：

//表格插件(表一)開始$('#tableL01').bootstrapTable({height:268,//模擬數據columns: [[{align:'center',valign:'middle',field: 'lhc',title: '來耗存',rowspan:2}, {align:'center',valign:'middle',field: 'dr',title: '當日',colspan:3}, {align:'center',valign:'middle',field: 'bz',title: '本周',colspan:3},{align:'center',valign:'middle',field: 'by',title: '本月',colspan:3}],[{align:'center',valign:'middle',field: 'drbq',title: '本期'}, {align:'center',valign:'middle',field: 'drtb',title: '同比',formatter:trend},{align:'center',valign:'middle',field: 'drhb',title: '環比',formatter:trend}, {align:'center',valign:'middle',field: 'bzbq',title: '本期'}, {align:'center',valign:'middle',field: 'bztb',title: '同比',formatter:trend},{align:'center',valign:'middle',field: 'bzhb',title: '環比',formatter:trend}, {align:'center',valign:'middle',field: 'bybq',title: '本期'}, {align:'center',valign:'middle',field: 'bytb',title: '同比',formatter:trend},{align:'center',valign:'middle',field: 'byhb',title: '環比',formatter:trend}]],data:[{id:1,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:2,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:3,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:4,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:5,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:6,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:7,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:8,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:9,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:10,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:11,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:12,lhc:'來存量',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'}]});//模擬數據結束//上下浮動箭頭樣式添加function trend(value,row){var trendIcon=row.id%2===0?'glyphicon glyphicon-arrow-down':'glyphicon glyphicon-arrow-up';return "<i class='"+trendIcon+"'></ i>"+value}//表格插件一結束

分析：$('#tableL01').bootstrapTable（{}）是插件開始的標志，在其中添加表格的參數，然后在data：是表格的數據，而columns中則是設置列參數以及表格數據的地方，其中這個項目有代表性的是表頭分為兩部分，因此需要在columns中加兩個數組【{}】，【{}】。之前都寫在一個數組里，而源代碼遍歷的是columns的length

例二：

html相同都是只需要一個帶id的table標簽即可

js：

//表格插件(表二)開始//聲明用來統計合計（累計來煤，月計劃）的變量var yjhArr=[];var ljlmArr=[];$('#tableL02').bootstrapTable({height:268,//模擬數據columns: [{align:'center',valign:'middle',field: 'id',title: '序號'}, {align:'center',valign:'middle',field: 'gys',title: '供應商'}, {align:'center',valign:'middle',field: 'pz',title: '品種'},{align:'center',valign:'middle',field: 'rz',title: '熱值'},{align:'center',valign:'middle',field: 'mj',title: '煤價'},{align:'center',valign:'middle',field: 'bmdj',title: '標煤單價'},{align:'center',valign:'middle',field: 'drlm',title: '當日來煤'},{align:'center',valign:'middle',field: 'ljlm',title: '累計來煤'},{align:'center',valign:'middle',field: 'yjhl',title: '月計劃量'},{align:'center',valign:'middle',field: 'yjhjd',title: '月計劃完成進度',formatter:progress}],data:[{id:2,gys:'雙欣礦業',pz:'低硫煤',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'6686.08',yjhl:'30000',yjhjd:'22%'},{id:3,gys:'伊泰股份',pz:'工程煤',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'51888.72',yjhl:'70000',yjhjd:'74%'},{id:4,gys:'嘉遠公司',pz:'中高硫煤',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'20041.86',yjhl:'90000',yjhjd:'100%'},{id:5,gys:'愛地能源',pz:'低硫煤',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'5191.08',yjhl:'',yjhjd:'0%'},{id:6,gys:'恒泰煤炭',pz:'中高硫煤',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'18265.56',yjhl:'',yjhjd:'0%'},{id:6,gys:'恒泰煤炭',pz:'中高硫煤',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'18265.56',yjhl:'',yjhjd:'0%'},{id:6,gys:'恒泰煤炭',pz:'中高硫煤',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'18265.56',yjhl:'',yjhjd:'0%'}]});//模擬數據結束//顯示進度條的自定義列function progress (value,row){var width=parseInt(row.yjhjd);var red='#e63737';var blue='#b6ccf4';yjhArr.push(row.yjhl);ljlmArr.push(row.ljlm);return "<div style='height:20px;border:1px solid #b6ccf4;'><span style='display:block;float:left;width:"+width+"%;height:100%;background-color:"+(width>=100?red:blue)+";'>"+value+"</span></div>"}//計算合計數值的方法function yjhTotal(){var subyjh=0;var subljlm=0;var row=[];for(var i=0;i<yjhArr.length;i++){if(yjhArr[i]==""){yjhArr[i]=0;}subyjh+=parseFloat(yjhArr[i]);}for(var j=0;j<ljlmArr.length;j++){if(ljlmArr[j]==""){ljlmArr[j]=0;}subljlm+=parseFloat(ljlmArr[j]);}row.push({id:1,gys:'合計',pz:'',rz:'',mj:'',bmdj:'',drlm:'',ljlm:subljlm,yjhl:subyjh,yjhjd:'107%'});return row}

這個其實和第一種方式差別不大，只不過把自定義列放在數據中設置罷了。比較好理解。而關于其他參數可以參考官網，數據是動態的如何添加網上也有不少例子，只要都放在.bootstrapTable（{}）中就可以了

以上所述是小編給大家介紹的BootStrap table表格插件自適應固定表頭(超好用)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！

上一篇：用JS中split方法實現彩色文字背景效果實例

下一篇：BootStrap的table表頭固定tbody滾動的實例代碼