Heim >php教程 >PHP开发 >Komplexer Operationscode der Bootstrap-Tabelle

Komplexer Operationscode der Bootstrap-Tabelle

高洛峰Original: 2016-12-08 11:19:341591Durchsuche

Das Beispiel in diesem Artikel zeigt Ihnen die komplexen Vorgänge der Bootstrap-Tabelle, wie Sie die äußere Tabelle generieren und den Tabelleninhalt als Referenz füllen. Der spezifische Inhalt ist wie folgt

1. Generieren Sie zunächst die äußere Tabelle:

$(&#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. Erzeugen Sie den erweiterten Tabelleninhalt:

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 >

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

Komplexer Operationscode der Bootstrap-Tabelle

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie AJax von jQuery, um asynchronen Zugriff und asynchrones Laden zu implementierenNächster Artikel：Verwenden Sie AJax von jQuery, um asynchronen Zugriff und asynchrones Laden zu implementieren

In Verbindung stehende Artikel

Mehr sehen