KingTable
1.0.0
Biblioteca de tabelas administrativas que podem ser construídas sozinhas, com base nos seus dados de entrada. Suporta paginação do lado do cliente e do servidor; pesquisa do lado do cliente e do servidor; visualizações de filtros personalizados; menu automático para ocultar colunas e suporte para ferramentas personalizadas. Recurso de exportação do lado do cliente para: formatos csv, json, xml, Excel xlsx (usando plugin).
As seguintes demonstrações estão disponíveis online:
Observe como os filtros persistem automaticamente na atualização da página. Por exemplo, usando o recurso de pesquisa ou alterando a página em uma das demonstrações avançadas em HTML e, em seguida, pressionando F5. Ao pesquisar, observe como o algoritmo de pesquisa do lado do cliente também classifica os resultados por relevância (número de ocorrências, ordem das propriedades que geram uma correspondência).
Obs: todas essas demos são tabelas fixas : tabelas que possuem todas as informações carregadas na memória, paginadas e filtradas no lado do cliente. Para ver exemplos de tabelas paginadas usando solicitações AJAX (no lado do servidor), consulte a documentação dedicada e o servidor de desenvolvimento fornecidos no repositório.
A biblioteca KingTable pode ser instalada usando npm.
npm install kingtableOs módulos podem então ser importados usando a sintaxe CommonJS:
var KingTable = require ( "kingtable" )
var KingTableUtils = require ( "kingtable/utils" )Ou sintaxe de importação ES6:
import KingTable from "kingtable"
import KingTableUtils from "kingtable/utils" A biblioteca KingTable pode ser usada baixando e usando arquivos de distribuição, na pasta dist .
< script src =" kingtable.js " > </ script > A versão anterior da biblioteca KingTable está disponível em: https://github.com/RobertoPrevato/jQuery-KingTable.
Consulte a página wiki. Uma lista completa de opções possíveis está disponível na página Opções dedicada.
A seguir está uma tabela listando os recursos que foram adicionados ao KingTable 2.0.
| Recurso | Descrição |
|---|---|
| Código fonte ES6 | Código-fonte ES6, biblioteca é transpilada para ES5 para distribuição. |
| Código-fonte testado na unidade | O código-fonte é integrado às tarefas Gulp, Karma, Jasmine para testes unitários. Mais de 300 testes - ainda para crescer! |
| Dependências removidas | Dependência removida de jQuery, Lodash, I.js, R.js. |
| Exceções aprimoradas | As exceções levantadas incluem um link para o wiki do GitHub com instruções detalhadas. |
| Lógica aprimorada para buscar dados | Permite escolher entre o método HTTP GET (filtra na string de consulta) ou o método HTTP POST (filtra como dados JSON POST). |
| Cache LRU | Mecanismo de cache menos usado recentemente para armazenar em cache as últimas n páginas por filtros, para reduzir o número de solicitações AJAX. |
| Lógica de busca de dados da tabela | Permite definir funções que retornam dados necessários para renderizar a própria tabela (por exemplo, dicionários para visualizações de filtros personalizados) |
| Cache de filtros | Os filtros para cada tabela são armazenados em cache usando o armazenamento do lado do cliente (configurável), portanto, persistem após a atualização da página. |
| Classificação CS aprimorada | Strings que podem ser classificadas como números (como "25%", "25,40 EUR", "217°") são automaticamente analisadas como números durante a classificação. |
| Classificação CS aprimorada | Classificação do lado do cliente por múltiplas propriedades. |
| Pesquisa CS aprimorada | O recurso de pesquisa do lado do cliente foi aprimorado: a pesquisa funciona em representações de strings dependentes de cultura de datas e números e outras strings formatadas. |
| Suporte aprimorado para manipuladores de eventos | Os manipuladores de eventos personalizados recebem automaticamente o item clicado como parâmetro, se aplicável. |
| Suporte aprimorado para botões personalizados | Agora é possível configurar campos extras (como botões) a serem renderizados para cada item. |
| Suporte aprimorado para outras mídias | Suporte para aplicativos de console NodeJS e renderização de tabelas HTML para corpos de e-mail enviados usando NodeJS. |
A biblioteca KingTable implementa dois modos de trabalho:
E oferece suporte a coleções otimizadas e simples. Consulte a página wiki dedicada para obter mais informações.
Uma tabela fixa exibe uma coleção que não requer paginação no servidor, mas ainda pode se beneficiar da paginação no cliente. Ao trabalhar em aplicativos, geralmente lidamos com coleções que não devem crescer com o tempo e são de tamanho pequeno. Por exemplo, uma tabela de categorias em um site de comércio eletrônico para vender roupas ou uma tabela de funções de usuário na maioria dos aplicativos. Nestes casos, faz sentido devolver coleções inteiras aos clientes. Existem duas maneiras de definir uma KingTable fixa:
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"
} ) ;Tabelas fixas realizam pesquisa e paginação no lado do cliente.
Uma tabela normal é aquela que exibe uma coleção que requer paginação no servidor, uma vez que deve crescer com o tempo. Isto é verdade na maioria dos casos, por exemplo, tabelas de produtos e clientes em um site de comércio eletrônico.
var table = new KingTable ( {
url : "/api/profiles"
} ) ;Ao receber uma resposta AJAX, uma tabela normal espera receber a seguinte estrutura:
{
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
} A biblioteca KingTable inclui vários recursos para melhorar a usabilidade, tanto para o usuário final quanto para os programadores que utilizam a biblioteca:
sessionStorage , localStorage ou objeto compatível) e persistidos na atualização da página - os filtros são coletados por URL e, se possível, ID da tabelaPara mais informações, consulte a página wiki dedicada.
Para obter informações completas, consulte a página wiki dedicada. A biblioteca KingTable inclui lógica para implementar a localização do lado do cliente, que é usada para exibir nomes próprios de botões (atualização, número de página, resultados por página, etc.).
Consulte a página wiki dedicada para obter instruções sobre como integrar com seu projeto e com o código do lado do servidor.
