bootstrap table复杂操作代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了bootstrap table复杂操作代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3440字，纯文字阅读大概需要5分钟。
内容图文
本文实例为大家分享了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'
}
]
]
});
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('');
}
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
});
}
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程 Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的bootstrap table复杂操作代码全部内容，希望文章能够帮你解决bootstrap table复杂操作代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】