Resumen del uso de la mesa de arranque
Bootstrap-Table es un complemento de tabla escrito sobre la base de la mesa de bootstrap, especialmente utilizada para mostrar datos. Bootstrap es de Twitter y actualmente es el marco front-end más popular. Bootstrap se basa en HTML, CSS y JavaScript, y tiene las ventajas del desarrollo frontal simple, flexible y rápido. No describiré lo mismo que Bootstrap aquí. Este artículo se centrará en explicar parte de mi comprensión del uso de la mesa de bootstrap en mi proyecto y cómo aprenderlo.
Primero, permítanme explicar la relación entre jQuery, Bootstrap y Bootstrap-Table. Muchas partes del código Bootstrap involucran a JQuery, es decir, Bootstrap depende de jQuery, y la tabla de arranque que queremos usar se crea en función de Bootstrap, por lo que antes de usar la mesa de bootstrap, debe consultar los archivos JS y CSS relacionados de JQuery y Bootstrap.
A continuación, las características de la tabla de bootstrap: con jQuery-ui, jqgrid y otros complementos de pantalla de mesa, la mesa de bootstrap es plana y liviana. Es más que suficiente para una pantalla de datos ligero, y el soporte para las tablas de padre hijo, etc., también es muy bueno. Lo más importante es que se puede combinar sin problemas con otras etiquetas de arranque.
Bien, eso es todo para la introducción. Cargaré directamente el código y las representaciones y luego daré más discusiones.
<! Doctype html public "-// w3c // dtd xhtml 1.0 estrict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1strict.dtd"> <lte> <title> bootstrap-table </title> <seta http-equiv = " content = "text/html; charset = utf-8"/> <meta name = "descripción" content = ""/> <meta name = "keywords" content = ""/> <script type = "text/javaScript" src = "./ js/jQuery-2.2.1.js"> </script> <script type = "text/javascript" "" src = "./ bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javaScript" src = "./ bootstrap-table/boottstrap-table-all.js"> </script> <script type = "text/javaScript" src = "./ bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <link rel = "stylesheet" type = "text/css" href = "./ bootstrap/css/bootstrap.min.css"> <Link rel = "Stylesheet" type = "Text/css"/css " href = "./ bootstrap-table/bootstrap-table.min.css"> </head> <script language = "javascript"> </script> <body> <body <div> <div> <div> <div> <h3> se agregó cuenta de maestro </h3> </div> <div> <divd id = "barra de herramientas"> <bootin id = "btn_edit type" aria-hidden = "true"> </span> modificar </botón> <botón id = "btn_delete" type = "botón"> <span aria-hidden = "true"> </span> eliminar </boton> </div> <table id = "maestro_table" data-toggle = "table" data-urbl = "./ data.php" data-method = "post" post "post" "post" "post" "post" "post" "post" "post" "post" "post" "post" "post" post "" post "" post "post" "post" "post" post "" post "" post "post" "post" "post" post "" post "post" "post" "post" post "" post "post" post "" post "post" "post" post "post" post "" post "post" "post" post "post" post "post" post "post" post "post" post "post" post ". data-query-params = "queryparams" data-toolbar = "#toolbar" data-pagination = "true" data-search = "true" data-show-reFefresh = "true" show-toggle = "verdadero"-show-columns = "true" data-page-size = "5"> <tr> <th data-field = "name"> usuary cuenta </th> <th> <th> <th-field-field = " contraseña </th> <th data-field = "t_name"> nombre del maestro </th> </tr> </table> </div> </div> </div> </body>
Imagen de reproducción:
Ok, a continuación, analicemos el significado del código anterior en los pasos.
1. En primer lugar, necesitamos descargar el paquete de mesa de arranque jQuery Bootstrap correspondiente. Hay tutoriales en línea, y no describiremos cómo descargarlo aquí.
Desde la referencia a los nombres de archivo JS y CSS en la etiqueta <head> anterior, podemos ver que debemos introducir estos archivos.
Nota Bootstrap, solo hay tres carpetas en el paquete compilado compilado.
1.jquery-2.2.1.js --- el último archivo jQuery
2.Bootstrap.min.js --- el último archivo comprimido bootstrap.min.js en bootstrap/js
3.Bootstrap.min.css --- El último archivo comprimido bootstrap.min.css en bootstrap/css
4.Bootstrap-Table-all.js --- El último archivo JS en Bootstrap-Table
5.Bootstrap-Table-zh-cn.js --- El último archivo inicial chino en bootstrap-table/loce
6.Bootstrap-Table.min.css --- El último archivo comprimido CSS en Bootstrap-Table
Estos seis deben estar configurados, entre los cuales Bootstrap-Table-Zh-CN.JS es un archivo JS que admite el chino. Solo cuando se cargue este archivo, se establecerá parte de nuestra información de visualización en la tabla en chino.
Experimentemos con el efecto de visualización después de eliminar bootstrap-table-zh-cn.js.
Por supuesto, también podemos establecer la información de visualización en otros idiomas, simplemente reemplace Bootstrap-Table-Zh-CN.JS con archivos JS en otros idiomas. Hay soporte en el paquete Bootstrap-Table.
También podemos ver el código fuente en este archivo. Echemos un vistazo y sabrá qué hace este archivo.
/** * Tabla de arranque traducción china * Autor: Zhixin Wen <[email protected]> */(function ($) {'use strict'; $ .fn.bootstraptable.locales ['zh-cn'] = {formatear loadingMessage: function () {return 'work hard para cargar los datos, por favor ...';},},}, formatryspage (PageNumber) {return 'Showing por página' + PageNumber + 'Record'; {return 'no se encontró un registro coincidente'; 'Refresión';
Puede ver de un vistazo que después de citar el archivo JS, al cargar, reza por el efecto de inicialización. Convierta parte de la información mostrada en el contenido medio correspondiente.
2. Luego, hablemos sobre el código HTML relevante. De hecho, esta es la única parte del código HTML relacionado con la mesa bootstrap.
<table id = "maestro_table" data-toggle = "table" data-url = "./ data.php" data-method = "post" data-query-params = "QueryParams" Data-Toolbar = "#Toolbar" Data-Pagination = "True" DataSeing = "True" Show-Infresh = "True" True "Toggle =" verdadero "verdadero" verdadero "verdadero" verdadero "verdadero" verdadero "verdadero" verdadero "verdad" data-page-size = "5"> <thead> <tr> <th data-field = "name"> cuenta de usuario </th> <th data-field = "pwd"> contraseña de usuario </th> <th data-field = "t_name"> nombre del maestro </th> </tr> </thead> </table>
Sí, solo hay una etiqueta de tabla, además de muchos parámetros, y la forma de la tabla se implementa a través de estos parámetros. Debes saber qué estilos y funciones hay. Con solo enumerarlos, definitivamente será una caída en el cubo. Es mejor enseñar a las personas cómo pescar que enseñar a las personas cómo pescar. Te diré dónde encontrar estas categorías. El significado de la clase. Podemos ir al sitio web profesional de Bootstrap-Table para encontrar un enlace que uso. Haga clic para abrir el enlace. Si no es válido, puede ingresar directamente http://bootstrap-table.wenzhixin.net.cn/documentation
Por supuesto, también puede ver algunos ejemplos en el ejemplo
¿Cómo verificamos el significado de los parámetros correspondientes? Cuando ve la imagen de arriba, el lado derecho es algunas opciones, puede elegir los atributos de la tabla, los atributos de fila y los eventos vinculantes que puede establecer.
Haga clic en la tabla Atributo Opciones de tabla para mostrar la siguiente figura. Primero, puede ver que el nombre del título se usa para JS para crear tablas, y el atributo se usa para HTML para crear tablas.
Para dar algunos ejemplos, hay varios parámetros en nuestro código anterior. Lo que significan es:
Data-URL: la URL para solicitar datos.
Método de datos: método de solicitud.
Data-altura: establezca la altura de la tabla
data-query-params = "QueryParams": Configuración
Data-toolbar = "#Barra de herramientas": Establezca el contenedor en el que el botón es ID es la barra de herramientas.
Data-Pagination = "True": Establezca si se muestra el número de página
data-search = "true": establecer el cuadro de búsqueda
data-show-fresh = "true": establecer el botón de actualización
data-show-toggle = "verdadero": Establecer el formato de visualización de datos
¡Ahora debes entender cómo comprobarlo!
Tenga en cuenta que el siguiente código es el núcleo, <tr> representa una cuadrícula en una fila, y Data-Field = "Nombre" representa el nombre de datos en una cuadrícula en una fila. Puede comprender el campo de datos como ID, porque los datos transmitidos desde el fondo se distinguen en función del campo de datos y a quién se envía.
<tr> <th data-field = "name"> cuenta de usuario </th> <th data-field = "pwd"> contraseña de usuario </th> <th data-field = "t_name"> nombre del maestro </th> </tr> </thead>
Para aquellos que no quieren usar la generación estática HTML, también pueden usar JS para generar una generación dinámica. Para dar una demostración de código, para establecer los parámetros relevantes, solo necesita usar el nombre: Opciones mencionadas anteriormente. Por ejemplo, establezca el archivo de destino de datos de datos para la solicitud de datos en html: "./data.php" en js, simplemente declare url: "./data.php"
$ ('#table'). BootStraptable ({columns: [{campo: 'id', título: 'item id'}, {campo: 'nombre', título: 'nombre de elemento'}, {campo: 'precio', título: 'Price de ítem'}], datos: [{id: 1, nombre: 'Elemento 1', precio: '$ 1'}, {id: 2, nombre: nombre: 'ítem:' precio: '$ 2', ',', '$ 2', ',', ',', '$ 2', ',', ',', '$ 2', ',', ',' $ 2, }]});3. De esta manera, ¿qué hacen otros códigos? Parte del código usa el panel en Boostrap para formatear, es decir, para incrustar la tabla en el panel. El efecto de la mesa de bootstrap después del código del panel eliminado es como este
Es solo que no hay panel.
4. El formato de transmisión de datos, los datos recibidos por Bootstrap-Table están en formato JSON de forma predeterminada
Puede ver anteriormente que la dirección de fondo solicitada es: "./data.php", echemos un vistazo a su contenido
<? Php $ Resultados [0] = Array ("Nombre" => "AOZE", "PWD" => "20132588", "t_name" => "zhang san"); $ Resultados [1] = Array ("nombre" => "lisi", "pwd" => "1234", "t_name" => "li si"); $ resultados [2] = array ("name" => "wangwu", "pwd" => "44455", "t_name" => "wang wu"); echo json_encode ($ resultados) ;?>¡Es muy simple! Por supuesto, estos son solo algunos datos de prueba que he escrito a mano y, por supuesto, se encuentra en la base de datos en el proyecto.
5. Por supuesto, no es suficiente para mostrar datos. Necesitamos interactuar con la tabla, como las funciones de eliminación y modificación. En este momento, necesitamos usar algunos eventos de la mesa de bootstrap. En el caso anterior, he incrustado dos componentes de botones en la tabla como se muestra en la figura
El método para implementar este mosaico es agregar dicha línea de datos de datos = "#Barra de herramientas" a las propiedades de la tabla.
Significa agregar una etiqueta con ID como barra de herramientas a una línea en la barra de herramientas.
En mi implementación de este proyecto, debe usar estos dos botones para realizar las operaciones correspondientes en la fila seleccionada en la tabla.
Escriba el evento correspondiente, primero vincule un evento de activación seleccionado a la tabla y luego obtenga los datos de la fila seleccionada a través de la función GetSelectrow.
$ ('##maestro_table'). on ('click-Row.bs.table', function (e, fila, elemento) {$ ('. Success'). RemoveClass ('Success'); // Eliminar la fila previamente seleccionada, seleccione el estilo $ (Element) .addClass ('Success'); // Agregar el estilo de éxito actualmente seleccionado para la diferencia}); función getSelectedRow () {var index = $ ('#maestro_table'). find ('tr.success'). data ('index'); // Obtenga la fila seleccionada return $ ('#maestro_table'). bootstraptable ('getData') [index]; // devuelve todos los datos en la fila seleccionada}Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de la mesa de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.