Pertama -tama, ini adalah formulir halaman sederhana. Anda dapat membuat tabel HTML dengan cara yang biasa menggambar tabel, dan kemudian mengontrol gaya khusus dan operasi lainnya melalui JS (keuntungannya adalah tabelnya lebih intuitif, dan lebih mudah untuk menyesuaikan gaya tabel, dll., Dan kecepatannya cepat)
Tentu saja, Anda bisa meletakkan tag tabel pada halaman, dan semua data dan gaya berikutnya dapat dikontrol melalui JS. Saya akan mengatakan nanti (keuntungannya nyaman untuk mengontrol dan memodifikasi data, terutama format JSON yang diperoleh dengan metode AJAX, tetapi menyesuaikan gaya lebih merepotkan)
PS: Ini adalah situs resmi plug-in, yang berisi API dan contoh bahasa Inggris: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Juga, sebelum menggunakan, silakan perkenalkan CSS terkait Bootstrap, JS, JQuery, dan Bootstrap-Table CSS, JS setidaknya 5 file dasar ini.
1. Metode Formulir HTML
Contoh 1: Persyaratan, presentasi data tabel sederhana, headernya adalah dua baris, dan ada panah yang mengapung naik dan turun
Analisis: Ini sangat sederhana. Anda hanya perlu HTML untuk mengimplementasikannya. Gambarlah sesuai dengan tabel biasa dan tambahkan atribut khusus yang unik dari tabel bootstrap. Perhatikan bahwa jika Anda tidak menggunakan JS, silakan tambahkan data-kilat ke tag tabel awal.
Kode HTML:
<Div> <Table Data-koggle = "Table" Data-height = "268" id = "tablel01"> <Thead> <tr> <th-field = "lhc" data-rowspan = "2" data-align = "center" data-valign = "tengah"> untuk mengkonsumsi </th> <tH data-field = "dr" dr "dr" dr "dr" dr "dr" dr "dr" dr "dr" dr "dr" dr "dr" dr "dr" dr "Data-colspan =" 3 "3" DATA-COLPAN "DATA-COLPAN =" DATA "DATA" DATA "DATA" DATA "DATA" data-valign="middle">this day</th><th data-field="bz" data-colspan="3" data-align="center" data-valign="middle">this week</th><th data-field="by" data-colspan="3" data-align="center" data-valign="middle">This month</th></tr><tr><th data-field="drbq" data-align="center" data-valign="middle">This issue</th><th data-field="drtb" data-align="center" data-valign="middle">Year-year</th><th data-field="drhb" data-align="center" data-valign="middle">Moon-month</th><th data-field="bzbq" data-align="center" data-valign="middle">This issue</th><th data-field="bztb" data-align="center" data-valign="middle">Year-year</th><th data-field="bzhb" data-align="center" data-valign="middle">Moon-month</th><th data-field="bybq" data-align="center" data-valign="middle">This issue</th><th data-field="bytb" data-align="center" data-valign="middle">Year-year</th><th data-field="byhb" data-align="center" data-valign="middle">MoQ</th></tr></thead><tbody><tr><td>Incoming coal Volume </td> <td> 21341 </td> <td> <i class = 'Glyphicon glyphicon-arrow-down'> </i> 0,31 </td> <td> <i class = 'glyphicon glyphicon 33-up'> </i> 0.21 </td/tda </td '</td' </td '</td' </td '</td' </td '> </td' 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 = 'GLYPHIC glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>Incoming coal volume</td><td>76573</td><td><i class='glyphicon Glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 4.21 </td> <td> <i class =' Glyphicon <tdrow-arrow-up '> </i> 1.45 </tdon4 </td 23.44 </tdon4 </td'> </i> 1.45. 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 = 'Glyphic = 44225 </td> <td> <i class =' Glyphicon-arrow-down '> </i> 0.74 </td> <td> <i class =' Glyphicon Glyphicon-arrow-up '> </i> 3.45 </td> </tr> <td> Konsumsi batubara </tic> <td> <td> <td> 43363 </td> <td> <td> <td> <tis> <TD> 43363 </td> <td> <td> <t' goTon = 43363 </td> <td> <t ' Glyphicon-Arrow-Down '> </i> 0.31 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Up '> </i> 0.21 </td> <td> </td> </i-class =' Ilrow> <i class = 'glyphicon-glyphicon-glyphicon-glyphicon-glyphicon-glyphicon-glyphicon-glyphicon-arrow-arrow-down' glyphiconon-arrowon- akibat glyphicon-glyphicon-glyphiconon-arrowon- akibat glyphiconon-glyphiconon-arrowon- glyphiconon- glyphiconon- glyphiconon- glyphicon 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-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>Incoming coal volume</td><td>34624</td><td><i class='glyphicon Glyphicon-arrow-down '> </i> 4.35 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Up '> </i> 1.23 </td> <td> 452346 </i> <td> <i class =' glyphicon glyphicon-glyphicon-glyphicon-glyphicon-glyphicon-glyphicon-glyphicon-glyphicon-glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon glyphicon- glyphicon glyphicon 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 = 'Glyphic = Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> Konsumsi batubara </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-arrow-down '> </i> 0.31 </td glyphicon =' glyphicon = 'glyphicon =' glyphicon = 'glyphicon =' glyphicon = 'glyphicon =' glyphicon> </glyphicon </td> Glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-arrow-Down '> </i> </td-td </td-td </td-td </td-td </td-down <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 = 'Glyphic = Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> Konsumsi batubara </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-arrow-down '> </i> 0.31 </td glyphicon =' glyphicon = 'glyphicon =' glyphicon = 'glyphicon =' glyphicon = 'glyphicon =' glyphicon> </glyphicon </td> 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> </td-td </td-td </td-td </td-down <i> class = 'Glyphicon Glyphicon-Arrow-Up'> </i> 2.94 </td> </tr> <tr> <td> Konsumsi batubara </td> <td> 21341 </td> <td> <i class = 'Glyphicon Glyphicon-Row-Down'> </i> 0.31 </td </td </td </td </td </td </td </td </td/td </td </td </td/td </td </td </td </td </td </td </td </td </td-down '> </td-down'> <i ' Glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-arrow-Down '> </i> </td-td </td-td </td-td </td-td </td-down <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 = 'Glyphic = Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> Konsumsi batubara </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-arrow-down '> </i> 0.31 </td glyphicon =' glyphicon = 'glyphicon =' glyphicon = 'glyphicon =' glyphicon = 'glyphicon =' glyphicon> </glyphicon </td> 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> </td-td </td-td </td-td </td-down <i> class = 'Glyphicon Glyphicon-Arrow-Up'> </i> 2.94 </td> </tr> <tr> <td> Konsumsi batubara </td> <td> 21341 </td> <td> <i class = 'Glyphicon Glyphicon-Row-Down'> </i> 0.31 </td </td </td </td </td </td </td </td </td/td </td </td </td/td </td </td </td </td </td </td </td </td </td-down '> </td-down'> <i ' Glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-arrow-Down '> </i> </td-td </td-td </td-td </td-td </td-down <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 = 'Glyphic = Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> Konsumsi batubara </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-arrow-down '> </i> 0.31 </td glyphicon =' glyphicon = 'glyphicon =' glyphicon = 'glyphicon =' glyphicon = 'glyphicon =' glyphicon> </glyphicon </td> 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> </able> </div>
Contoh 2: Persyaratan: Ada sel khusus yang menampilkan kemajuan setelah tabel kedua, dan baris pertama membutuhkan tampilan statistik total. Kedua fungsi ini memerlukan menggunakan JS untuk mengatur baris dan kolom khusus.
Kode HTML:
<Div> <Table Data-koggle = "Table" data-height = "268" id = "tablel02"> <Thead> <tr> <-field-field = "id" data-align = "center" data-valign = "middle"> number-data = </th> <tH-field = "gys" data-align = "center" center "center = viLion =" Data = "DATA" PENDIRI "DATA" DATA "DATA" CENTIGN = "CENTER" CENTER "CENTIGN =" CENTER "CENTIGN =" CENTER "CENTIGN =" CENTER "CENTIGN =" DATA (CENTER "CENTIGN =" DATA (CENTER "CENGATI =" DATA "TIGKE-FIELD/DATA (GYS-FIELD" Data-align = "Center" Data-valign = "Middle"> Variety </t> <th-field = "rz" data-align = "center" data-valign = "middle"> nilai karbon </th> <-field data = "mj" data-field = "center" data-valign = "Middle"> DATA DATA "DATA" DATA "DATA" DATA "DATA" TIGA "> </TH" DATA "DATA" DATA "DATA" TIGA "> </tH" DATA "DATA" DATA "DATA" TIGA "> DATA" DATA "> </tH> <" DATA "DATA" DATA "DATA" MIDE "> Middle"> DATA DATA "DATA" DATA "DATA" DATA "MIDET" MIDET "MIDE"> 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</th><th data-field="yjhl" data-align="center" data-valign="middle">monthly planned volume</th><th data-field="yjhjd" data-align="center" data-valign="middle" data-formatter="progress">monthly planned completion progress</th></tr></thead><tbody><tr><td>2</td><td>Shuangxin Penambangan </td> <td> Sulfur rendah coal</td><td></td><td></td><td></td><td></td><td>6686.08</td><td>30000</td><td>22%</td></tr><tr><td>3</td><td>Yitai Co., Ltd.</td><td>Engineering coal</td><td></td><td></td><td>51888 .72</td><td>70000</td><td>74%</td></tr><td>4</td><td>Jiayuan Company</td><td>Medium and high sulfur 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>Low sulfur coal</td><td></td><td></td><td></td><td>5191.08</td><td>30000 </td><td>0%</td></tr><tr><td>6</td><td>Hengtai Coal</td><td>Medium and high sulfur coal</td><td></td><td></td><td></td><td></td><td>18265.56</td><td>0</td><td>22%</td></tr><tr><td>7</td><td>Shuangxin Mining</td><td>Low Sulphur Coal </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> </td> <t/td> <td> </td> </td> </td> </td> </td> </td> </td> </td> <td> </td> </td> </td> </td> </td> </td> </td> </td> </td> Penambangan </td> <td> Sulfur rendah coal</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>Shuangxin Penambangan </td> <td> Batubara rendah-sulfur </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <t/TD </TD </TABBID> </TD </TAB/TR/TR/TR/TR/TD </TD </TD> </TD </TD> </TD </TD> <TD> <TD> <TD>
Kode JS:
// Nyatakan variabel yang digunakan untuk menghitung total (akumulasi batubara, rencana bulanan) var yjharr = []; var ljlmarr = []; // Kemajuan fungsi kolom khusus (nilai, baris) {var width = parseInt (row.yjhjd); var merah = '#e63737'; blue = ' #b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'Tinggi: 20px; perbatasan: 1px solid #b6ccf4;'> <span style = 'display: block; float: kiri; lebar:"+width+"%; (Lebar> = 100? Merah: biru)+"; '>"+nilai+"</span> </div>"} // Metode untuk menghitung fungsi nilai total yjHtotal () {var subyjh = 0; var subljlm = 0; var row = []; untuk (var var = 0; var subljlm = 0; var row = []; untuk (var var = 0; var subljlm = 0; var row = []; untuk (var var = 0; i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} untuk (var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} untuk (var j=0;j<ljlmArr.length;j++){if(ljlmArr[j]==""){ljlmArr[j]=0;}subljlm+=parseFloat(ljlmArr[j]);}row.push({id: 1, gys: 'Total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: subljlm.tofixed (2), yjhl: subyjh, yjhjd: '107%'}); kembali baris}Analisis: Baris dan kolom khusus perlu menambahkan data-formatter = 'nama metode', di mana baris parameter dalam metode progress () akan dieksekusi setelah setiap baris dihasilkan dan objek baris dilewatkan ketika tabel menghasilkan baris.
Dua: Metode JS
Melalui metode ini, sangat nyaman untuk mengatur parameter untuk tabel, yang sangat nyaman untuk memproses data, terutama ketika mengatur metode dan alamat permintaan. Namun, proyek ini hanyalah halaman statis untuk saat ini. Harap tulis data di masa mendatang.
Contoh 1: Sama seperti di atas
html:
<div> <table id = "tablel01"> </able> </div>
JS:
// Plugin tabel (Tabel 1) mulai $ ('#tablel01'). Bootstraptable ({Height: 268, // Simulasi kolom data: [{{align: 'center', valign: 'middle', field: 'lhc', judul: 'untuk mengkonsumsi', rowspan: 2}, {align: 'center', center ', center', middle ', middle', middle ', dry', '{align:' valign: 'center', valign: 'center', valign: 'center', valign: 'center', valign: 'center', valign: 'center', valign: 'valign:' center ', valign: 'Day', colspan: 3}, {align: 'center', valign: 'middle', field: 'bz', judul: 'minggu ini', colspan: 3}, {align: 'center', valign: 'middle', field: 'by', judul: 'bulan ini', colspan: 3}], [{'ini:' center ', colspan: colspan: 3}], [{' ini: 'center', colspan: colspan: 3}], [{{{{{{oLign: issue'}, {align:'center',valign:'middle',field: 'drtb',title: 'year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'drhb',title: 'momentum',formatter:trend}, {align:'center',valign:'middle',field: 'bzbq',title: 'this issue'}, {align:'center',valign:'middle',field: 'bztb',title: 'Year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'bzhb',title: 'Moon-month',formatter:trend},{align:'center',valign:'middle',field: 'bybq',title: 'This issue'},{align:'center',valign:'middle',field: 'bytb',title: 'Year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'bytb',title: 'Year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'byhb', title: 'Mono-month', formatter: tren}]], data: [{id: 1, lhc: 'datang Stok ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ',' ':' 2: lo: lo: lob: {42613 ', {{42613', {42613 ', BYBQ:' 228, Stok ', DRBQ:' 21341 ', DRTB:' 0.21 ', D RHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ',' Saham ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', Bztb:' 1.62 ', Bzhb:' 3.16 ', ByBq:' 42613 ', ByTB:' 2.78 ',', '42613', ByTB: '2.78', '42613', BYTB: '2.78', '42613', L: '2.78', '42613', L: '2.78', '42613', '42613', BYBQ: '42613,' Saham ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', Bztb:' 1.62 ', Bzhb:' 3.16 ', Bybq:' 42613 ', ByTB:' 2.78 ',' Saham ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ ::::' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', bytb:' 2.78 ','BQ:' 42613 ', BYTB:' 2.78 ', BYTH','BQ: '42613', BYTB: '2.78', BYBQ: '42613', BYTB: '2.78', BYTH ','BQ:' 42613 ', BYTB:' 2.78 ', BYBQ:' 42613 ', BYTB:' 2.78 ', BYBQ:' 42613 ', BYTB:' 2.78 ', BYBQ:' 42613 ', BYTB:' 2.78 ', BYBQ:' 42613 ' Stok ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', Bztb:' 1.62 ', Bzhb:' 3.16 ', ByBq:' 42613 ', ByTB:' 2.78 ', BYBQ:' 42613 ', BYTB:' 2.78 ', BYHB:' '' 1.59 ', {{' {'{' {'{' { Saham ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', Bztb:' 1.62 ', Bzhb:' 3.16 ', Bybq:' 42613 ', ByTB:' 2.78 ','. ' Stok ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1 Saham ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', BYSHB:': '{' 42613 ', BYTB:' 2.78 ',' '2.78', BYBQ Saham ', D RBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ',', '', '{{{{42613, Saham ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', BZTB:' 1.62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ',' ' Saham ', DRBQ:' 21341 ', DRTB:' 0.21 ', DRHB:' 0.33 ', BZBQ:' 35624 ', Bztb:' 1.62 ', Bzhb:' 3.16 ', Bybq:' 42613 ', ByTB:' 2.78 ', ByHb:' bybq: '42613', bytb: '2.78', byhb: 'bybq:' 42613 ', bytb:' 2.78 ', byhb:' '; tren gaya panah apung naik dan turun (nilai, baris) {var trendicon = row.id%2 === 0? 'Glyphicon Glyphicon-arrow-down': 'Glyphicon Glyphicon-arrow-up'; return "<i class = '"+trendicon+"> </i>"+value}} <i class =' "+TaneAnalisis: $ ('#tablel01'). Bootstraptable ({}) adalah bendera di awal plug-in, menambahkan parameter tabel, dan kemudian dalam data: adalah data tabel, dan di kolom, itu adalah tempat di mana parameter kolom dan data tabel diatur. Hal yang representatif tentang item ini adalah header tabel dibagi menjadi dua bagian, jadi dua array perlu ditambahkan ke kolom [{}] dan [{}]. Semuanya ditulis dalam array sebelumnya, dan kode sumber melintasi panjang kolom
Contoh 2:
HTML yang sama hanya membutuhkan tag tabel dengan ID
JS:
// Tabel Plugin (Tabel 2) dimulai // menyatakan variabel yang digunakan untuk menghitung total (akumulasi batubara, rencana bulanan) var yjharr = []; var ljlmarr = []; $ ('#tablel02'). Bootstraptable ({tinggi: 268, // Simulasi kolom data: [{arign: '{{tinggi: 268, // Simulasi Data Kolom: [{Align:' Center ', {Tinggi: 268, // Simulasi Data Kolom: {{Align:' Center ',' Tengah: '268, // Simulat {align:'center',valign:'middle',field: 'gys',title: 'supplier'}, {align:'center',valign:'middle',field: 'pz',title: 'Variety'},{align:'center',valign:'middle',field: 'rz',title: 'caloric value'},{align:'center',valign:'middle',field: 'mj',title: 'coal price'},{align:'center',valign:'middle',field: 'bmdj',title: 'standard coal unit price'},{align:'center',valign:'middle',field: 'drlm',title: 'coal coming to the day'},{align:'center',valign:'middle',field: 'ljlm',title: 'coal coming to the day'},{align:'center',valign:'middle',field: 'ljlm',title: 'Cumulative coal coming'},{align:'center',valign:'middle',field: 'yjhl',title: 'monthly planned volume'},{align:'center',valign:'middle',field: 'yjhjd',title: 'Monthly planned completion Progress ', Formatter: Progress}], data: [{id: 2, gys:' shuangxin mining ', pz:' sulfur rendah Batubara ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 6686.08 ', yjhl:' 30000 ', yjhjd: '22%'}, {id: 3, gys: 'yitai Co., ltd.', Pz: ' coal',rz:'',mj:'',bmdj:'',d rlm:'',ljlm:'51888.72',yjhl:'70000',yjhjd:'74%'},{id:4,gys:'Jiayuan Company',pz:'Medium and high sulfur Batubara ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 20041.86 ', yjhl:' 90000 ', yjhjd:' 100%'}, {id: 5, gys:' Aidi Energy ', pz:' Low Sulfur Coal ', Rz Low Sulfur', Rz Low Sulfur ', Rz Low Sulfur Coal J: '', bmdj: '', drlm: '', ljlm: '5191.08', yjhl: '', yjhjd: '0%'}, {id: 6, Gys: 'Hengtai Coal', PZ: 'Sulfur menengah-tinggi coal',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'18265.56',yjhl:'',yjhjd:'0%'},{id:6,gys:'Hengtai Coal',pz:'Medium-high sulfur coal',rz:'', MJ: '', bmdj: '', drlm: '', ljlm: '18265.56', yjhl: '', yjhjd: '0%'}, {id: 6, Gys: 'Hengtai Coal', PZ: 'Sulfur Medium-Tinggi Batubara ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%'}]}); // data simulasi // tunjukkan fungsi kolom khusus dari kemajuan progres progress (value, row) {var): merah = '#e63737'; var blue = '#b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'tinggi: 20px; perbatasan: 1px solid#b6ccf4;'> <span style = 'display: block; float: left; width: "+width+"%; tinggi: 100%; latar belakang-warna: "+(lebar> = 100? merah: biru)+";'> "+nilai+" </span> </div> "} // metode untuk menghitung fungsi nilai total yjhtotal () {var var subyjh = 0; i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} untuk (var i = 0; j = 0; j <ljlmarr.length; j ++) {if (ljlmarr [j] == "") {ljlmarr [j] = 0;} subljlm+= parsefloat (ljlmarr [j]);} row.pus h ({id: 1, gys: 'total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: Subljlm, yjhl: subyjh, yjhjd: '107%'}); kembali baris}Ini sebenarnya tidak jauh berbeda dari metode pertama, hanya saja Anda memasukkan kolom khusus ke dalam data dan mengaturnya. Lebih mudah dimengerti. Untuk parameter lain, silakan merujuk ke situs web resmi. Data itu dinamis dan bagaimana menambahkannya secara online. Ada banyak contoh, selama mereka ditempatkan di .BootStraptable ({})
Di atas adalah header tetap adaptif dari plug-in tabel bootstrap yang diperkenalkan oleh editor (super berguna). Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!