Implementation method of Bootstrap-Table Combination

Recently, you need to make a table style, you need a combination of heads, now share it to everyone,

1, the effect map

bootstrap-table组合表头的实现方法


  
3, JavaScript code

$ (“# table”). Bootstraptable ({DataType: “json”, method: ‘Get ‘, ContentType: “Application / X-WWW-FORM-URLENCODED”, Cache: False, URL: “../ Data / MergeData.json”, Column:[[{“Title”: “Washing Machine Statistics Table”, “Halign “:” CENTER “,” Align “:” COLSPAN “: 5}], [{Field: ‘Name’, Title:” Functional Packet “, Valign:” Middle “, Align:” Center “, Colspan : 1, ROWSPAN: 2},{TITLE: “Beauty”, Valign: “Middle”, Align: “Center”, Colspan: 2, RowsPan: 1}, {Title: “Panasonic”, Valign: “Middle”, Align: “Center”, Colspan: 2 ROWSPAN: 1}], [{Field: ‘Mideanum’, Title: ‘Quantity’, Valign: “Middle”, Align: “center”}}, {Field: ‘Mideapercent’, Title: ‘Zoomer’, VALIGN: “middle”, align: “center”}, {Field: ‘PanasonicNum’, Title: ‘Quantity’, Valign: “Middle”, Align: “center”}, {Field: ‘PanasonicPercent’,Title: ‘Zoomer, Valign: “Middle”, Align: “Center”}]]})

Columns stores three sets of arrays:
  The first set of arrays is stored in the table's title information, where colspan is stored all columns  
second group of the entire table
, where the field of the field is corresponding to the field of NAME. The cross-bank field, the field corresponds to the Name in Mergedata.json, and the Colspan and RowsPan are the number of columns and rows of the field, the other fields, and the class of

The third group is stored in the table The third line title, corresponding to data in mergeata.js

4, mergeta.json

[{” “:” Roller “,” Mideanum “:” 10 “,” Mideapercent “:” 29% “,” PanasonicNum “:” 10 “,” PanasonicPercent “:” 29% “}, {” name “:” Wave wheel “,” Mideanum “:” 9 “,” Mideapercent “:” 28% “,” PanasonicNum “:” 10 “,” PanasonicPercent “:” 29% “}]

  The above is all the contents of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.  
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment