bootstrap table复杂操作代码-PHP开发-php.cn

bootstrap table复杂操作代码

高洛峰

Lepaskan： 2016-12-08 11:19:34

asal

1584 orang telah melayarinya

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

1、先生成外层表格：

$(&#39;#tableActivity&#39;).bootstrapTable(&#39;destroy&#39;).bootstrapTable({
  url:&#39;&#39;,
  detailView:true,
  detailFormatter:"detailFormatter",//点击展开预先执行事件
  cache: false,
  height: 550,
  showExport: true,
  exportDataType: "all", 
  pagination: true,
  pageSize: 10,
  pageList: [10, 25, 50, 100],
  search: true,
  searchAlign:&#39;left&#39;,
  showRefresh: true,
  showToggle: true,
  showColumns: true,
  toolbarAlign: &#39;right&#39;,
  toolbar:"#toolbar",
  buttonsAlign:&#39;left&#39;,
  clickToSelect: true,
  idField:&#39;&#39;,
  columns: [
   [
    {
    title:&#39;编号&#39;,
    field: &#39;index&#39;,
    rowspan: 2,
    align: &#39;center&#39;,
    valign: &#39;middle&#39;
    }, {
    title: &#39;姓名&#39;,
    field: &#39;userName&#39;,
    rowspan: 2,
    align: &#39;center&#39;,
    valign: &#39;middle&#39;,
    sortable: true
 
    }, {
    title: &#39;讲义&#39;,
    colspan: 3,
    align: &#39;center&#39;
    }, {
    title: &#39;视频&#39;,
    colspan: 3,
    align: &#39;center&#39;
    }, {
    title: &#39;总完成情况&#39;,
    colspan: 3,
    align: &#39;center&#39;
    }
   ],
   [
    {
    field: &#39;handoutCount&#39;,
    title: &#39;讲义总数&#39;,
    sortable: true,
    align: &#39;center&#39;
    }, {
    field: &#39;handoutComCount&#39;,
    title: &#39;完成数&#39;,
    sortable: true,
    align: &#39;center&#39;
 
    }, {
    field: &#39;handoutCountDegree&#39;,
    title: &#39;完成率&#39;,
    sortable: true,
    align: &#39;center&#39;
 
 
    }, {
    field: &#39;videoCount&#39;,
    title: &#39;视频总数&#39;,
    sortable: true,
    align: &#39;center&#39;
 
 
    }, {
    field: &#39;videoComCount&#39;,
    title: &#39;完成数&#39;,
    sortable: true,
    align: &#39;center&#39;
 
 
    }, {
    field: &#39;videoCountDegree&#39;,
    title: &#39;完成率&#39;,
    sortable: true,
    align: &#39;center&#39;
 
 
    }, {
    field: &#39;allCount&#39;,
    title: &#39;总数&#39;,
    sortable: true,
    align: &#39;center&#39;
 
 
    }, {
    field: &#39;allComCount&#39;,
    title: &#39;总完成数&#39;,
    sortable: true,
    align: &#39;center&#39;
 
 
    }, {
    field: &#39;allDegree&#39;,
    title: &#39;总完成率&#39;,
    sortable: true,
    align: &#39;center&#39;
 
 
    }
   ]
 
   ]
 
 });

Salin selepas log masuk

2、生成展开之后的表格内容：

function detailFormatter(index, row) {
  handoutColums=[];
  handoutData=[];
  videoColums=[];
  videoData=[];
  var html = [];
  html.push(&#39;<div class="row">&#39;);
  html.push(&#39;<div class="col-md-6">&#39;);
  html.push(&#39;<table id="tableHandout&#39;+index+&#39;"></table>&#39;);
  html.push(&#39;</div>&#39;);
  html.push(&#39;<div class="col-md-6">&#39;);
  html.push(&#39;<table id="tableVideo&#39;+index+&#39;"></table>&#39;);
  html.push(&#39;</div>&#39;);
  html.push(&#39;</div>&#39;);
  handoutColums.push({
   field: &#39;handoutIndex&#39;,title: &#39;编号&#39;, sortable: true ,width: 150
  },{
   field: &#39;handoutName&#39;,title: &#39;讲义名称&#39;, sortable: true ,width: 150
  },{
   field: &#39;degree&#39;,title: &#39;完成度&#39;, sortable: true ,width: 150
  });
  videoColums.push({
   field: &#39;videoIndex&#39;,title: &#39;编号&#39;, sortable: true ,width: 150
  },{
   field: &#39;videoName&#39;,title: &#39;视频名称&#39;, sortable: true ,width: 150
  },{
   field: &#39;degree&#39;,title: &#39;完成度&#39;, sortable: true ,width: 150
  });
  $.each(row, function (key, value) {
   if(key=="handout"){
   $.each(value,function(index,handout){
   var row = {};
   row[&#39;handoutIndex&#39;] = index+1;
   row[&#39;handoutName&#39;]=handout.handoutName;
   row[&#39;degree&#39;]=handout.degree;
   handoutData.push(row);
 
   });
   }
   if(key=="video"){
   $.each(value,function(index,video){
   var row = {};
   row[&#39;videoIndex&#39;]=index+1;
   row[&#39;videoName&#39;]=video.videoName;
   row[&#39;degree&#39;]=video.degree;
   videoData.push(row);
   });
   }
  });
 
  return html.join(&#39;&#39;);
  }

Salin selepas log masuk

3、填充表格内容：

$(&#39;#tableActivity&#39;).on(&#39;expand-row.bs.table&#39;, function (e, index, row, $detail) {
  initHandoutTable(handoutColums,handoutData,index);
  initVideoTable(videoColums,videoData,index);
  }); 
 
  function initHandoutTable(colums,data,index){
 
 
  $(&#39;#tableHandout&#39;+index).bootstrapTable(&#39;destroy&#39;).bootstrapTable({
   cache: false,
   height: 200,
   clickToSelect: true,
   idField:&#39;&#39;,
   columns:colums,
   data:data
  });
 
  }
 
  function initVideoTable(colums,data,index){
 
 
  $(&#39;#tableVideo&#39;+index).bootstrapTable(&#39;destroy&#39;).bootstrapTable({
   cache: false,
   height: 200,
   clickToSelect: true,
   idField:&#39;&#39;,
   columns:colums,
   data:data
  });
 
  }

Salin selepas log masuk