好用的自適應表格插件-bootstrap table （支持固定表頭）
最近工做中找到了一款十分好用的表格插件，不但支持分頁，樣式，搜索，事件等等表格插件常有的功能外，最主要的就是他自帶的凍結表頭功能，讓開發製做表格十分容易，不過網上大多都是英文文檔，第一次使用會比較麻煩，所以在此記錄一些簡單的使用方式，方便擴展學習javascript
首先是簡單的頁面形式，你們能夠按照日常畫表格的方式來建立html表格，而後經過js控制特殊的樣式等操做（優勢是表格更加直觀，方便調整表格樣式等，速度快）css
固然，也能夠只在頁面上放一個table標籤，以後的全部數據和樣式都經過js控制也是能夠的，後面會說（優勢方便控制修改數據，尤爲是ajax方式獲取的json格式，可是調整樣式比較麻煩）html
ps：這個是插件的官網，裏面有英文api和例子：http://bootstrap-table.wenzhixin.net.cn/zh-cn/java
還有，使用前請引入bootstrap的相關css，js，jQuery，以及bootstrap-table的css，js至少這5個基本文件ajax
一，html表格方式json
例一：需求，簡單的表格數據呈現，表頭是兩行，還有一個上下浮的箭頭bootstrap
分析：很簡單，只須要html就能夠實現，按照常規的表格來畫，添加上bootstrap-table獨有的自定義屬性便可，注意若是不使用js請在最開始的table標籤中加上data-toggleapi
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:"+
(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（{}）中就能夠了
相關文章
- 1. BootStrap自適應Table表格固定左邊第一列
- 2. bootstrap-table固定表頭固定列
- 3. jquery,插件固定表格表頭
- 4. bootstrap 表格插件bootstrap-table的使用
- 5. table表頭和首列的表格固定-CSS實現的Table表頭固定
- 6. bootstrap的table表頭固定tbody滾動
- 7. element Table組件固定表頭且高度自適應
- 8. table表頭固定
- 9. 輕量級表格插件Bootstrap Table。擁有強大的支持固定表頭、單/複選、排序、分頁、搜索及自定義表頭等功能。
- 10. bootstrap 表格插件bootstrap-table的js設置高度及高度自適應
- 更多相關文章...
- • jQuery Mobile 表格 - jQuery Mobile 教程
- • Markdown 表格 - Markdown 教程
- • IntelliJ IDEA安裝代碼格式化插件
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. BootStrap自適應Table表格固定左邊第一列
- 2. bootstrap-table固定表頭固定列
- 3. jquery,插件固定表格表頭
- 4. bootstrap 表格插件bootstrap-table的使用
- 5. table表頭和首列的表格固定-CSS實現的Table表頭固定
- 6. bootstrap的table表頭固定tbody滾動
- 7. element Table組件固定表頭且高度自適應
- 8. table表頭固定
- 9. 輕量級表格插件Bootstrap Table。擁有強大的支持固定表頭、單/複選、排序、分頁、搜索及自定義表頭等功能。
- 10. bootstrap 表格插件bootstrap-table的js設置高度及高度自適應