Bootstrap Table Plug-in encabezado de tabla fija adaptativa (súper útil)

En primer lugar, es un formulario de página simple. Puede crear tablas HTML en la forma habitual de dibujar tablas, y luego controlar estilos especiales y otras operaciones a través de JS (la ventaja es que las tablas son más intuitivas, y es conveniente ajustar los estilos de la mesa, etc., y la velocidad es rápida)

Por supuesto, puede poner una etiqueta de tabla en la página, y todos los datos y estilos posteriores se pueden controlar a través de JS. Diré más tarde (las ventajas son convenientes para controlar y modificar datos, especialmente el formato JSON obtenido por el método AJAX, pero ajustar el estilo es más problemático)

PD: Este es el sitio web oficial del complemento, que contiene API en inglés y ejemplos: http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Además, antes de usar, introduzca los CSS, JS, JQuery y Bootstrap-Table relacionados con Bootstrap, al menos estos 5 archivos básicos.

1. Método de formulario HTML

Ejemplo 1: Requisitos, presentación de datos de tabla simple, el encabezado es dos filas, y hay una flecha que flota hacia arriba y hacia abajo

Análisis: es muy simple. Solo necesita HTML para implementarlo. Dibuje de acuerdo con la tabla regular y agregue los atributos personalizados únicos de la mesa de bootstrap. Tenga en cuenta que si no usa JS, agregue datos de datos a la etiqueta de tabla inicial.

Código HTML:

 <Div> <Tabla Data-Toggle = "Tabla" Data-Height = "268" id = "Tablel01"> <thead> <tr> <th data-field = "lhc" data-rowspan = "2" data-align = "center" data-valign = "medio"> para consumir </th> <th data-field = "dr" data-col-colspan = "3" data-align = "Center" Center "" data-valign = "Middle"> este día </th> <th data-field = "bz" data-colspan = "3" data-align = "Center" data-valign = "Middle"> This Week </th> <th data-field = "por" data-colspan = "3" data-align = "center" data-valign = "middle"> este mes </th> <t> <tr> <tr> <tr> <th> <th data-dataq "DRBq" DRBq " data-align = "Center" data-valign = "Middle"> este problema </th> <th data-field = "drtb" data-align = "Center" data-valign = "Middle"> Year Year </th> <th data-field = "drhb" data-align = "center" data-data-valign = "Middle"> lon-mononh </th> <th data-field = "bzbq-align" data "data" "data" "data" "data" "data" "data" data "" data "data" "data" "data" "data) data-valign = "Middle"> este problema </th> <th data-field = "bztb" data-align = "Center" data-valign = "Middle"> año año </th> <th data-field = "bzhb" data-align = "centro" data-valign = "medio"> luna-month </th> <th data-field = "bybq"-align "Center" Center "Center" data-valign = "Middle"> este problema </th> <th data-field = "bytb" data-align = "Center" data-valign = "Middle"> año año </th> <th data-field = "byhb" data-align = "Center" data-valign = "Middle"> moq </th> </tr> </thead> <tbody> <tbandy> trán Volumen </td> <td> 21341 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 0.31 </td> <td> <i class = 'glyphicon glyphicon-Rrow-up'> </i> 0.21 </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 = 'Glyphicon Glyphicon-Arrow-down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Up '> </i> 2.94 </td> </tr> <tr> <td> Volumen de carbón entrante </td> <td> 76573 </td> <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> </td> 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-Pup '> </i> 3.45 </td> </tr> <tr> <td> Consumo de carbón </td> <td> 43363 </td> <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 =' Gyphicon Gyphicon-Carril 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> Volumen de carbón entrante </td> <td> 34624 </td> <td> Glyphicon-Arrow-Down '> </i> 4.35 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Up '> </i> 1.23 </td> <td> 452346 </td> <td> <i class =' Glyphicon Gyphicon-arwdowdowdowdowdowdowdo 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 carbón </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-barrow-down '> </i> 1.13 </td> <td> <i class =' Gyphicon Gyphicon-barrowdowdowdowdowdowdowdo 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 carbón </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 =' Gyphicon 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-arwdowdowdowdowdowdowdowdowdo class = 'Glyphicon Glyphicon-Arrow-Up'> </i> 2.94 </td> </tr> <tr> <tr> <td> consumo de carbón </td> <td> 21341 </td> <td> <i class = 'Glyphicon Glyphicon-sarwrow-down'> </i> 0.31 </td> <td> <iuse. Glyphicon-Arrow-Up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon glyphicon-barrow-down '> </i> 1.13 </td> <td> <i class =' Gyphicon Gyphicon-barrowdowdowdowdowdowdowdo 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 carbón </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 =' Gyphicon 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-arwdowdowdowdowdowdowdowdowdo class = 'Glyphicon Glyphicon-Arrow-Up'> </i> 2.94 </td> </tr> <tr> <tr> <td> consumo de carbón </td> <td> 21341 </td> <td> <i class = 'Glyphicon Glyphicon-sarwrow-down'> </i> 0.31 </td> <td> <iuse. Glyphicon-Arrow-Up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon glyphicon-barrow-down '> </i> 1.13 </td> <td> <i class =' Gyphicon Gyphicon-barrowdowdowdowdowdowdowdo 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 carbón </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 =' Gyphicon Glyphicon-Arrow-Up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Gyphicon Glyphicon-Arrow-Up '> </i> 2.94 </td> </tbody> </table> </div>

