Bootstrap table complex operation code-PHP开发-php.cn

Bootstrap table complex operation code

高洛峰

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

Original

1612 people have browsed it

The example in this article shares with you the complex operations of bootstrap table, how to generate the outer table, and how to fill the table content for your reference. The specific content is as follows

1. First generate the outer table:

Bootstrap table complex operation code

$(&#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;
 
 
    }
   ]
 
   ]
 
 });

Copy after login

2. Generate expansion The following table content:

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

Copy after login

3. Fill in the table content:

$(&#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
  });
 
  }

Copy after login

Bootstrap table complex operation code