KingTable
1.0.0
Bibliothek für Verwaltungstabellen, die sich auf Basis ihrer Eingabedaten selbst erstellen können. Unterstützt client- und serverseitige Paginierung; client- und serverseitige Suche; benutzerdefinierte Filteransichten; Automatisches Menü zum Ausblenden von Spalten und Unterstützung für benutzerdefinierte Tools. Clientseitige Exportfunktion in die Formate CSV, JSON, XML, Excel XLSX (mit Plugin).
Die folgenden Demos sind online verfügbar:
Beachten Sie, dass Filter bei der Seitenaktualisierung automatisch beibehalten werden. Verwenden Sie beispielsweise die Suchfunktion oder wechseln Sie die Seite in einer der Rich-HTML-Demos und drücken Sie dann F5. Beachten Sie bei der Suche, wie der clientseitige Suchalgorithmus die Ergebnisse auch nach Relevanz sortiert (Anzahl des Vorkommens, Reihenfolge der Eigenschaften, die eine Übereinstimmung generieren).
Hinweis: Alle diese Demos sind feste Tabellen : Tabellen, bei denen alle Informationen in den Speicher geladen, auf der Clientseite paginiert und gefiltert werden. Beispiele für Tabellen, die mithilfe von AJAX-Anfragen (auf der Serverseite) paginiert werden, finden Sie in der dedizierten Dokumentation und auf dem Entwicklungsserver im Repository.
Die KingTable-Bibliothek kann mit npm installiert werden.
npm install kingtableModule können dann mit der CommonJS-Syntax importiert werden:
var KingTable = require ( "kingtable" )
var KingTableUtils = require ( "kingtable/utils" )Oder ES6-Importsyntax:
import KingTable from "kingtable"
import KingTableUtils from "kingtable/utils" Die KingTable-Bibliothek kann durch Herunterladen und Verwenden von Verteilungsdateien im dist Ordner verwendet werden.
< script src =" kingtable.js " > </ script > Die vorherige Version der KingTable-Bibliothek ist verfügbar unter: https://github.com/RobertoPrevato/jQuery-KingTable.
Weitere Informationen finden Sie auf der Wiki-Seite. Eine vollständige Liste der möglichen Optionen finden Sie auf der speziellen Optionsseite.
Nachfolgend finden Sie eine Tabelle mit den Funktionen, die KingTable 2.0 hinzugefügt wurden.
| Besonderheit | Beschreibung |
|---|---|
| ES6-Quellcode | ES6-Quellcode, Bibliothek wird zur Verteilung nach ES5 transpiliert. |
| Unit-getesteter Quellcode | Der Quellcode ist für Unit-Tests in Gulp-Aufgaben, Karma und Jasmine integriert. Mehr als 300 Tests – noch zu wachsen! |
| Abhängigkeiten entfernt | Abhängigkeit von jQuery, Lodash, I.js, R.js entfernt. |
| Verbesserte Ausnahmen | Zu den ausgelösten Ausnahmen gehört ein Link zum GitHub-Wiki mit detaillierten Anweisungen. |
| Verbesserte Logik zum Abrufen von Daten | Ermöglicht die Auswahl zwischen der HTTP-GET-Methode (Filter in der Abfragezeichenfolge) oder der HTTP-POST-Methode (Filter als JSON-POST-Daten). |
| LRU-Cache | Least-Recent-Used -Caching-Mechanismus zum Zwischenspeichern der letzten n Seiten durch Filter, um die Anzahl der AJAX-Anfragen zu reduzieren. |
| Logik zum Abrufen von Tabellendaten | Ermöglicht die Definition von Funktionen, die Daten zurückgeben, die zum Rendern der Tabelle selbst erforderlich sind (z. B. Wörterbücher für benutzerdefinierte Filteransichten). |
| Caching von Filtern | Filter für jede Tabelle werden mithilfe des clientseitigen Speichers (konfigurierbar) zwischengespeichert, sodass sie bei der Seitenaktualisierung beibehalten werden. |
| Verbesserte CS- Sortierung | Zeichenfolgen, die wie Zahlen sortiert werden können (z. B. „25 %, „25,40 EUR“, „217°“), werden beim Sortieren automatisch als Zahlen geparst. |
| Verbesserte CS- Sortierung | Clientseitige Sortierung nach mehreren Eigenschaften. |
| Verbesserte CS- Suche | Die clientseitige Suchfunktion wurde verbessert: Die Suche funktioniert in kulturabhängigen Zeichenfolgendarstellungen von Datums- und Zahlenangaben sowie anderen formatierten Zeichenfolgen. |
| Verbesserte Unterstützung für Event-Handler | Benutzerdefinierte Ereignishandler erhalten ggf. automatisch das angeklickte Element als Parameter. |
| Verbesserte Unterstützung für benutzerdefinierte Schaltflächen | Es ist jetzt möglich, zusätzliche Felder (z. B. Schaltflächen) zu konfigurieren, die für jedes Element gerendert werden. |
| Verbesserte Unterstützung für andere Medien | Unterstützung für NodeJS-Konsolenanwendungen und HTML-Tabellen-Rendering für E-Mail-Texte, die mit NodeJS gesendet werden. |
Die KingTable-Bibliothek implementiert zwei Arbeitsmodi:
Und unterstützt sowohl optimierte als auch einfache Sammlungen. Weitere Informationen finden Sie auf der entsprechenden Wiki-Seite.
Eine feste Tabelle zeigt eine Sammlung an, die keine serverseitige Paginierung erfordert, aber dennoch von einer clientseitigen Paginierung profitieren kann. Bei der Arbeit an Anwendungen kommt es häufig vor, dass es sich um Sammlungen handelt, die nicht dazu gedacht sind, mit der Zeit zu wachsen, und die eine geringe Größe haben. Beispielsweise eine Tabelle mit Kategorien auf einer E-Commerce-Website zum Verkauf von Kleidung oder eine Tabelle mit Benutzerrollen in den meisten Anwendungen. In diesen Fällen ist es sinnvoll, ganze Kollektionen an die Kunden zurückzugeben. Es gibt zwei Möglichkeiten, eine feste KingTable zu definieren:
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"
} ) ;Feste Tabellen führen die Suche und Paginierung auf der Clientseite durch.
Eine normale Tabelle zeigt eine Sammlung an, die eine serverseitige Paginierung erfordert, da sie mit der Zeit wachsen soll. Dies trifft in den meisten Fällen zu, beispielsweise bei Produkt- und Kundentabellen auf einer E-Commerce-Website.
var table = new KingTable ( {
url : "/api/profiles"
} ) ;Beim Empfang einer AJAX-Antwort erwartet eine normale Tabelle den Empfang der folgenden Struktur:
{
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
} Die KingTable-Bibliothek enthält eine Reihe von Funktionen zur Verbesserung der Benutzerfreundlichkeit, sowohl für Endbenutzer als auch für Programmierer, die die Bibliothek verwenden:
sessionStorage , localStorage oder kompatibles Objekt) und bleiben bei der Seitenaktualisierung bestehen – Filter werden nach URL und, wenn möglich, nach Tabellen-ID erfasstWeitere Informationen finden Sie auf der entsprechenden Wiki-Seite.
Ausführliche Informationen finden Sie auf der entsprechenden Wiki-Seite. Die KingTable-Bibliothek enthält Logik zur Implementierung der clientseitigen Lokalisierung, die zur Anzeige der richtigen Namen von Schaltflächen (Aktualisierung, Seitenzahl, Ergebnisse pro Seite usw.) verwendet wird.
Anweisungen zur Integration in Ihr Projekt und in serverseitigen Code finden Sie auf der entsprechenden Wiki-Seite.
