分析：$('#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><span>"+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表格插件自适应固定表头(超好用)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: