Téléchargement KingTable - Téléchargement du code source KingTable

KingTable

Autres catégories

1.0.0

Télécharger

KingTable

Bibliothèque de tables administratives capables de se construire elles-mêmes, sur la base de leurs données d'entrée. Prend en charge la pagination côté client et serveur ; recherche côté client et serveur ; vues de filtres personnalisés ; menu automatique pour masquer les colonnes et prise en charge des outils personnalisés. Fonctionnalité d'exportation côté client vers : formats csv, json, xml, Excel xlsx (à l'aide du plugin).

Objectifs de la bibliothèque

Permettre la mise en œuvre de tables administratives avec le moins de code possible.
Permet une personnalisation facile du HTML généré, pour s'adapter aux différents besoins : par exemple, affichage des vignettes des images, des balises d'ancrage, etc.
Prend en charge à la fois les collections qui nécessitent une pagination côté serveur et les collections qui ne nécessitent pas de pagination côté serveur, mais peuvent néanmoins bénéficier de la pagination côté client.
Évitez les dépendances de bibliothèques tierces, pour être réutilisable avec tout autre type de bibliothèque (c'est du JavaScript simple)

Démo en direct

Les démos suivantes sont disponibles en ligne :

Index des démos
Démo de couleurs (HTML riche, avec export vers Excel xlsx)
Démo People (HTML riche, avec export vers Excel xlsx)
Démo People (HTML brut, sans gestionnaires)
Démo de personnes (texte brut)
Comment afficher des images
Formatage des montants et des devises

Notez comment les filtres sont automatiquement conservés lors de l'actualisation de la page. Par exemple, en utilisant la fonction de recherche ou en changeant de page dans l'une des démos HTML riches, puis en appuyant sur F5. Lors de la recherche, notez comment l'algorithme de recherche côté client trie également les résultats par pertinence (nombre d'occurrences, ordre des propriétés qui génèrent une correspondance).

NB : toutes ces démos sont des tables fixes : des tables qui ont toutes les informations chargées en mémoire, paginées et filtrées côté client. Pour voir des exemples de tables paginées à l'aide de requêtes AJAX (côté serveur), consultez la documentation dédiée et le serveur de développement fourni dans le référentiel.

Installer en utilisant npm

La bibliothèque KingTable peut être installée à l'aide de npm.

npm install kingtable

Les modules peuvent ensuite être importés en utilisant la syntaxe CommonJS :

 var KingTable = require ( "kingtable" )
var KingTableUtils = require ( "kingtable/utils" )

Ou la syntaxe d'importation ES6 :

 import KingTable from "kingtable"
import KingTableUtils from "kingtable/utils"

Utiliser le téléchargement de fichiers de distribution

La bibliothèque KingTable peut être utilisée en téléchargeant et en utilisant des fichiers de distribution, dans le dossier dist .

 < script src =" kingtable.js " > </ script >

Thèmes

Version précédente

La version précédente de la bibliothèque KingTable est disponible sur : https://github.com/RobertoPrevato/jQuery-KingTable.

Documentation

Reportez-vous à la page wiki. Une liste complète des options possibles est disponible dans la page Options dédiée.

Caractéristiques de la nouvelle version

Voici un tableau répertoriant les fonctionnalités ajoutées à KingTable 2.0.

Fonctionnalité	Description
Code source ES6	Code source ES6, la bibliothèque est transpilée vers ES5 pour distribution.
Code source testé unitairement	Le code source est intégré aux tâches Gulp, Karma, Jasmine pour les tests unitaires. Plus de 300 tests - encore à développer !
Dépendances supprimées	Dépendance supprimée de jQuery, Lodash, I.js, R.js.
Exceptions améliorées	Les exceptions générées incluent un lien vers le wiki GitHub avec des instructions détaillées.
Logique améliorée pour récupérer les données	Permet de choisir entre la méthode HTTP GET (filtres dans la chaîne de requête) ou la méthode HTTP POST (filtres sous forme de données JSON POST).
Cache LRU	Mécanisme de mise en cache le moins récemment utilisé pour mettre en cache les n dernières pages par filtres, afin de réduire le nombre de requêtes AJAX.
Logique de récupération des données de table	Permet de définir des fonctions qui renvoient les données nécessaires au rendu du tableau lui-même (par exemple, dictionnaires pour les vues de filtres personnalisés)
Mise en cache des filtres	Les filtres pour chaque table sont mis en cache à l'aide du stockage côté client (configurable), de sorte qu'ils sont conservés lors de l'actualisation de la page.
Tri CS amélioré	Les chaînes qui peuvent être triées comme des nombres (comme "25%", "25,40 EUR", "217°") sont automatiquement analysées comme des nombres lors du tri.
Tri CS amélioré	Tri côté client par plusieurs propriétés.
Recherche CS améliorée	La fonctionnalité de recherche côté client a été améliorée : la recherche fonctionne dans les représentations sous forme de chaînes de dates, de nombres et d'autres chaînes formatées dépendantes de la culture.
Prise en charge améliorée des gestionnaires d'événements	Les gestionnaires d'événements personnalisés reçoivent automatiquement l'élément cliqué en tant que paramètre, le cas échéant.
Prise en charge améliorée des boutons personnalisés	Il est désormais possible de configurer des champs supplémentaires (tels que des boutons) à afficher pour chaque élément.
Prise en charge améliorée des autres médias	Prise en charge des applications console NodeJS et du rendu des tableaux HTML pour les corps des e-mails envoyés à l'aide de NodeJS.

Modes

La bibliothèque KingTable implémente deux modes de travail :

corrigé (collections qui ne nécessitent pas de pagination côté serveur)
normal (collections qui nécessitent une pagination côté serveur)

Et prend en charge les collections optimisées et simples. Reportez-vous à la page wiki dédiée pour plus d'informations.

Mode fixe

Une table fixe affiche une collection qui ne nécessite pas de pagination côté serveur, mais qui peut néanmoins bénéficier d'une pagination côté client. Lorsque l'on travaille sur des applications, il arrive souvent d'avoir affaire à des collections qui ne sont pas destinées à s'agrandir avec le temps et qui sont de petite taille. Par exemple, un tableau des catégories dans un site de commerce électronique pour vendre des vêtements, ou un tableau des rôles des utilisateurs dans la plupart des applications. Dans ces cas-là, il est judicieux de restituer des collections entières aux clients. Il existe deux manières de définir une KingTable fixe :

instancier une KingTable avec l'URL d'où récupérer une collection ; puis codez le côté serveur pour renvoyer un tableau d'éléments
instancier une KingTable en passant une option data avec une instance de array : dans ce cas, on suppose que la collection est fixe

 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"
} ) ;

Les tables fixes effectuent la recherche et la pagination côté client.

Mode normal

Un tableau normal affiche une collection qui nécessite une pagination côté serveur, car elle est censée croître avec le temps. Cela est vrai dans la plupart des cas, par exemple dans les tableaux de produits et de clients d’un site e-commerce.

 var table = new KingTable ( {
  url : "/api/profiles"
} ) ;

Lors de la réception d'une réponse AJAX, une table normale s'attend à recevoir la structure suivante :

 {
  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
}

Convivialité

La bibliothèque KingTable comprend un certain nombre de fonctionnalités pour améliorer la convivialité, à la fois pour l'utilisateur final et pour les programmeurs utilisant la bibliothèque :

l'utilisateur doit être capable de comprendre immédiatement la taille de la collection, la barre de pagination est donc conçue pour afficher le nombre total de lignes ; de pages et le nombre de résultats actuellement affichés
tous les filtres sont automatiquement stockés dans le stockage ( sessionStorage configurable, localStorage ou objet compatible) et conservés lors de l'actualisation de la page - les filtres sont collectés par URL et, si possible, par identifiant de table
les éléments ci-dessus incluent : le numéro de page, la taille de la page, les critères de tri, la recherche de texte et des filtres supplémentaires qui peuvent être implémentés par le programmeur.
les données sont stockées pendant un nombre configurable de millisecondes, pour éviter les appels AJAX inutiles (mécanisme de mise en cache LRU)
prise en charge des boutons de navigation du navigateur
les erreurs ajax et l'état de chargement sont automatiquement gérés

Pour plus d’informations, reportez-vous à la page wiki dédiée.

À propos de la localisation

Pour des informations complètes, reportez-vous à la page wiki dédiée. La bibliothèque KingTable inclut une logique pour implémenter la localisation côté client, qui est utilisée pour afficher les noms propres des boutons (actualisation, numéro de page, résultats par page, etc.).