bootstrapt表格⾃适应_好⽤的⾃适应表格插件-
bootstraptable(⽀持固定表头)
最近⼯作中到了⼀款⼗分好⽤的表格插件,不但⽀持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他⾃带的冻结表头功能,让开发制作表格⼗分容易,不过⽹上⼤多都是英⽂⽂档,第⼀次使⽤会⽐较⿇烦,因此在此记录⼀些简单的使⽤⽅式,⽅便扩展学习
⾸先是简单的页⾯形式,⼤家可以按照平常画表格的⽅式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,⽅便调整表格样式等,速度快)
当然,也可以只在页⾯上放⼀个table标签,之后的所有数据和样式都通过js控制也是可以的,后⾯会说(优点⽅便控制修改数据,尤其是ajax⽅式获取的json格式,但是调整样式⽐较⿇烦)
还有,使⽤前请引⼊bootstrap的相关css,js,jQuery,以及bootstrap-table的css,js⾄少这5个基本⽂件
⼀,html表格⽅式
例⼀:需求,简单的表格数据呈现,表头是两⾏,还有⼀个上下浮的箭头
分析:很简单,只需要html就可以实现,按照常规的表格来画,添加上bootstrap-table独有的⾃定义属性即可,注意如果不使⽤js请在最开始的table标签中加上data-toggle
html代码:
来耗存当⽇本周本⽉本期同⽐环⽐本期同⽐环⽐本期同⽐环⽐
来煤量21341 0.31 0.21334322 1.13 4.213125113 2.21 2.94来煤量76573 4.21 1.45234534 4.35 2.7544225 0.74 3.45耗煤量43363 0.31 0.2132422 1.13 4.2113345 2.21 2.94来煤量34624 4.35 1.23452346 2.32 0.0594524 2.21 2.94耗煤量21341 0.31 0.21334322 1.13 4.213125113 2.21 2.94耗煤量21341 0.31 0.21334322 1.13 4.213125113 2.21 2.94耗煤量21341 0.31 0.21334322 1.13 4.213125113 2.21 2.94耗煤量21341 0.31 0.21334322 1.13 4.213125113 2.21 2.94耗煤量21341 0.31 0.21334322 1.13 4.213125113 2.21 2.94耗煤量21341 0.31 0.21334322 1.13 4.213125113 2.21 2.94
例⼆:需求,第⼆个表格后⾯有个显⽰进度的⾃定义单元格,并且第⼀⾏要求是做⼀个合计的统计展⽰,这两个功能需要⽤js来设定⾃定义⾏列
html代码:
序号供应商品种热值煤价标煤单价当⽇来煤累计来煤⽉计划量⽉计划完成进度
2双欣矿业低硫煤6686.083000022%3伊泰股份⼯程煤51888.727000074%4嘉远公司中⾼硫煤20041.8690000100%5爱地能源低硫煤5191.08300000%6恒泰煤炭中⾼硫煤18265.56022%7双欣矿业低硫煤6686.083000022%8双欣矿业低硫煤
6686.083000022%9双欣矿业低硫煤6686.083000022%
js代码:
//声明⽤来统计合计(累计来煤,⽉计划)的变量
var yjhArr=[];
var ljlmArr=[];
//显⽰进度条的⾃定义列
function progress (value,row){
var width=parseInt(row.yjhjd);
var red='#e63737';
ljlmArr.push(row.ljlm);
return "
"+value+"
"
}
//计算合计数值的⽅法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i
if(yjhArr[i]==""){
yjhArr[i]=0;
}
subyjh+=parseFloat(yjhArr[i]); }
for(var j=0;j
if(ljlmArr[j]==""){
ljlmArr[j]=0;
}
subljlm+=parseFloat(ljlmArr[j]); }
row.push({
id:1,
gys:'合计',
pz:'',
rz:'',
mj:'',
bmdj:'',
drlm:'',
Fixed(2),
yjhl:subyjh,
yjhjd:'107%'
}
分析:⾃定义⾏列需要添加data-formatter=‘⽅法名’,其中progress()⽅法中的参数row,会在表格⽣成⾏的时候每⽣成⼀⾏就执⾏⼀次并将该⾏的对象传进来。
⼆:js⽅式
通过这种⽅法,可以很⽅便的为表格设置参数,处理数据⽅⾯⼗分便捷,尤其是设置请求⽅式和地址时,不过这个项⽬暂时只是静态页⾯,有关数据的以后接触在写上来
例⼀:同上例⼀
html:
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',
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',
formatter:trend}, { align:'center', valign:'middle', field: 'bybq',
title: '本期'
}, {
bootstrap项目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:'来存量',
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论