Ejemplo 2: Requisitos: hay una celda personalizada que muestra progreso después de la segunda tabla, y la primera fila requiere una pantalla estadística total. Estas dos funciones requieren usar JS para establecer filas y columnas personalizadas.

Código HTML:

 <Div> <Tabla Data-Toggle = "Tabla" data-hight = "268" id = "Tablel02"> <thead> <tr> <th data-field = "id" data-align = "center" data-valign = "medio"> número de serie </th> <th data-field = "gys" data-align = "centro" data-valign = "mediano"> proveedor <th> <th> <th data "data" data-align = "Center" data-valign = "Middle"> variedad </th> <th data-field = "rz" data-align = "Center" data-valign = "Middle"> Value de carbono </th> <th data-field = "mj" data-align = "center" data-valign = "medio"> carbón </th> <th data-field = "bmdj" data "-align "center" " data-valign = "Middle"> Unit Coal </th> <th data-field = "drlm" data-align = "Center" data-valign = "Middle"> Coumulative Coal </th> <th data-field = "ljlm" data-align = "Center" data-valign = "medio"> carbón acumulativo </th> <th data-field = "yjhl" data "data" data = "center" "" center "" "" centro "" data-valign = "Middle"> Volumen planificado mensual </th> <th data-field = "yjhjd" data-align = "Center" data-valign = "medio" data-formatater = "progreso"> progreso mensual de finalización planificada </th> </tr> </thead> <tbody> <tr> <td> 2 </td> <td> shuangxin Minería </td> <td> 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> yeitai 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> carbón </td> <td> </td> <td> </td> <td> </td> <td> 20041.86 </td> <td> 90000 </td> <td> 100%</td> </tr> <td> 5 </td> <td> ender carbón </td> <td> </td> <td> </td> <td> </td> <td> 5191.08 </td> <td> 30000 </td> <td> 0%</td> carbón </td> <td> </td> <td> </td> <td> <td> </td> <td> </td> <td> 18265.56 </td> <td> 0 </td> <td> 22%</td> </tr> <tr> <td> 7 </td> carbón de azufre </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> </tr> <tr> <td> 8 </td> <td> shuang Minería </td> <td> carbón </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> </tr> <tt> <tt> 9 </td> Minería </td> <td> carbón de bajo flujo </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </ail

Código JS:

 // Declarar la variable utilizada para contar el total (carbón acumulado, plan mensual) var yjharr = []; var ljlMarr = []; // La función de columna personalizada Progress (valor, fila) {var width = parseint (fila.yjhjd); var rojo =#e63737 '; var; blue = ' #b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (fila.ljlm); return "<div style = 'altura: 20px; border: 1px sólido #b6ccf4;'> <span style = 'Display: bloque; flotante; izquierda; width:"+width+"%; altura: 100%; 100%; de fondo; (ancho> = 100? rojo: azul)+"; '>"+valor+"</span> </div>"} // método para calcular la función de valor total yjhtotal () {var subyjh = 0; var subljlm = 0; var fila = []; para (var (var (var (var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} 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%'}); regreso fila}

Análisis: las filas y columnas personalizadas deben agregar datos de datos = 'Nombre del método', donde la fila de parámetros en el método Progress () se ejecutará una vez que se genere cada fila y el objeto de la fila se pasa cuando la tabla genera filas.

Dos: método JS

A través de este método, es muy conveniente establecer parámetros para la tabla, lo cual es muy conveniente para procesar datos, especialmente al configurar el método de solicitud y la dirección. Sin embargo, este proyecto es solo una página estática por el momento. Por favor escriba los datos en el futuro.

Ejemplo 1: Igual que el anterior

HTML:

 <Div> <table id = "Tablel01"> </table> </div>

