bootstrap table复杂操作代码

2019-11-20 08:36:57

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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  });  }