Primeiro de tudo, é um formulário de página simples. Você pode criar tabelas HTML na maneira usual de desenhar mesas e, em seguida, controlar estilos especiais e outras operações através do JS (a vantagem é que as tabelas são mais intuitivas e é conveniente ajustar os estilos de tabela etc., e a velocidade é rápida)
Obviamente, você pode apenas colocar uma tag de tabela na página e todos os dados e estilos subsequentes podem ser controlados através do JS. Eu direi mais tarde (as vantagens são convenientes para controlar e modificar dados, especialmente o formato JSON obtido pelo método Ajax, mas ajustar o estilo é mais problemático)
PS: Este é o site oficial do plug-in, que contém APIs e exemplos em inglês: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Além disso, antes de usar, apresente CSS, JS, JQuery e Bootstrap de Bootstrap, JS pelo menos esses 5 arquivos básicos.
1. Método de forma html
Exemplo 1: Requisitos, apresentação simples de dados da tabela, o cabeçalho é duas linhas e há uma flecha que flutua para cima e para baixo
Análise: É muito simples. Você só precisa de HTML para implementá -lo. Desenhe de acordo com a tabela regular e adicione os atributos personalizados exclusivos da tabela de bootstrap. Observe que, se você não usar o JS, adicione o Data-Toggle à tag de tabela inicial.
Código 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">to consume</th><th data-field="dr" data-colspan="3" data-align="center" data-valign="middle">this Dia </th> <th data-field = "bz" data-colspan = "3" data-align = "center" data-valign = "middle"> nesta semana </th> <th data-field = "por" data-colspan = "3" data-align = "center" data-valign = "middle"> este mês </th> </tr> <tr> dados dados 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 data-field = "bytb" data-align = "center" data-valign = "médio"> ano </th> <th data-field = "byhb" data-align = "center" data-valign = "middle"> moq </th> </tr> </thead> <tr> <t> <td> </th 31 </th 31 </t3 </td Class = 'Glyphicon glyphicon-arrow-Down'> </i> 0.31 </td> <td> <i class =' Glyphicon glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> Class = Glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glificon glificon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <Td> <i class =' Glyphicon Glyphicon-ARROWLOWLOWLOWLOWLOWLOW-DOBLEONDO </TD> class = 'glificono glificon-arrow-up'> </i> 2.94 </td> </tr> <tr> <td> volume de carvão que incorpora </td> <td> 76573 </td> <td> <i class = 'Glyphicon Glydicon-Dowrowowowowowowowowoned> glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' glificon glificon-arrow-up '> </i> 1.45 </td> <td> 234534 </td> <Td> <i class =' Glyphicon Glyphicon-ARROWLOWN. 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> consumo de carvão </td> <td> 43363 </td> <td> <i class =' glyphicon glyphicon-down '> </i> 0.31 </td> GLYPHICON-ARROW-UP '> </i> 0.21 </td> <td> 32422 </td> <td> <i class =' Glyphicon glificon-arrow-down '> </i> 1.13 </td> <tdless> <i class =' Glyphicon GlyPhicon-ARLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOWLOW-ANCHICON </TD> class = 'Glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 13345 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 GLYPHICON-ARROW-UP '> </i> 2,94 </td> </tr> <tr> <td> volume de carvão de entrada </td> <td> 34624 </td> <tflys = class =' Glyphicon Glyphicon-Warrow-Down '> <'> 4.35 </td> GLYPHICON-ARROW-UP '> </i> 1.23 </td> <td> 452346 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.32 </td> <td> 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> consumo de carvão </td> <td> 21341 </td> <td> <i class =' glyphicon glyphicon-marrow-down '> </i> 0.31 </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-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> consumo de carvão </td> <td> 21341 </td> <td> <i class =' glyphicon glyphicon-marrow-down '> </i> 0.31 </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 = 'glificon glificon-arrow-down'> </i> 2.21 </td> <Td> <i class = 'Glyphicon Glyphicon-ARMOWN class = 'glificono glificon-arrow-up'> </i> 2.94 </td> </tr> <tr> <td> consumo de carvão </td> <td> 21341 </td> <tg> <i class = 'Glyphicon glyphicon-arrow-down'> </i> 0.3.3. 0.3. 0,71 </td = glyphicon Glyphicon-d't-d. 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> consumo de carvão </td> <td> 21341 </td> <td> <i class =' glyphicon glyphicon-marrow-down '> </i> 0.31 </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 = 'glificon glificon-arrow-down'> </i> 2.21 </td> <Td> <i class = 'Glyphicon Glyphicon-ARMOWN class = 'glificono glificon-arrow-up'> </i> 2.94 </td> </tr> <tr> <td> consumo de carvão </td> <td> 21341 </td> <tg> <i class = 'Glyphicon glyphicon-arrow-down'> </i> 0.3.3. 0.3. 0,71 </td = glyphicon Glyphicon-d't-d. 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> consumo de carvão </td> <td> 21341 </td> <td> <i class =' glyphicon glyphicon-marrow-down '> </i> 0.31 </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> </ table> </div>
Exemplo 2: Requisitos: Existe uma célula personalizada que exibe o progresso após a segunda tabela, e a primeira linha requer uma tela estatística total. Essas duas funções exigem o uso de JS para definir linhas e colunas personalizadas.
Código HTML:
<div><table data-toggle="table" data-height="268" id="tableL02"><thead><tr><th data-field="id" data-align="center" data-valign="middle">Serial number</th><th data-field="gys" data-align="center" data-valign="middle">Supplier</th><th data-field="pz" Data-align = "Center" Data-Valign = "Middle"> Variety </th> <th Datafield = "RZ" Data-Align = "Center" Data-Valign = "Middle"> Carbon Valor </th> <th data-field = "MJ" Data-align = "Center" Data-valign = "Middle"> Preço de carvão </th> <thathfield "=" carvão </th> <th datafield = "drlm" data-align = "central" data-valign = "Middle"> carvão cumulativo </th> <th data-field = "ljlm" data-align = "center" data-valign = "médio"> cumulativo a carvão </th> <th datafield = "yjhlinigneng =" Data "> cumulativo </th> <th data-field =" yjhlinin "-Align "> cumulativo" center "" e "th" e "yjhlign =" middlenk "> cumulativo a carvão </th> <dados-field =" yjhlinin " Volume </th> <th data-field = "yjhjd" data-align = "center" data-valign = "middle" data-formatter = "Progress"> Progresso de conclusão planejado mensal </th> </tr> </thead> <tbody> <tr> <td> 2 </td> <td> shuangxin Mining </td carvão </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22% Ltd. Coal de enxofre </td> <td> </td> <td> </td> <td> </td> <td> 20041.86 </td> <td> 90000 </td> <td> 100%</td> </trd> 5 </td> <td> sulfi <T. carvão </td> <td> </td> <td> </td> <td> </td> <td> 5191.08 </td> <td> 30000 </td> <td> 0%</td> </tr> <t> <Td> 6 </td> <td> heng hengi Coal </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 18265.56 </td> <td> 0 </td> <td> 22%</td> </tr> <tg> </td> Coal de enxofre </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <Td> 22%</td> </td> <t> <t> 8 22%</td> Mineração </td> <td> Low-sulfur Coal </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> </trd> <Td> <Trg Mineração </td> <td> Coal de baixofuro </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <Ts> 30000 </td> <td> 22%</
Código JS:
// Declare a variável usada para contar o total (carvão acumulado, plano mensal) var yjharr = []; var ljlmarr = []; // Função de coluna personalizada Progresso (value, linha) {var width = parseInt (row.yjhjd); var red = '#e63737'; var) azul = ' #b6ccf4'; yjharr.push (row.yjhl); ljlMarr.push (row.ljlm); retorna "<div style = 'altura: 20px; borda: 1px sólido; (largura> = 100? Vermelho: azul)+"; '>"+value+"</span> </div>"} // método para calcular a função de valor total yjhtotal () {var subyjh = 0; var subljlm = 0; var linha = [] para (var (var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} para (var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} para (var J = 0; 1, gys: 'total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: subljlm.tofixed (2), yjhl: subyjh, yjhjd: '107%'}); retorno linha}Análise: linhas e colunas personalizadas precisam adicionar dados de dados = 'nome do método', onde a linha do parâmetro no método Progress () será executada assim que cada linha for gerada e o objeto da linha for passado quando a tabela gerar linhas.
Dois: Método JS
Através deste método, é muito conveniente definir parâmetros para a tabela, o que é muito conveniente para processar dados, especialmente ao definir o método e o endereço de solicitação. No entanto, este projeto é apenas uma página estática por enquanto. Por favor, escreva os dados no futuro.
Exemplo 1: o mesmo que acima
html:
<div> <tabela id = "tablel01"> </tabela> </div>
JS:
//Table plugin (Table 1) starts $('#tableL01').bootstrapTable({height:268,//Simulated data columns: [[{align:'center',valign:'middle',field: 'lhc',title: 'to consume',rowspan:2}, {align:'center',valign:'middle',field: 'dr',title: 'day',colspan:3}, {align:'center',valign:'middle',field: 'bz',title: 'this week',colspan:3},{align:'center',valign:'middle',field: 'by',title: 'this month',colspan:3}],[{align:'center',valign:'middle',field: 'drbq',title: 'this Edição '}, {align:' Center ', Valign:' Middle ', Field:' Drtb ', Title:' Ano a ano ', Formatter: Trend}, {align:' Center ', Valign:' Middle ',' Field: 'DrHb', Title: 'MomMum', Formatter: Trend}, {{ALIn Center: Valin: Valin ', {align: 'Center', Valign: 'Middle', Field: 'BZTB', Título: 'Ano a ano', Formateira: Trend}, {align: 'Center', Valign: 'Middle', Field: 'Bzhb', Title: 'Moon-Month', Formatter: Trend}, {align: 'Center', Valign ', Edição '}, {align:' Center ', Valign:' Middle ', Field:' Bytb ', Title:' Ano a ano ', Formatter: Trend}, {align:' Center ', Valign:' Middle ', Field:' Bytb ', Title:' Ano-a-ano ', formather: Trend}, {ALIGN' Center ', Valn: Valin:' 'Mono-Month', Formatter: Trend}]], dados: [{id: 1, LHC: 'chegando estoque ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 4261 ',' '),' 3,16 ',' 1,5, '),' 3,16 ', 2,'), 2, '35624' estoque ', drbq:' 21341 ', drtb:' 0,21 ', d rhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 4261 ',' '' {'»{),' 3,16 ',' 1,5: 'IDS:' 3,16 ',' 3, 3, 35624 ' estoque ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 4261 ',' '»» {),' 3,16 ',' 1,5, 'IDS:' 3,16 ',' 42613 ',' IDS: '3,16', '42613', », 'IDS:' 3,16 ',' 42613 ','), '3,16', '42613', 'Id:'»), '3,16', '42613', '),' 3.16 ',' 1,5, 'IDS:' 3,16 ' estoque ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 4261 ',' '' »'2.78', byhb ',' 1,5 ','), '),' IDS: '3,16', 'l estoque ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0,33 ', bzbq ::::' 35624 ', bztb:' 1.62 ', {{{' {'{' {'{' {'{' {'{' {'{' {'' ' estoque ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ',' »{), '3.16' 1. estoque ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 4261 ',' '' »»: '3.16' 1. estoque ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1 estoque ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ',' '),' 3.16 ' estoque ', d rbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 4261 ',' '{' {'{' {'{' {'),' 35624 ' estoque ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ',), {),' 3.16 ' estoque ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 4213 ', ») 2.78'; A tendência do estilo de seta flutuante para cima e para baixo (valor, linha) {var Trendicon = row.id%2 === 0? 'Glificon glificon-arrow-down': 'glificon glificon-arrow-up'; return "<i class = '"+Trendicon+"'> </i>"+}}Análise: $ ('#tablel01'). Bootstraptable ({}) é o sinalizador no início do plug-in, adicionando os parâmetros da tabela e, em seguida, nos dados: são os dados da tabela e nas colunas, é o local onde os parâmetros da coluna e os dados da tabela são definidos. O representante sobre este item é que o cabeçalho da tabela é dividido em duas partes; portanto, duas matrizes precisam ser adicionadas às colunas [{}] e [{}]. Todos eles foram escritos em uma matriz antes, e o código -fonte atravessou a duração das colunas
Exemplo 2:
O mesmo HTML requer apenas uma tag de tabela com ID
JS:
// plugin de tabela (Tabela 2) inicia // declara as variáveis usadas para contar o total (carvão acumulado, plano mensal) var yjharr = []; var ljlmarr = []; $ ('#tabl02'). {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', título: 'preço de carvão'}, {align: 'Center', Valign: 'Middle', Field: 'Bmdj', Title: 'Price da unidade de carvão padrão'}, {align: 'Center', Valign: 'Middle', Field: 'Drlm', Title: 'Coal Coming to the Day'}, {Align '' '' '' '' ' 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 progresso ', formatador: progresso}], dados: [{id: 2, gys:' shuangxin minering ', pz:' baixo enxofre carvão ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 6686.08 ', yjhl:' 30000 ', yjhjd: '22%'}, {id: 3, gys: 'yitai Co., ltd carvão ', rz:' ', mj:' ', bmdj:' ', d rlm:' ', ljlm:' 51888.72 ', yjhl:' 70000 ', yjhjd: '74%'}, {id: 4, gys: 'Jiayuan Empresa', pz: ''}, {id: 4, gys: 'Jiayuan Empresa', pz: ''}, {id: 4, gys: 'Jiayuan Empresa', pz: ' coal',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'20041.86',yjhl:'90000',yjhjd:'100%'},{id:5,gys:'Aidi Energy',pz:'low sulfur coal',rz:'',m J: '', BMDJ: '', Drlm: '', LJlm: '5191.08', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'hengtai carvão', pz: 'sulfur médio-high-high carvão ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%'}, {id: 6, gys:' hengi '', pz: 'médio'}, {iD: MJ: '', BMDJ: '', Drlm: '', ljlm: '18265.56', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'hengtai carvão', pz: 'enxofre médio carvão ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%'}]}); // simulação final de dados // mostra a função de coluna personalizada do progresso (value. vermelho = '#e63737'; var blue = '#b6ccf4'; yjhar.push (row.yjhl); ljlmarr.push (row.ljlm); retorna "<div estilo = 'altura: 20px; borda: 1px sólido#b6ccf4;'> <span style = 'Display: Block; Float: esquerda; largura: "+largura+"%; altura: 100%; cor de fundo: "+(largura> = 100? Vermelho: azul)+";'> "+valor+" </span> </div>} // método para calcular a função do valor total yjHtotal () {varyjh = 0; i = 0; i <yjharr.Length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} para (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%'}); retorno linha}Na verdade, isso não é muito diferente do primeiro método, é apenas que você coloca as colunas personalizadas nos dados e os define. É mais fácil de entender. Para outros parâmetros, consulte o site oficial. Os dados são dinâmicos e como adicioná -los online. Existem muitos exemplos, desde que sejam colocados em .Bootstraptable ({})
O acima é o cabeçalho fixo adaptável do plug-in do formulário da tabela de bootstrap introduzido pelo editor (super útil). Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!