本文实例为大家分享了bootstrap table复杂操作，如何
生成外层表格
，如何填充表格内容，
供大家参考，具体内容如下1、先生成外层表格：
rush:js;">
$('#tableActivity').bootstrapTable('destroy').bootstrapTable({
url:'',detailView:true,detailFormatter:"detailFormatter",//点击展开预先执行事件
cache: false,height: 550,showExport: true,exportDataType: "all",pagination: true,pageSize: 10,Pagelist: [10,25,50,100],search: true,searchAlign:'left',showRefresh: true,showToggle: true,showColumns: true,toolbaralign: 'right',toolbar:"#toolbar",buttonsAlign:'left',clickToSelect: true,idField:'',columns: [
[
{
title:'编号',field: 'index',rowspan: 2,align: 'center',valign: 'middle'
},{
title: '姓名',field: 'userName',valign: 'middle',sortable: true
},{
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、生成展开之后的表格内容：
rush:js;">
function detailFormatter(index,row) {
handoutColums=[];
handoutData=[];
videoColums=[];
videoData=[];
var html = [];
html.push('
');
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、填充表格内容：
rush:js;">
$('#tableActivity').on('expand-row.bs.table',function (e,index,row,$detail) {
initHandoutTable(handoutColums,handoutData,index);
initVideoTable(videoColums,videoData,index);
});
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
});
}
如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：
