bootstrap table复杂操作代码

bootstrap table复杂操作代码

本文实例为大家分享了bootstrap table复杂操作，如何生成外层表格，如何填充表格内容，供大家参考，具体内容如下

1、先生成外层表格：

$('#tableActivity').bootstrapTable('destroy').bootstrapTable({

url:'',

detailView:true,

detailFormatter:"detailFormatter",//点击展开预先执行事件

cache: false,

height: 550,

showExport: truhttp://e,

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'

}, FAFICNs{

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('

html.push('

html.push('

html.push('

html.push('

html.push('

html.push('

html.push('

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插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。