bootstrap table复杂操作代码

前端之家收集整理的这篇文章主要介绍了bootstrap table复杂操作代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了bootstrap table复杂操作,如何

生成外层表格

,如何

填充表格内容

供大家参考,具体内容如下

1、先生成外层表格:

},{ title: '讲义',colspan: 3,align: 'center' },{ title: '视频',{ title: '总完成情况',align: 'center' }

],[
{
field: 'handoutCount',title: '讲义总数',sortable: true,{
field: 'handoutComCount',title: '完成数',align: 'center'

},{
field: 'handoutCountDegree',title: '完成率',align: 'center'


},{
field: 'videoCount',title: '视频总数',{
field: 'videoComCount',{
field: 'videoCountDegree',{
field: 'allCount',title: '总数',{
field: 'allComCount',title: '总完成数',{
field: 'allDegree',title: '总完成率',align: 'center'


}

]

]

});

2、生成展开之后的表格内容

'); html.push('
'); html.push('
'); handoutColums.push({ field: 'handoutIndex',title: '编号',width: 150 },{ field: 'handoutName',title: '讲义名称',{ field: 'degree',title: '完成度',width: 150 }); videoColums.push({ field: 'videoIndex',{ field: 'videoName',title: '视频名称',width: 150 }); $.each(row,function (key,value) { if(key=="handout"){ $.each(value,function(index,handout){ var row = {}; row['handoutIndex'] = index+1; row['handoutName']=handout.handoutName; row['degree']=handout.degree; handoutData.push(row);

});
}
if(key=="video"){
$.each(value,video){
var row = {};
row['videoIndex']=index+1;
row['videoName']=video.videoName;
row['degree']=video.degree;
videoData.push(row);
});
}
});

return html.join('');
}

3、填充表格内容

function initHandoutTable(colums,data,index){

$('#tableHandout'+index).bootstrapTable('destroy').bootstrapTable({
cache: false,height: 200,columns:colums,data:data
});

}

function initVideoTable(colums,index){

$('#tableVideo'+index).bootstrapTable('destroy').bootstrapTable({
cache: false,data:data
});

}

如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/bootstrap/44720.html

猜你在找的Bootstrap相关文章