BootStrap table表格插件自适应固定表头(超好用)
农雅畅
本文向大家介绍BootStrap table表格插件自适应固定表头(超好用)，包括了BootStrap table表格插件自适应固定表头(超好用)的使用技巧和注意事项，需要的朋友参考一下
首先是简单的页面形式，大家可以按照平常画表格的方式来创建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表格插件自适应固定表头(超好用)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
类似资料：
-
我做了一个表头和列固定的表。但这里我已经指定了我不想要的头/体的宽度。我用引导类col-md-6(50%宽度）将整个表放在一个div中。但是除非我为thead和tbody硬编码样式，否则它是不起作用的。我希望thead和tbody取父div的宽度。但如果没有指定像素或百分比,则会占用屏幕的全宽。这是我的代码 null null 所有我想要的是使表的响应，而不是像静态400px或50%或类似的东西。
-
本文向大家介绍响应式表格之固定表头的简单实现，包括了响应式表格之固定表头的简单实现的使用技巧和注意事项，需要的朋友参考一下 数据展示时，表头的固定，可以有更好的可读性。 一、实现方式： 1、定义2个表格，一个absolute固定 2、表1<th>复制，并插入表2 3、resize()方法，实时获取表1各列<th>宽度 4、页面过小时，表格滚动带表头滚动 二、注意细节： 1、宽度自适应、去除单元格间
-
本文向大家介绍JS实现table表格固定表头且表头随横向滚动而滚动，包括了JS实现table表格固定表头且表头随横向滚动而滚动的使用技巧和注意事项，需要的朋友参考一下 先看一张效果图 思路： 1、头部用一个table并用一个div包裹着， 表格的具体内容用一个table 2、头部外面的div用positon: relative相对定位 3、获取整个表格的高度 4、获取表格的dom（或者包裹着表格的
-
问题内容： 许多人仍然使用表格来布局控件，数据等。-流行的jqGrid就是一个例子。但是，发生了一些我似乎无法理解的魔术（它的桌子大声喊叫，可能有多少魔术？） 如何设置表的列宽并使它像jqGrid那样遵守！？如果我尝试复制此内容，即使我设置了every ，只要这些单元格之一的内容大于20px，该单元格就会展开！ 有什么想法或见解吗？ 问题答案： 您可以尝试对所有行使用标签管理表样式，但是您需要在或
-
本文向大家介绍Vue+Element自定义纵向表格表头教程，包括了Vue+Element自定义纵向表格表头教程的使用技巧和注意事项，需要的朋友参考一下 如下所示： 代码如下： 绑定的是 statDatas 属性是一个 json数组，由key value组成的json，如果需要多列就直接增加属性就可以。 优美样式： 补充知识：vue element table表头垂直表格(新增封装一个垂直表格的组件
-
问题内容： 许多人仍然使用表格来布局控件，数据等。-流行的jqGrid就是一个例子。但是，发生了一些我似乎无法理解的魔术（它的桌子大声喊叫，可能会有多少魔术？） 如何设置表的列宽并使它像jqGrid那样遵守！？如果我尝试复制此内容，即使我设置了every ，只要这些单元格之一的内容大于20px，该单元格就会展开！ 有什么想法或见解吗？ 问题答案： 您可以尝试对所有行使用标签管理表样式，但是您需要在