Serie de mesa de bootstrap:
Explicación detallada de la tabla de arranque de artefacto de la tabla JS (versión básica)
El componente de la tabla Bootstrap Artifacto de la serie de componentes JS [Capítulo final]
El componente de la tabla Bootstrap Artifacto de la serie de componentes JS [2. Padre y pedido de la columna de la columna del padre-hijo]
La tabla Bootstrap es datos livianos y ricos en características que se muestran en forma de tabla, admitiendo selección única, casillas de verificación, clasificación, paginación, visualización/oculta columnas, tabla de desplazamiento de título fija, diseño receptivo, AJAX Carga de datos JSON, hacen clic en columnas ordenadas, vistas de tarjetas, etc. ¡Luego, este artículo introduce el componente de la tabla Boottrap Table Artifact [Capítulo final] de la serie de componentes JS, Let’s Let’s Let’s aprende en conjunto!
1. Muestra de efecto
1. Estilo de fila de mesa
Por ejemplo, tenemos el requisito de mostrar la página de pedido, y los pedidos con diferentes estados muestran diferentes colores, como se muestra en la figura:
2. Editar dentro de la línea de formulario
En el primer artículo, un amigo del parque le preguntó al blogger si podía apoyar el efecto de la edición dentro de la industria, y la respuesta fue sí. Echemos un vistazo al efecto:
Antes de editar
Haga clic en los datos de una celda
Después de editar, complete
3. Combinación de filas y columnas de tablas
Los bloggers piensan que es muy común para las fusiones de rango y rango, especialmente al hacer informes de página. Echemos un vistazo al efecto:
La página actual está incompleta, haga clic para ingresar y echar un vistazo. ¿Qué tal? El efecto es bastante bueno.
4. Exportación de datos de tabla
Con respecto a la exportación de datos de la tabla, la tabla Bootstrap admite la exportación de tres modos: Basic, All, seleccionado. Es decir, la exportación de datos de la página actual, todas las exportaciones de datos y exportación de datos seleccionados. También admite la exportación de varios tipos de archivos, como Excel Common, XML, JSON y otros formatos.
Exportar la página actual a Excel
Exportar todos los datos en la tabla
Exportar datos de fila seleccionados
En cuanto a la exportación de otros tipos de archivos, es básicamente lo mismo que Excel, por lo que el efecto no se mostrará.
2. Ejemplo de código de estilo de fila de tabla
Con respecto a la configuración de estilo de las filas de tabla, otras funciones son sus funciones más básicas. ¿Por qué ponerlo en el tercer artículo? Es porque el blogger cree que esta función puede usarse en todas partes. Por supuesto, el efecto no es difícil. También puede lograr el color de fondo de TR utilizando jQuery, pero el blogger cree que, dado que la tabla de bootstrap proporciona un mecanismo para establecer el color de fondo de la fila, ¿por qué no usar su API incorporada? Veamos cómo implementarlo.
Al inicializar la tabla
// Inicializar la tabla $ ('#tb_order'). BootStraptable ({url: '/tableStyle/getorder', // Método Url (*): 'get', // Método de solicitud (*) // Barbar de herramientas: '#ToolBar', // ¿Qué contenedor se rastrean por el botón de herramienta es verdadero, // donde mostrar el color de intervalo de línea cache: falso,/? Si a usar cache, por el contenedor, que está rastreado por el contenedor. Para establecer esta propiedad (*) paginación: true, // si a mostrar paging (*) ordenable: false, // si habilitar sortOrder: "asc", // Método de clasificación QuereParams: otableInit.querAyParams, // Pagination Parameters (*) SidePagination: "Servidor", // Método de Pagination: Client Client Pagination, Server Pagination (*) Pagenumber: 1, 1. Página para cargar, Página de primera página predeterminada: 10, // Número de filas de registro por página (*) pageList: [10, 25, 50, 100], // Número de filas por página para seleccionar (*) Búsqueda: Verdadero, // ¿La búsqueda de la tabla se muestra en la búsqueda? showRefresh: true, // ¿El botón de actualización muestra mínimoCountColumns? // El botón de alternancia para ver la vista detallada y la vista de la lista CardView: False, // ¿La vista detallada DetalleView: False, // hace la tabla de Child Child shyle: function (fila, índice) {// Hay 5 valores aquí que representan los colores en 5 ['activo', 'Success', 'Info', 'Advertencia', 'Danger']; var strclass = ";" Si (fila? {strclass = 'success';//There is also an active}else if (row.ORDER_STATUS == "Deleted") {strclass = 'danger';}else {return {};}return { classes: strclass }},columns: [{checkbox: true}, {field: 'ORDER_NO',title: 'Order number'}, {field: 'Order_type', Título: 'Tipo de orden'}, {campo: 'Order_status', Título: 'Estado de orden'}, {campo: 'observación', título: 'Observaciones'},]});De hecho, el enfoque está en este parámetro:
RowStyle: function (fila, índice) {// Hay 5 valores aquí que representan los colores en 5 ['activo', 'éxito', 'info', 'advertencia', 'peligro']; var strclass = ""; if (fila.order_status == "para ser programado") {stretClass = 'stits'; // también hay un activo} más if (row.order_status de se establece ") = 'peligro';} else {return {};} return {classes: strclass}},La tabla de bootstrap admite los colores de fondo de la fila de la tabla en 5, a saber, 'activo', 'éxito', 'info', 'advertencia', 'peligro'. En cuanto a cada color de fondo correspondiente, puede verlo ejecutando el código. Con respecto al valor de retorno de este método, el blogger también lo estudió durante mucho tiempo cuando lo usó por primera vez. De acuerdo con las reglas de la tabla de bootstrap, es necesario devolver un tipo de objeto JSON-formato como: {classes: strclass}.
3. Ejemplo de código de edición en la línea de formulario
Con respecto a la edición de la tabla, varios archivos JS que deben extenderse usando la tabla Bootstrap.
1. Introducir archivos JS adicionales
<Link rel = "Stylesheet" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"><script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script><script src =" ~/content/bootstrap-table/extensions/editable/bootstrap-table-editable.js "> </scrito>
2. Al definir una tabla en la página CSHTML, agregue dos atributos
<table id = "tb_departments"> <thead> <tr> <th data-field = "name" data-editable = "true"> name de departamento </th> <th data-field = "parentName"> departamento superior </th> <th data-field = "nivel" data-editable = "true"> nivel de departamento </th> <th data-field = "desc" data-editable = "true"> descriptor </th> </tr> </tead> </table>
Si se inicializa en JS, el método de escritura es el siguiente:
{Field: "Nombre", Título: "Nombre", Editable: True}3. Registre la edición y guarde eventos al inicializar la tabla en JS
$ ('#tb_departments'). BootstraTable ({{url: '/editable/getDepartment', // Solicitar el método URL (*): 'Get', // Solicitar método (*) Tool Barar: '#ToolBar', // ¿Qué contenedor se rige por el botón de herramienta es verdadero, // dónde mostrar el color cache de color de intervalo de intervalo? Para establecer esta propiedad (*) Pagination: true, // si a mostrar paging (*) ordenable: false, // si habilitar sortOrder: "asc", // Método de clasificación QueryParams: otableInit.QueryParams, // Pasando parámetros (*) SidePagination: "Servidor", // Método de Paging: Cliente Cliente Paging, servidor Paging (*) Pagenumin Primera página PageSize: 10, // Número de registros por página (*) OneditablesVe: function (Field, Row, OldValue, $ El) {$ .Jajax ({Tipo: "Post", URL: "/Editable/Edit", Data: {Strjson: Json.Stringify (Row)}, éxito: Funcion (Data, estado) {if (if (status == "Success") exitoso ");}}, error: function () {alert (" error ");}, completo: function () {}});}});El punto clave es mirar el manejo de este evento.
oneditableVe: function (campo, fila, OldValue, $ el) {$ .AJAX ({type: "post", url: "/editable/edit/edition", data: {strjson: json.stringify (fila)}, éxito: function (data, status) {if (status == "éxito") {alerta ("editora");}}, error: function () {alerta ("error");}, completo: function () {}});}El método correspondiente debe manejar la lógica guardada usted mismo. Los cuatro parámetros campo, fila, OldValue y $ El corresponden al nombre de la columna actual, el objeto de datos de la fila actual, el valor antes de la actualización y el objeto jQuery de la celda actual editada.
4. Ejemplo del código de combinación de fila de tabla y columna
La función de fusión de columna de fila de la tabla no requiere referencia a otros archivos JS. Solo necesita usar Table Colspan y Rowspan en la página CSHTML para lograrlo.
1. Página CSHTML
<table id = "tb_rePort"> <thead> <tr> <th colspan = "4" data-valign = "middle" data-align = "Center"> Q1 </th> <th colspan = "4 4" data-valign = "Middle" data-align = "Center"> trimestre </th> <th colspan = "4" data-valign = "medio" medio " data-align = "Center"> Quarter </th> <th data-field = "totalCount" rowspan = "2" data-valign = "Middle" data-align = "Center"> Resumen anual </th> </tr> <tr> <th data-field = "jancount" data-align = "Center"> Jan </th> <th data-field = "feBCount" " data-align = "Center"> febCount </th> <th data-field = "marcount" data-align = "centro"> marzo </th> <th data-field = "firstQuarter" data-align = "centro"> firstQuarter </th> <th data-field = "aprcount" data-align = "centro"> abril </th> <th data-field = "mayocount" data data-align = "Center"> May </th> <th data-field = "JUNCOUNT" data-align = "Center"> Jun </th> <th data-field = "Secondcarter" data-align = "Center"> Quarter </th> <th data-field = "julCount" data-align = "Center"> julio </th> <th data-field = "agucount" data-Ad "data-" data- "data-" data) Data-Field = "sepCount" data-align = "Center"> sep </th> <th data-field = "ThirdQuarter" data-align = "Center"> cuarto 3 </th> <th data-field = "octcount" data-align = "centro"> octubre </th> <th data-field = "novcunt" data-align = "centro" data-align = "Center"> diciembre </th> <th data-field = "ForthroCarter" data-align = "Center"> Quarter 4 </th> </tr> </thead> </table>
2. No hay una inicialización JS especial
$('#tb_report').bootstrapTable({url: '/GroupColumns/GetReport', //Request URL (*) method: 'get', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button is true, //Where to display the line interval color cache: false, //Whether to use cache, the default is true, so in general, you Debe establecer esta propiedad (*) paginación: true, // si a mostrar paginación (*) sortOrder: "asc", // Método de clasificación QueraRams: otableInit.QueryParams, // Pasando parámetros (*) SidePagination: "Server", // Método de Paging: Cliente Paging, servidor Paging (*) Pagenumbr // Número de líneas de registro por página (*) pagelista: [10, 25, 50, 100], // número de filas por página para seleccionar (*)});¿Qué tal, es fácil? Por supuesto, algunas personas han dicho que puede usar los atributos de la tabla para establecer URL, paginación y otra información sin usar la inicialización de JS, directamente en CSHTML. De hecho, si observamos su API, encontraremos que cada atributo que inicializa corresponde al atributo de una tabla. Escribir como
Si su formulario no tiene algunos eventos especiales para manejar, no hay ningún problema.
5. Ejemplos de código de exportación de datos de tabla
La función de exportación de los datos de la tabla también requiere algún soporte JS extendido.
1. Introducir archivos JS adicionales
<script src = "~/content/bootstrap-table/extensions/export/bootstrap-table-export.js"> </script> <script src = "// rawgit.com/hhurz/tableexport.jquery.plugin/master/tableExport.js"> </script>
2. Cuando se inicializa JS
$ ('#tb_departments'). BootstraTable ({url: '/export/getdepartment', // Método URL (*): 'Get', // Método de solicitud (*) Tool Barbar: '#ToolBar', // ¿Qué contenedor se rige por el botón de la herramienta es verdadero, // dónde mostrar el color de intervalo Cache: False,/? Si a usar Cache, el contenedor, que es verdadero, es verdadero, es cierto que es verdadero, usted es verdadero, lo que necesita en el valor predeterminado, usted es verdadero, usted es verdadero, usted es verdadero, lo que necesita en el valor predeterminado. Establezca esta propiedad (*) Pagination: true, // si a mostrar paging (*) ordenable: false, // si habilita sortOrder: "asc", // Método de clasificación de queryParams: otableInit.QueryParams, // Pasando parámetros (*) SidePagination: "Cliente", // Método de paginación: Client Client Paging, Server Paging (*) Pagenumin Primera página PageSize: 10, // Número de líneas de registro por página (*) pageList: [10, 25, 50, 100], // número de filas por página para seleccionar (*) clickToselect: true, showExport: true, // es exportDatatype Mostrado: "básico", // básico ',' all ',' seleccionado'.columns: [{checkbox: true}, {fiel Nombre '}, {campo:' ParentName ', Title:' Superior Department '}, {Field:' nivel ', título:' Nivel de departamento '}, {campo:' Desc ', título:' Descripción '},]});Veamos los puntos clave: estos dos atributos
showExport: true, // si se debe mostrar exportDatatype: "básico", // básico ',' all ',' seleccionado'.showExport significa si se muestra el botón exportado, exportDatatype significa si el modo exportado es la página actual, todos los datos o datos seleccionados.
6. Resumen
Lo anterior es el efecto de la función y el código simple para implementarla. El blogger descubrió que había varios problemas por resolver.
1. La función de la edición en línea es enviar cada celda al fondo, lo que causará operaciones frecuentes de la base de datos y se sentirá inapropiada. No sé si hay una mejor manera de enviar cada línea al fondo.
2. Aunque la función de exportación es muy útil, desafortunadamente no es compatible con IE Browser. El blogger ha probado el ejemplo en el sitio web oficial, y parece que IE no puede exportarlo. Para ser verificado.
Lo anterior es el contenido relevante del artefacto de componente de la tabla Bootstrap Table [Capítulo final] de la serie de componentes JS presentada por el editor. ¡Espero que sea útil para todos!