Tout d'abord, c'est un formulaire de page simple. Vous pouvez créer des tables HTML dans la manière habituelle de dessiner des tables, puis contrôler les styles spéciaux et autres opérations via JS (l'avantage est que les tables sont plus intuitives, et il est pratique d'ajuster les styles de table, etc., et la vitesse est rapide)
Bien sûr, vous pouvez simplement mettre une balise de table sur la page, et toutes les données et styles suivants peuvent être contrôlés via JS. Je dirai plus tard (les avantages sont pratiques pour contrôler et modifier les données, en particulier le format JSON obtenu par la méthode AJAX, mais l'ajustement du style est plus gênant)
PS: Ceci est le site officiel du plug-in, qui contient des API et des exemples anglais: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
De plus, avant de l'utiliser, veuillez introduire les CSS, JS, JQuery et Bootstrap-Table CSS connexes, JS, au moins ces 5 fichiers de base.
1. Méthode du formulaire HTML
Exemple 1: Exigences, présentation de données de table simple, l'en-tête est deux rangées, et il y a une flèche qui flotte de haut en bas
Analyse: c'est très simple. Vous n'avez besoin que de HTML pour l'implémenter. Dessinez en fonction de la table ordinaire et ajoutez les attributs personnalisés uniques de la table bootstrap. Notez que si vous n'utilisez pas JS, veuillez ajouter des données-toggle à la balise de table initiale.
Code html:
<div> <table data-toggle = "table" data-height = "268" id = "tablel01"> <thead> <tr> <th data-field = "lhc" data-rowspan = "2" data-align = "Center" data-valign = "middle"> Pour consommer </th> <th data-field = "dr" data-cocolspan = "3" data-align = "Centre" Data-Valign = "Middle"> cette journée </ th> <th data-field = "bz" data-colSpan = "3" data-align = "Center" data-valign = "middle"> cette semaine </ th> <th data-field = "par" data-coolspan = "3" data-align = "Center" data-valign = "middle"> ce mois </th> </ tr> <tr> Data-Field = "DRBQ" Data-Align = "Center" Data-Valign = "Middle"> Ce problème </th> <th Data-Field = "DRTB" Data-Align = "Center" Data-Valign = "Middle"> Année annuelle </ Th> <TH Data-Field = "DRHB" Data-Align = "Center" Data-VQIign = "Middle" Moon-Month </ Th> <th-fifiers " data-align = "Center" data-valign = "middle"> ce problème </th> <th data-field = "bztb" data-align = "Center" data-valign = "middle"> an ann </th> <th data-field = "bzhb" data-align = "Center" data-valign = "midle"> moon-mONNH </th> <th> <th data-find = "bybq" data- "month </th> <th> <th Data-Valign = "Middle"> Ce problème </th> <th data-field = "bytb" data-align = "Center" Data-Valign = "Middle"> Année </ TH> <th Data-Field = "BYHB" Data-Align = "Center" Data-Valign = "Middle"> MOQ </ Th> </p> </head> <Tbody> Volume </td> <Td> 21341 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 0,31 </pd> <Td> <i class = 'Glyphicon Glyphicon-Arrow-up'> </i> 0.21 </td> <td> 3343221 Class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 1.13 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 2.94 </td> </tr> <tr> <td> Glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' Glyphicon Glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 1.45 </td> <td> 234534 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 4.35 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 2.75 </td> <td> 44225 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 0,74 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 3.45 </td> </tr> <tr> <td> Consommation de charbon </td> <td> 43363 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 0.31 </td> <td> <i class =' glyphicon Glyphicon-arrow-up '> </i> 0,21 </td> <td> 32422 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 4.21 </td> <Td> 13345 </td> <Td> <I class =' Glyphicon Glyphicon-Down '> </i> 2.21 </ td> <i idiot Class = 'Glyphicon Glyphicon-Arrow-Up'> </i> 2.94 </td> </tr> <tr> <td> Volume de charbon entrant </td> <Td> 34624 </td> <td> <i class = 'Glyphicon Glyphicon-ARROW-DOWN'> </I> 4.35 </td> <d> <i-down = glyphiccil Glyphicon-arrow-up '> </i> 1.23 </td> <td> 452346 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2.32 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 0,05 </td> <td> 94524 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-ARROW-UP '> </i> 2.94 </td> </tr> <tr> <td> Consommation du charbon </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-ARROW-DOWN '> </i> 0.31 </td> <td> <i class =' glyphicon Glyphicon-arrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-farrow-down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 2.94 </td> </tr> <td> <td> </ Td> <Td> 21341 </td> <td> <i Class =' Glyphicon Glyphicon-arrow-down '> </i> 0,31 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 2.94 </td> </tr> <td> Colary Consommation </td> <Td> 21341 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 0,31 </pd> <Td> <i class = 'Glyphicon Glyphicon-arrow-up'> </i> 0.21 </td> <td> 334322 Class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 1.13 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 1.13 </td> <td> <i class = 'Glyphicon Glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-ARROW-UP '> </i> 2.94 </td> </tr> <tr> <td> Consommation du charbon </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-ARROW-DOWN '> </i> 0.31 </td> <td> <i class =' glyphicon Glyphicon-arrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-farrow-down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 2.94 </td> </tr> <td> <td> </ Td> <Td> 21341 </td> <td> <i Class =' Glyphicon Glyphicon-arrow-down '> </i> 0,31 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-ARROW-UP '> </i> 2.94 </td> </tr> <tr> <td> Consommation du charbon </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-ARROW-DOWN '> </i> 0.31 </td> <td> <i class =' glyphicon Glyphicon-arrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 2.94 </td> </tbody> </s table> </div>
Exemple 2: Exigences: Il existe une cellule personnalisée qui affiche des progrès après le deuxième tableau, et la première ligne nécessite un affichage statistique total. Ces deux fonctions nécessitent l'utilisation de JS pour définir des lignes et des colonnes personnalisées.
Code html:
<div> <table data-toggle = "table" data-height = "268" id = "tablel02"> <thead> <tr> <th data-field = "id" data-align = "Center" data-valign = "middle"> série série </th> <th data-field = "gys" data-align = "Center" data-valign = "middle"> fournisseur </ th> data-align = "Center" data-valign = "middle"> variété </th> <th data-field = "rz" data-align = "Center" data-valign = "middle"> carbon value </ th> <th data-field = "mj" data-agn = "Center" data-valign = "middle"> coal prix </ th> <th data-field = "bmdj" data-align = " Data-Valign = "Middle"> Unit Coal </ Th> <th Data-Field = "DRLM" Data-Align = "Center" Data-Valign = "Middle"> Cumulative Coal </ Th> <Th Data-Field = "ljlm" Data-Align = "Center" Data-Valign = "Middle"> Cumulative Coal Data-Valign = "Middle"> Volume planifié mensuel </th> <th Data-Field = "YJHJD" Data-Align = "Center" Data-Valign = "Middle" Data-Formatter = "Progress"> Achèvement planifié mensuel Progress </td> <td> Shuangxin Miner </td> <td> bas-soul Coal </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22% </td> </tr> <td> 3 </td> <td> yitai co., Ltd. </td> <td> Coal d'ingénierie </td> <td> </td> <td> </td> <td> 51888 .72 </td> <td> 70000 </td> <td> 74% </td> </tr> <td> 4 </td> <td> Sulfure Coal </td> <Td> </td> <Td> </td> <Td> </td> <Td> 20041.86 </td> <td> 90000 </td> <td> 100% </td> </tr> <td> 5 </td> <td> Aidi Energy </td> <Td> Sulfur charbon </td> <td> </td> <td> </td> <td> </td> <td> 5191.08 </td> <td> 30000 </td> <td> 0% </gend> </tr> <tr> <Td> 6 </td> <td> hengtai COAL </td> <td> moyen et haut de sulfride> Coal </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 18265.56 </td> <td> 0 </td> <td> 22% </td> </tr> <td> 7 </td> <td> Charbon de soufre </ td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22% </td> </tr> <td> 8 </td> <dd> shuangxin Miner </td> <td> bas-soul charbon </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22% </td> </tr> <tt> <td> 9 </td> <td> </tr> <tt> <td> 9 </td> <td> </tr> <tt> Mining </td> <Td> Coal à faible teneur en sulfure </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </ td> <td> 22% </td> </tr> </body> </sable> </v> </pd> </tr> </body> </ Table>
Code js:
// Déclare la variable utilisée pour compter le total (charbon accumulé, plan mensuel) var yjharr = []; var ljlMarr = []; // Fonction de colonne personnalisée Progress (valeur, row) {var width = parseInt (row.yjhjd); var red = '# e63737'; var bleu = '# b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'height: 20px; border: 1px solide # b6ccf4;'> <span style = 'affiche: block; float: left; width:" + largeth + "%; (width> = 100? Red: Blue) + "; '>" + valeur + "</span> </div>"} // Méthode pour calculer la fonction de valeur totale yjhtotal () {var subyjh = 0; var subljlm = 0; var row = []; for (var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh + = parsefloat (yjharr [i]);} for (var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh + = parsefloat (yjharr [i]);} for (var j = 0; j <ljlmarr.length; j ++) {if (ljlMarr [j] == "") {ljlMarr [j] = 0;} subbljlm + = parsefloat (ljlMarr [j]);} row.push ({id: 1, Gys: 'Total', PZ: '', RZ: '', MJ: '', BMDJ: '', Drlm: '', ljlm: subljlm.tofixed (2), yjhl: subyjh, yjhjd: '107%'}); return; rangée}Analyse: les lignes et les colonnes personnalisées doivent ajouter des données-format de données = 'Nom de la méthode', où la ligne de paramètre dans la méthode Progress () sera exécutée une fois que chaque ligne sera générée et que l'objet de la ligne est passé lorsque le tableau génère des lignes.
Deux: méthode JS
Grâce à cette méthode, il est très pratique de définir des paramètres pour la table, ce qui est très pratique pour traiter les données, en particulier lors de la définition de la méthode et de l'adresse de demande. Cependant, ce projet n'est qu'une page statique pour le moment. Veuillez écrire les données à l'avenir.
Exemple 1: Identique à ci-dessus
HTML:
<div> <table id = "Tablel01"> </ table> </div>
JS:
// Plugin de table (Tableau 1) démarre $ ('# Tablel01'). Bootstraptable ({Hight: 268, // Simulated Data Colonnes: [{{Align: 'Center', Valign: 'Middle', champ: 'LHC', Title: 'To Consume', Rowspan: "DR ', Titre: {Align:' Center ', Valign:' Middle ', Field:' DR ', Title: Titre: 'Day', Colspan: 3}, {Align: 'Center', valign: 'Middle', champ: 'bz', titre: 'cette semaine', Colspan: 3}, {Align: 'Center', valign: 'Middle', Field: 'By', Title: 'This Mont numéro '}, {align:' Center ', valign:' middle ', champ:' drtb ', titre:' ann-y-an ', Formatter: Trend}, {align:' Center ', valign:' middle ', champ:' Drhb ', titre:' Momentum ', Formatter:' BZBQ ', {Align:' Center ', Valign:' Middle ', Field:' BZBQ ', {Align: 'Center', valign: 'Middle', champ: 'bztb', titre: 'ann-y-y-an', Formatter: Trend}, {align: 'Center', valign: 'Middle', champ: 'bzhb', titre: 'Moon-Month' numéro '}, {align:' Center ', valign:' middle ', champ:' bytb ', title:' ann-y-an ', formatter: Trend}, {align:' Center ', valign:' middle ', champ:' bytb ', titre:' ann-on-an ', formatter:' 'Mono-mois', formateur: tendance}]], données: [{id: 1, lhc: 'venir Stock ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', BYHB:' 1.59 '' ', {id: `` 2.78', byb: '1,59' '', {id: `` 2.78 ', byb:' 1.59 '' ', {id: `` 2.78', byb: '1,59' '', {Id: `` 2.78 ', ByB:' 1.59 '' ', {Id: ". stock',drbq:'21341',drtb:'0.21',d rhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:3,lhc:'enter stock',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78' ,byhb:'1.59'},{id:4,lhc:'Come in Stock ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', ByB:' 1.59 '' '', {id: '2.78', byb: '1.59' '', {id: lhc: '1,59' '', {id: lhc: '1,59' '', {id: lhc: '1,59' '', {id: lhc: '1,59' '', {id: lhc: '1,59' '', {id: lhc: '. Stock ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', bzbq ::::' '35624', bztb: '1.62', bzhb: '3.16', bybq: '42613', bzhb: '2.78', byb: '1.59' ', {id: hc:', byb: '1.59' ', {id: 6, lhc: byb:' 1.59 '', {id: lhc: '. Stock ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', BYB:' 1.59 '' ',' ' stock',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:8,lhc:'Come in Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1. Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', BYHB:' 1.59 '' ', {id:' 2,78 ', byb:' 1,59 '' ', {id: `` ENT, ETR stock',d rbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:11,lhc:'coming stock',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16 ',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:12,lhc:'enter Stock ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', BYB:' 1.59 '' '}); La tendance de style flèche flottante de haut en bas (valeur, row) {var Trendicon = row.id% 2 === 0? 'Glyphicon Glyphicon-Arrow-Down': 'Glyphicon Glyphicon-Arrow-up';Analyse: $ ('# Tablel01'). Bootstraptable ({}) est l'indicateur au début du plug-in, en ajoutant les paramètres de la table, puis dans les données: est les données de la table, et dans les colonnes, c'est l'endroit où les paramètres de colonne et les données de table sont définis. La chose représentative à propos de cet élément est que l'en-tête de table est divisé en deux parties, donc deux tableaux doivent être ajoutés aux colonnes [{}] et [{}]. Tous ont été écrits dans un tableau avant, et le code source a traversé la longueur des colonnes
Exemple 2:
Le même HTML ne nécessite qu'une étiquette de table avec ID
JS:
// Plugin de table (tableau 2) démarre // Déclarez les variables utilisées pour compter le total (charbon accumulé, plan mensuel) var yjharr = []; var ljlmarr = []; $ ('# Tablel02'). Bootstraptable ({Hight: 268, // Simulate Data Columns: [{align: 'Center', Valign: 'Middle', Field: 'ID', 'CHILD' ' {Align: 'Center', Valign: 'Middle', champ: 'Gys', titre: 'Fournisseur'}, {Align: 'Center', Valign: 'Middle', Field: 'PZ', Titre: 'Variety'}, {Align: 'Center', Valign: 'Middle', 'Centre' RZ ', Titre:' Caloric Value '}, {ALIGN:' 'MJ', Titre: 'Coal Price'}, {Align: 'Center', Valign: 'Middle', champ: 'BMDJ', Titre: 'Standard Coal Price'}, {Align: 'Center', valign: 'Middle', champ: 'Drlm' ', Titre:' Middle 'Coming to the Day'}, {Align: 'Center', Valign: 'Middle', Field: 'Ljl', Titre: 'Center', Valign: 'Middle', Field: 'Ljl', Titre: 'Center', Valign: 'Middle', Field: 'Ljl', Titre: 'Center', Valign: 'Middle', Field: 'Ljl', Titre: 'Centre', Valign: ' Jour '}, {align:' Center ', valign:' Middle ', champ:' ljlm ', titre:' cumulative Coal Coming '}, {align:' Center ', valign:' Middle ', champ:' yjhl '', Title: `` Field mensuel planifié '}, {align:' Centre ',' Middle ', Field:' yjhjd '', Progress ', Formatter: Progress}], Data: [{id: 2, Gys:' Shuangxin Mining ', PZ:' Low Sulfur Coal ', RZ:' ', MJ:' ', Bmdj:' ', Drlm:' ', ljlm:' 6686.08 ', yjhl:' 30000 ', yjhjd: '22%'}, {id: 3, gys: 'Yitai Co., Ltd.', Pz: 'Engineering Coal ', RZ:' ', MJ:' ', BMDJ:' ', D RLM:' ', LJLM:' 51888.72 ', YJHL:' 70000 ', YJHJD: '74%'}, {Id: 4, Gys: 'JIAYUAN Company' Coal ', RZ:' ', MJ:' ', Bmdj:' ', Drlm:' ', ljlm:' 20041.86 ', yjhl:' 90000 ', yjhjd:' 100% '}, {id: 5, gys:' Aidi Energy ', Pz:' Low Sulfur Coal ', Rz:' ', MADI MODI J: '', bmdj: '', drlm: '', ljlm: '5191.08', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'Hengtai Coal', pz: 'Moyen-High Sulfur Coal ', RZ:' ', MJ:' ', BMDJ:' ', Drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0% '}, {id: 6, gys:' ', Hengtai Coal', pz: 'Medium-High Sulfur Cate', Rz: '' ', Hengtai Coal MJ: '', bmdj: '', drlm: '', ljlm: '18265.56', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'Hengtai Coal', pz: 'Moyen-High Sulfur Coal ', RZ:' ', MJ:' ', BMDJ:' ', Drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0% '}]}); // Données de simulation end // Afficher la fonction de colonne de progression de la barre de progression (Value) {var width = ParseInt red = '# e63737'; var blue = '# b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'height: 20px; border: 1px solide # b6ccf4;'> <span style = 'affichage: bloc; float: gauche; largeur: "+ largeur +"%; hauteur: 100%; fond-couleur: "+ (largeur> = 100? Red: Blue) +";'> "+ valeur +" </span> </v> "} // Méthode pour calculer la fonction de valeur totale yjhtotal () {var subyjh = 0; i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh + = parsefloat (yjharr [i]);} for (var i = 0; j = 0; j <ljlmarr.length; j ++) {if (ljlMarr [j] == "") {ljlMarr [j] = 0;} subbljlm + = parsefloat (ljlMarr [j]);} row.pus h ({id: 1, gys: 'total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: subbljlm, yjhl: subyjh, yjhjd: '107%'}); return; rangée}Ce n'est en fait pas très différent de la première méthode, c'est juste que vous mettez les colonnes personnalisées dans les données et les définissez. C'est plus facile à comprendre. Pour d'autres paramètres, veuillez vous référer au site officiel. Les données sont dynamiques et comment les ajouter en ligne. Il y a de nombreux exemples, tant qu'ils sont placés dans .bootstraptable ({})
Ce qui précède est l'en-tête fixe adaptatif du plug-in de formulaire de table bootstrap introduit par l'éditeur (super utile). J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!