DIV CSS 佈局教程網

本文實例為大家分享了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插件使用教程

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。