//声明用来统计合计（累计来煤，月计划）的变量 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><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.toFixed(2), yjhl:subyjh, yjhjd:'107%' }); return row }
分析：自定义行列需要添加data-formatter=‘方法名'，其中progress（）方法中的参数row，会在表格生成行的时候每生成一行就执行一次并将该行的对象传进来。
二：js方式
通过这种方法，可以很方便的为表格设置参数，处理数据方面十分便捷，尤其是设置请求方式和地址时，不过这个项目暂时只是静态页面，有关数据的以后接触在写上来
例一：同上例一
html：
<div> <table></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></ i>"+value } //表格插件一结束