JS:

 // complemento de tabla (Tabla 1) inicia $ ('#Tablel01'). BootStraptable ({Height: 268, // columnas de datos simuladas: [[{align: 'Center', Valign: 'Middle', Middle: 'Lhc', Title: 'Para consumir', RowsPan: 2}, {Align: 'Center', Valign: 'Middle', Field: Field: Field: Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, Title, 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, ', Título', Título, Título, Título ', Título' 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: Field: Field: Field: Field: Field: Field: Field: ByBq ', Title, Title, Title: Trend}, {Align:' Center ', Valign:' problema '}, {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: Field: Field: Field:' 'Mono-month', formatter: tend}]], datos: [{id: 1, lhc: 'vienen 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,' viene: ' 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,' 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,' entran: 'ven: 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: 5,' Come: 'Come: 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:6,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 '}, {{I d: d:' 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,' ven: 'ven:' ven: 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: 10,' enter 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,', ', viene:' lhc: 'lhc:' lhc: 'lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhc: lhC 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,' 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 '}]}); La tendencia de estilo flechante flotante hacia arriba y hacia abajo (valor, fila) {var trendicon = row.id%2 === 0

Análisis: $ ('#Tablel01'). BootStraptable ({}) es el indicador al comienzo del complemento, agregando los parámetros de la tabla y luego en los datos: son los datos de la tabla, y en las columnas, es el lugar donde se establecen los parámetros de columna y los datos de la tabla. Lo representativo de este elemento es que el encabezado de la tabla se divide en dos partes, por lo que se deben agregar dos matrices a las columnas [{}] y [{}]. Todos ellos fueron escritos en una matriz antes, y el código fuente atravesó la longitud de las columnas

Ejemplo 2:

El mismo HTML requiere solo una etiqueta de tabla con ID

JS:

 //Table plugin (Table 2) starts //Declare the variables used to count the total (accumulated coal, monthly plan) var yjhArr=[];var ljlmArr=[];$('#tableL02').bootstrapTable({height:268,//Simulated data columns: [{align:'center',valign:'middle',field: 'id',title: 'serial number'}, {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 Día '}, {align:' Center ', Valign:' Middle ', Field:' ljlm ', Title:' Cumulative Coal Coming '}, {Align:' Center ', Valign:' Middle ', Field:' yjhl ', Título:' Volumen planeado mensualmente '}, {Align:' Center ', Valign:' Middle ', Field: Yjhjd', Title Planned Title ', Title Planned Title Titlenulot Progress ', Formatter: Progress}], Data: [{id: 2, Gys:' shuangxin mining ', pz:' bajo azufre carbón ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 6686.08 ', yjhl:' 30000 ', yjhjd: '22%'}, {id: 3, gys: 'yitai co., ltd., Pz:' ingeniería carbón ', rz:' ', mj:' ', bmdj:' ', d rlm:' ', ljlM:' 518888.72 ', yjhl:' 70000 ', yjhjd: '74%'}, {id: 4, gys: 'jiayuan compañía', pz: 'mediano y alto azufre carbón ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 20041.86 ', yjhl:' 90000 ', yjhjd:' 100%'}, {id: 5, gys:' aidi energía ', pz:' carbón bajo en azufre ', rz:' ', m j: '', bmdj: '', drlm: '', ljlm: '5191.08', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'hengtai carbón', pz: 'azufre medio-alto-alto carbón ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%'}, {id: 6, gys:' hengtai coal ', pz:' carbón medio-sulfur ', rz:' ',', ',', ',', ',', ',', ',', ' mj: '', bmdj: '', drlm: '', ljlm: '18265.56', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'hengtai carbón', pz: 'sulfuros de alta resistencia carbón ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%''}]}); // End de datos de simulación // muestra la función de la columna personalizada del progreso de la barra de progreso (valor, row) {var wid width (parseint (fila. rojo = '#E63737'; var blue = '#b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'altura: 20px; borde: 1px sólido#b6ccf4;'> <span style = 'Display: Block; Float: Left; Width: "+Width+"%; Altura: 100%; Color de fondo: "+(ancho> = 100? Red: Blue)+";'> "+valor+" </span> </div> "} // método para calcular la función de valor total yjhtotal () {var subyjh = 0; var subljlmm = 0; var fila = []; 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]);} file.pus h ({id: 1, gys: 'total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: subljlm, yjhl: subyjh, yjhjd: '107%'}); regreso fila}

En realidad, esto no es muy diferente del primer método, es solo que coloca las columnas personalizadas en los datos y las establece. Es más fácil de entender. Para otros parámetros, consulte el sitio web oficial. Los datos son dinámicos y cómo agregarlos en línea. Hay muchos ejemplos, siempre que se coloquen en .Bootstraptable ({})

El anterior es el encabezado fijo adaptativo del complemento de formulario de tabla Bootstrap introducido por el editor (súper útil). Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!