Home >php教程 >PHP开发 >Bootstrap table complex operation code

Bootstrap table complex operation code

高洛峰Original: 2016-12-08 11:19:341629browse

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:

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

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

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

Bootstrap table complex operation code

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use jQuery's AJax to implement asynchronous access and asynchronous loadingNext article：Use jQuery's AJax to implement asynchronous access and asynchronous loading

See more

Bootstrap table complex operation code

Related articles