本文主要包含bootstrap table,bootstrap table样式,bootstraptable api,bootstrap table插件,bootstrap table 分页等相关知识,minsgo 希望在学习及工作中可以帮助到您
本文实例为大家分享了bootstrap table复杂操作，如何生成外层表格，如何填充表格内容，供大家参考，具体内容如下
1、先生成外层表格：
$('#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',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true
}, {
title: '讲义',
colspan: 3,
align: 'center'
}, {
title: '视频',
colspan: 3,
align: 'center'
}, {
title: '总完成情况',
colspan: 3,
align: 'center'
}
],
[
{
field: 'handoutCount',
title: '讲义总数',
sortable: true,
align: 'center'
}, {
field: 'handoutComCount',
title: '完成数',
sortable: true,
align: 'center'
}, {
field: 'handoutCountDegree',
title: '完成率',
sortable: true,
align: 'center'
}, {
field: 'videoCount',
title: '视频总数',
sortable: true,
align: 'center'
}, {
field: 'videoComCount',
title: '完成数',
sortable: true,
align: 'center'
}, {
field: 'videoCountDegree',
title: '完成率',
sortable: true,
align: 'center'
}, {
field: 'allCount',
title: '总数',
sortable: true,
align: 'center'
}, {
field: 'allComCount',
title: '总完成数',
sortable: true,
align: 'center'
}, {
field: 'allDegree',
title: '总完成率',
sortable: true,
align: 'center'
}
]
]
});
</div>
2、生成展开之后的表格内容：
function detailFormatter(index, row) {
handoutColums=[];
handoutData=[];
videoColums=[];
videoData=[];
var html = [];
html.push('<div class="row">');
html.push('<div class="col-md-6">');
html.push('<table id="tableHandout'+index+'"></table>');
html.push('</div>');
html.push('<div class="col-md-6">');
html.push('<table id="tableVideo'+index+'"></table>');
html.push('</div>');
html.push('</div>');
handoutColums.push({
field: 'handoutIndex',title: '编号', sortable: true ,width: 150
},{
field: 'handoutName',title: '讲义名称', sortable: true ,width: 150
},{
field: 'degree',title: '完成度', sortable: true ,width: 150
});
videoColums.push({
field: 'videoIndex',title: '编号', sortable: true ,width: 150
},{
field: 'videoName',title: '视频名称', sortable: true ,width: 150
},{
field: 'degree',title: '完成度', sortable: true ,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,function(index,video){
var row = {};
row['videoIndex']=index+1;
row['videoName']=video.videoName;
row['degree']=video.degree;
videoData.push(row);
});
}
});
return html.join('');
}
</div>
3、填充表格内容：
$('#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,
clickToSelect: true,
idField:'',
columns:colums,
data:data
});
}
function initVideoTable(colums,data,index){
$('#tableVideo'+index).bootstrapTable('destroy').bootstrapTable({
cache: false,
height: 200,
clickToSelect: true,
idField:'',
columns:colums,
data:data
});
}
</div>
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程 Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
</div>