La tabla Bootstrap es datos livianos y ricos en características que se muestran en forma de tabla, admitiendo una selección única, casillas de verificación, clasificación, paginación, visualización/oculta columnas, tabla de desplazamiento de título fijo, diseño receptivo, carga de AJAX que carga los datos JSON, las columnas clasificadas, las vistas de tarjetas, etc. Hoy, introduzcamos su uso ligeramente más avanzado en combinación con el uso de los tables de columna de la hilera y el orden de los boots de boots.
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]
1. Muestra de efecto
Hoy cambiaré ligeramente el siguiente método. Primero echemos un vistazo al efecto de implementación y luego introduzcamos la implementación y precauciones del código más adelante. Vamos, enviemos las representaciones:
1. Rendimiento de la mesa de padre e hijo
2. Orden de fila
Antes de ordenar
Arrastre la línea para ordenarla a la primera línea
3. Orden de columna
Antes de ordenar
DRAST COLUMBOR TITAR
Después de ordenar
2. Explicación detallada del código de tabla padre-hijo
En el capítulo anterior, presentamos el uso básico de la tabla de arranque. Al inicializar la tabla, hay una propiedad "DetellView". Contáctalo en True, y puede ver un icono en forma de "+" frente a cada fila. Al hacer clic en este icono, desencadena el evento que carga la subtendible. Este es el principio general. Veamos el código, en realidad es muy simple.
1. Inicializar la tabla y registrar la línea para expandir el evento
$ ("#tb_powerset"). bootstraptable ({url: '/api/menuapi/getParentMenu', método: 'get', detallview: verdadero, // tabla matriz e infantil // lateral: "servidor", pageSize: 10, pageList: [10, 25], columnas: [{Campo: 'Menu_name', Title Title: 'Menú Nombre de menú:' 'Menu_url', Título: 'Menú url'}, {campo: 'Parent_id', Título: 'Menú principal'}, {Field: 'Menu_Level', Title: 'Men Level'},], // Registro de eventos que cargan los subtables de los tres parámetros aquí.Echemos un vistazo a los tres parámetros de la función del método correspondiente (índice, fila, $ detalle) del evento de carga subtendible Onexpandrow.
Índice: el índice de fila de la fila actual de la tabla principal.
Fila: objeto de datos JSON de la fila actual de la tabla principal.
$ Detalle: el objeto TD en la nueva fila creada en la fila actual.
El tercer parámetro es particularmente importante porque la tabla de subtablos generada se carga en el objeto $ Detalle. La tabla Bootstrap genera el objeto $ Detalle para nosotros, y luego solo necesitamos llenarla con la tabla que queremos.
2. Veamos el método oinit.initsubtable ()
// Inicializar SubTable (Wireless Loop) oinit.initsUbtable = function (index, fila, $ detall) {var parentId = row.menu_id; var cur_table = $ detall.html ('<table> </table>'). Find ('table'); $ (cur_table) .BootStraptable ({URL: '/api/api/getChildRenmenmenu. 'get', QueryParams: {strParentId: ParentId}, AjaxOptions: {strParentId: parentId}, clickToSelect: true, detallview: true, // la tabla parent-child uniqueid: "menú_id", pageSize: 10, pageList: [10, 25], columnas: [{chequeBox: true}, {campo: ' nombre '}, {campo:' menú_url ', título:' menú url '}, {campo:' parent_id ', title:' menú parent {oinit.initsubtable (index, fila, $ subdetail);}});};A partir de esto, podemos ver que el principio de generar un subtendible es crear un objeto de tabla cur_table, y luego registrar la inicialización de la tabla de este objeto. ¿No es muy simple ~~
3. Explicación detallada del código de pedido de línea
El código de pedido de línea es más simple, echemos un vistazo.
1. Se requieren dos referencias adicionales
<script src = "~/content/jQuery-ui-1.11.4.custom/external/jQuery.tablednd.js"> </script> <script src = "~/content/bootstrap-table/extensions/reorder-rows/bootstrap-table-sorder-rows.js"> </script>
2. Al definir una tabla en la página CSHTML, agregue dos atributos
<table id = "tb_order" data-use-row-attr-func = "true" data-reorderable-rows = "true"> </table>
Luego, no es necesario hacer modificaciones al inicializar la tabla JS, y la tabla cargada puede realizar la función de pedido de filas.
4. Explicación detallada del código de pedido de columnas
Similar al orden de línea. El pedido de columnas se usa de la siguiente manera:
1. Referencia a algunos JS y CSS adicionales
<script src = "~/content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"> </script> <link rel = "stylesheet" href = "../ assets/ejemplos.css"> <link rel = "stylesheet" href = "https://rawgit.com/akottr/dragtable/master/dragtable.css"> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script> <script src = "https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"> </script> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
2. Al definir una tabla en la página CSHTML, agregue un atributo
<table id = "tb_departments" data-reordenable-columns = "true"> </table>
No se requieren modificaciones en otro lugar. La tabla cargada puede realizar el pedido de columnas. ¿Es fácil?
5. Filtrado de control
Originalmente, este artículo estaba a punto de terminar, de repente recordé que había una función de búsqueda en el capítulo anterior. Parecía que la función de búsqueda no podía usarse cuando se usó la paginación del servidor. Así que recordé que tenía una función similar a filtrar cada columna en CS antes. El blogger fue curioso nuevamente. ¿La tabla de bootstrap también tiene este tipo de filtración de cada columna en la tabla, por lo que revisé el documento? El resultado se cumple, y realmente hay algo ~~ echemos un vistazo.
1. Visualización de representaciones
2. Ejemplos de código
(1) Introducir JS adicional
<script src = "~/content/bootstrap-table/extensions/filtre-Control/bootstrap-table-filter-confontrol.js"> </script>
(2) Definir atributos de tabla y atributos de encabezado
<table id = "tb_roles" data-filter-confontrol = "true"> <thead> <tr> <th data-field = "rol_name" data-filter-confontrol = "seleccione"> Nombre de rol </th> <th data-field = "descripción" data-filter-filter-control = "entrada"> Descripción de roles </th> <th data-field = "role_defaultl" Data-filter-confontrol = "Entrada"> Página predeterminada de rol </th> </tr> </tead> </table>
Debido a que los atributos del encabezado de la tabla se definen aquí, no hay necesidad de definir columnas al inicializar JS.
(3) Inicialización JS
$ ('#tb_roles'). bootstraptable ({url: '/rol/getrole', método: 'get', barra de herramientas: '#barra de herramientas', rayed: true, cache: false, rayed: true, pagination: true, sortable: true, queryParams: function (param) {return param;}, Queryparamstype: "Limit", Limit ", DetailView,////////////TABLE Paginación lateral: "servidor", PageSize: 10, pageList: [10, 25, 50, 100], Búsqueda: Verdadero, ShowColumns: True, ShowRefresh: Verdadero, Mínimo Columns: 2, ClickToselect: True,});Al principio, el blogger pensó que este tipo de búsqueda solo podía estar pagando al cliente de los usuarios, pero después de la depuración, no fue el caso. Las condiciones de búsqueda originales podrían pasar al servidor a través de JSON. Veamos el proceso de depuración
Recibir parámetros en segundo plano y deserializarlos
De esta manera, podemos pasar bien las condiciones de consulta al fondo. Muy bueno y poderoso. Esto eliminará el problema de expandir la función de búsqueda de tabla ~~
6. Resumen
Los anteriores son algunas aplicaciones de extensión de la tabla de arranque. Puede que no esté incompleto, y hay algunos usos avanzados que no se introducen, como la fusión de filas y columnas, congelación de filas y columnas, etc.
El contenido anterior es el conocimiento relevante del artefacto de componente de la tabla Bootstrap Table [2. Padre e hijo Tabla y orden de fila y columna] lo presentó el editor. ¡Espero que sea útil para todos!