KingTable
1.0.0
Biblioteca de tablas administrativas que pueden construirse por sí mismas a partir de sus datos de entrada. Admite paginación del lado del cliente y del servidor; búsqueda del lado del cliente y del servidor; vistas de filtros personalizados; Menú automático para ocultar columnas y soporte para herramientas personalizadas. Función de exportación del lado del cliente a formatos: csv, json, xml, Excel xlsx (usando complemento).
Las siguientes demostraciones están disponibles en línea:
Observe cómo los filtros persisten automáticamente al actualizar la página. Por ejemplo, usar la función de búsqueda o cambiar de página en una de las demostraciones de HTML enriquecido y luego presionar F5. Al realizar una búsqueda, observe cómo el algoritmo de búsqueda del lado del cliente también ordena los resultados por relevancia (número de apariciones, orden de las propiedades que generan una coincidencia).
NB: todas estas demostraciones son tablas fijas : tablas que tienen toda la información cargada en la memoria, paginada y filtrada en el lado del cliente. Para ver ejemplos de tablas paginadas usando solicitudes AJAX (en el lado del servidor), consulte la documentación dedicada y el servidor de desarrollo proporcionado en el repositorio.
La biblioteca KingTable se puede instalar usando npm.
npm install kingtableLuego, los módulos se pueden importar usando la sintaxis de CommonJS:
var KingTable = require ( "kingtable" )
var KingTableUtils = require ( "kingtable/utils" )O sintaxis de importación de ES6:
import KingTable from "kingtable"
import KingTableUtils from "kingtable/utils" La biblioteca KingTable se puede utilizar descargando y usando archivos de distribución, en la carpeta dist .
< script src =" kingtable.js " > </ script > La versión anterior de la biblioteca KingTable está disponible en: https://github.com/RobertoPrevato/jQuery-KingTable.
Consulte la página wiki. Una lista completa de posibles opciones está disponible dentro de la página de Opciones dedicada.
A continuación se muestra una tabla que enumera las funciones que se agregaron a KingTable 2.0.
| Característica | Descripción |
|---|---|
| código fuente ES6 | Código fuente de ES6, la biblioteca se transpila a ES5 para su distribución. |
| Código fuente probado unitariamente | El código fuente está integrado con tareas Gulp, Karma, Jasmine para pruebas unitarias. Más de 300 pruebas: ¡todavía por crecer! |
| Dependencias eliminadas | Se eliminó la dependencia de jQuery, Lodash, I.js, R.js. |
| Excepciones mejoradas | Las excepciones planteadas incluyen un enlace a la wiki de GitHub con instrucciones detalladas. |
| Lógica mejorada para recuperar datos. | Permite elegir entre el método HTTP GET (filtros en la cadena de consulta) o el método HTTP POST (filtros como datos JSON POST). |
| caché LRU | Mecanismo de almacenamiento en caché utilizado menos recientemente para almacenar en caché las últimas n páginas mediante filtros, para reducir el número de solicitudes AJAX. |
| Lógica de recuperación de datos de tabla | Permite definir funciones que devuelven los datos necesarios para representar la tabla en sí (por ejemplo, diccionarios para vistas de filtros personalizados) |
| Almacenamiento en caché de filtros | Los filtros para cada tabla se almacenan en caché utilizando el almacenamiento del lado del cliente (configurable), por lo que persisten al actualizar la página. |
| Clasificación CS mejorada | Las cadenas que se pueden ordenar como números (como "25%", "25,40 EUR", "217°") se analizan automáticamente como números al ordenar. |
| Clasificación CS mejorada | Clasificación del lado del cliente por múltiples propiedades. |
| Búsqueda de CS mejorada | Se ha mejorado la función de búsqueda del lado del cliente: la búsqueda funciona en representaciones de cadenas de fechas y números y otras cadenas formateadas que dependen de la cultura. |
| Soporte mejorado para controladores de eventos. | Los controladores de eventos personalizados reciben automáticamente el elemento en el que se hizo clic como parámetro, si corresponde. |
| Soporte mejorado para botones personalizados | Ahora es posible configurar campos adicionales (como botones) para que se representen para cada elemento. |
| Soporte mejorado para otros medios. | Soporte para aplicaciones de consola NodeJS y representación de tablas HTML para cuerpos de correo electrónico enviados mediante NodeJS. |
La biblioteca KingTable implementa dos modos de trabajo:
Y admite colecciones optimizadas y simples. Consulte la página wiki dedicada para obtener más información.
Una tabla fija muestra una colección que no requiere paginación del lado del servidor, pero aún puede beneficiarse de la paginación del lado del cliente. Cuando se trabaja en aplicaciones, normalmente se trata de colecciones que no están destinadas a crecer con el tiempo y que tienen un tamaño pequeño. Por ejemplo, una tabla de categorías en un sitio web de comercio electrónico para vender ropa, o una tabla de roles de usuario en la mayoría de aplicaciones. En estos casos, tiene sentido devolver colecciones enteras a los clientes. Hay dos formas de definir una KingTable fija:
var table = new KingTable ( {
data : [ { ... } , { ... } , { ... } ]
} ) ;
//or... code the server side to return an array of items (instead of an object describing a paginated set of results)
var table = new KingTable ( {
element : document . getElementById ( "my-table" ) ,
url : "/api/categories"
} ) ;Las tablas fijas realizan búsqueda y paginación en el lado del cliente.
Una tabla normal es aquella que muestra una colección que requiere paginación del lado del servidor, ya que está destinada a crecer con el tiempo. Esto es cierto en la mayoría de los casos, por ejemplo, tablas de productos y clientes en un sitio web de comercio electrónico.
var table = new KingTable ( {
url : "/api/profiles"
} ) ;Al recibir una respuesta AJAX, una tabla normal espera recibir la siguiente estructura:
{
subset : [ array ] , // array of items that respect the given filters
total : [ number ] // the total count of items that respect the given filters; excluding the pagination: for example 13000
} La biblioteca KingTable incluye una serie de características para mejorar la usabilidad, tanto para el usuario final como para los programadores que utilizan la biblioteca:
sessionStorage configurable, localStorage u objeto compatible) y persisten al actualizar la página; los filtros se recopilan por URL y, si es posible, por ID de tablaPara obtener más información, consulte la página wiki dedicada.
Para obtener información completa, consulte la página wiki dedicada. La biblioteca KingTable incluye lógica para implementar la localización del lado del cliente, que se utiliza para mostrar los nombres propios de los botones (actualizar, número de página, resultados por página, etc.).
Consulte la página wiki dedicada para obtener instrucciones sobre cómo integrarse con su proyecto y con el código del lado del servidor.
