Bootstrap table complex operation code _javascript tips

The example of this article for everyone to share the complex operation of bootstrap table, how to generate the outer table , how to fill the table content for your reference, the specific contents are as follows

1, Mr. Into the outer form:

$ (' #tableActivity '). Bootstraptable (' Destroy '). bootstraptable ({url: ", Detailview:true, Detailformatter:" Detailformatter ",//Click to expand Advance Execution event Cache:false, height:550, Showexport:true, Exportdatatype:" All ", pagination:t Rue, Pagesize:10, PageList: [Ten, M, MB], search:true, searchalign: ' Left ', Showrefresh:true, SHOWTOGGL 
  E:true, Showcolumns:true, toolbaralign: ' Right ', toolbar: "#toolbar", Buttonsalign: ' Left ', clicktoselect:true, IDfield: ', columns: [[{title: ' Number ', field: ' Index ', Rowspan:2, align: ' center ', valign
    : ' Middle '}, {title: ' Name ', field: ' UserName ', Rowspan:2, align: ' center ', valign: ' Middle ',
    Sortable:true}, {title: ' Handouts ', Colspan:3, align: ' center '}, {title: ' Video ', Colspan:3, Align: ' center '}, {title: ' Total Completion ', Colspan:3, align: ' center '}], [{field: ' Han
   Doutcount ', title: ' Total Handouts ', Sortable:true, align: ' center '}, {field: ' Handoutcomcount ', title: ' Complete Number ', Sortable:true, Alig N: ' center '}, {field: ' Handoutcountdegree ', title: ' Completion rate ', sortable:true, align: ' center '}, {field: ' Videocount ', title: ' Total Video ', sortable:true, align: ' center '}, {field: ' Videocomcount
    ', Title: ' Complete Number ', Sortable:true, align: ' center '}, {field: ' Videocountdegree ', title: ' Completion rate ', Sortable:true, align: ' center '}, {field: ' Allcount ', title: ' Total ', sortable:true, align: ' Center '}, {field: ' Allcomcount ', title: ' Total Finish ', sortable:true, align: ' center '}, {fie
 LD: ' Alldegree ', title: ' Total completion rate ', sortable:true, align: ' center '}]};

2, build the contents of the table after the expansion:

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: ' Numbering ', Sortable:true, width:150},{field: ' Handoutname ', title:
  ' Handout name ', Sortable:true, width:150},{field: ' Degree ', title: ' Degree of completion ', Sortable:true, width:150}); Videocolums.push ({field: ' Videoindex ', title: ' Numbering ', Sortable:true, width:150},{field: ' Videoname ', title: ' Video name
  ', Sortable:true, width:150},{field: ' Degree ', title: ' Degree of completion ', 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, fill in the table content:

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

  

If you want to further study, you can click here to learn, and then for everyone to attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap actual combat Tutorial Bootstrap plugin Use tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.