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  });  }