j-DataGrid

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Dieses Raster wurde für Einzelseitenanwendungen und Unternehmensanwendungen erstellt.

Benötigtes Gittersystem bootstrap
Sie können problemlos mehr als 30.000 Zeilen rendern
Unterstützt Drag&Drop-Spalten
unterstützt das Sortieren
Unterstützt die Größenänderung von Spalten
Unterstützt vertikales/horizontales Scrollen
unterstützt Filter
unterstützt Kontrollkästchen
Benutzerdefinierte Bildlaufleisten unabhängig vom Betriebssystem
reaktionsschnell
unterstützt den Dark-Modus
Der Spaltenoptionsfilter WICHTIG benötigt die Komponente j-Directory

TO-DO:

Multisort
Größenänderung der Spalten für Touch-Geräte
Neuordnung der Spalten für Touch-Geräte

Datenquelle muss Folgendes enthalten:

{
	schema: 'schema_id', // NEW: optional, DataGrid supports multiple schemas (it means: multiple declaration of columns)
    items: [{ name: 'Row 1' }, { name: 'Row 2' }, ...] // items
    page: 1,    // current pages
    pages: 30,  // count of pages
    limit: 5,   // items limit per page
    count: 150  // count of items in DB
}

oder rohes Array, aber Sie können keine Paginierung und externe Filter verwenden:

[{ name: 'Row 1' }, { name: 'Row 2' }];

Konfiguration:

filterlabel {String} ein Standardplatzhalter für alle Filter (optional)
rememberfilter {Boolean} mit echten es erinnert sich an Filter für jedes Schema (Default: true)
schema {String} ein Standardschema (Default: default)
pluralizepages {String} Pluralisierung für Seiten (optional, Standard: # pages,# page,# pages,# pages)
pluralizeitems {String} Pluralisierung für Elemente (optional, Standard: # items,# item,# items,# items)
height {Number/String} Höhen der Netz, unterstützte Werte: auto (Nach dem Stand) - Neues fluid, parent (oder parent1, parent2oder NUMBER als Höhe oder selector für jQuery.closest()
minheight {Number} Minimale Höhen des Netzes, mit fluid und auto höhen (Default: 200)
parent {String}-Selektor für auto-Höhenoption (Standard: window)
margin {Number} ein oberer Rand für die Höhe (optional, Standard: 0)
boolean {String} ein Wert für die Filterung von Booleanwerte (optional, Standard: true|on|yes)
resize {Boolean} ermöglicht die Wiedergabe von Spalten (optional, Standard: true)
reorder {Boolean} ermöglicht die Wiederverordnung von Spalten (optional, Standard: true)
sorting {Boolean} ermöglicht Sortierung (optional, Standard true)
remember {Boolean} erinnert sich an die wiederordnungs- und wiederordnungssteile (optional, standardmäßig true)
checkbox {Boolean} ermöglicht Checkboxes
colwidth {Number} eine Standardkolumnbreite in Pixeln (optional, Standard 150)
rowheight {Number} ist eine Standard-Rennhöhe in Pixeln (optional, Standard: 24) + es hängt von CSS ab
alignheader {String/Number} Align für Header right (oder 2oder center (oder 1(Optional und default) left)
alignfilter {String/Number} Anpassung zum Filter-Input right (oder 2oder center (oder 1(Optional und default) left)
align {String/Number} Anpassung für einen Kolumnwert right (oder 2oder center (oder 1(Optional und default) left)
click {String} eine Verbindung zu einem Pfad oder function(row, grid, row_el), wird ein Aufzeichnung zugeordnet / ausgeführt, wenn der Benutzer auf eine Reihe klickt
clickid {String} ein Identifikator / Eigentumsname für die Rückverfolgung (für den vorherigen Rennen-Highlight), Standard: id
highlight {Boolean} wird in jeder ausgewählten Reihe (nach click) hervorgehoben (Default: false)
unhighlight {Boolean} ermöglicht undo highlighting der ausgewählten Reihe (Default: true)
checked {String} path zu einer Variable oder Pfad nach function(rows, grid) wird ausgeführt, wenn der Benutzer einige Zeilen ausgewählt / überprüft
autoselect {Boolean} ermöglicht die automatische Auswahl der ersten Reihe im Netzwerk, es erfüllt EXEC(config.click), Standard: false
limit {Number} eine Klustergrenze, Standard: 80
numbering {Boolean}, optionale Standardphase false
allowtitles {Boolean}, ermöglicht Titel für alle Zeilenwerte, optionale Standard false
button {String} eine Verbindung zu function(btn_name, row, btn_element, event, name) wird ausgeführt, wenn der Benutzer auf einen button in der Reihe klickt
exec {String} eine Verbindung zu function(type, filter, sort, page) nur für Server-Seite-Bewegungen (es deaktiviert Client-Seiten-Sortierung und Filterung), unterstützte Typen: refresh oder page
changed {String} path zu einer Variable oder Pfad nach function(rows, grid) wird ausgeführt, wenn der Benutzer einige Zeilen ändert
change {String/Boolean} Boolean ermöglicht die interne Bearbeitung oder String muss eine path zu einer Variable enthalten oder der Weg nach function(meta, next(meta)) ausgeführt wird, wenn der Benutzer doppelt auf eine Spalte klickt (meta kann null sein, wenn das Netz neu gemacht wird) + next(null) ersetzt erneut vorheriges Inhalt
columns {String} ist ein Weg zur Definition von columns {Array}
dblclick {String} eine Verbindung zu der Methode function(row, grid, row_el) wird ausgeführt, wenn der Benutzer doppelt klickt auf eine Reihe
noborder {Boolean} kann eine Grenze rund um das Netz deaktivieren (Default: false)
clusterize {Boolean} kann Cluster-Skrollung deaktivieren (Default: true)
contextmenu {String} eine Verbindung zu function(e, grid) wenn der Benutzer das Kontextmenü erhöht
autoformat {Boolean} ermöglicht Autoformate wie email, phone und number (Default: true)
controls {Boolean} ermöglicht die in columns definierten Steuerungen (Default: true)
hfunc {String} eine Verbindung zu der Methode function(el) wird ausgeführt, wenn der Benutzer auf die Ikon klickt, die an die erste Header-Reihe hinzugefügt wird. usefull, um andere Komponenten mit DataGrid einzuschließen.
hfuncicon {String} hfunc Ikon z.B. zu Hause, cog usw.
pagination {Boolean} ermöglicht/abschließt Pageing (Default: true)
- config.exec wird ausgeführt, wenn die Spülbar am Ende ist, und Sie können als Raw-Reaktion array der Zeilen verwenden
ovalue {String} ist ein Standard-Schlüssel, um value von column.options zu erhalten (Default: id)
otext {String} ist ein Standard-Schlüssel, um text von column.options zu erhalten (Default: name)

Kolonne Eigenschaften:

name {String} ein Feldnamen in der Reihe von Objekten
text {String} eine Spaltezeichen, Text mit .ti ti-home wird die Gesamt-Ikon
title {String} eine Spalte-Tooltype (optional)
width {Number} eine Spalteweite (optional, Standard config.colwidth)
filter {String/Boolean} ein Platzhalter für das Filter oder boolean kann Filter für diese Spalte deaktivieren (optional)
filtervalue {Object} optionale, ein vorgegebener Filterwert (Default: undefined)
filtertype {Number/String}, 1 deaktiviert Smart Search (Default: 0 - es bedeutet, dass Smart Search aktiviert wird)
align {String} kann center oder right sein (optional, Standard: left)
template {String} kann ein Tangular-Template sein und das Modell ist das ganze Objekt der Reihe
sorting {Boolean} ermöglicht die Sortierung (optional, Standard: true)
search {Boolean/String} true wird einen Wert nach dem template Ergebnis filtern oder String kann ein Tangular-Template sein, das als Wert für die Suche verwendet wird
format {String/Number} kann für Datum und Zahlen (Zahl von Decimalen) Feld (optional) verwendet werden, z. B. dd.MM.yyyy
hide {Boolean} versteckt eine Spalte
listcolumn {Boolean} Standard: wahr, falsch für die Entfernung der Spalte aus der Spaltenliste
hidden {String} als Fingerfunktion column => true --> wird die Spalte verborgen (z.B. für den begrenzten Benutzer)
options {Object Array} optionale, ein benutzerdefiniertes Filter zum Beispiel [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r Link zur Datenquelle
otext {String} optionale, ein Schlüssel für das text Feld in options, Standard config.otext
ovalue {String} optionale, ein Schlüssel für das value Feld in options, Standard config.ovalue
buttonapply {String} optionale, eine Etikette für die Apply-Schaltfläche in Spalten, Standard: Apply
class {String} optionale, ein angepaster Kolumnklasse
empty {String/Boolean} optionale, kann leer Wert mit dem im leeren Feld definierten Wert wiederschreiben (true Wert verwendet --- als Standardwert)
min {Number} editable nur eine min.
max {Number} editable nur ein max.
required {Boolean} - nur redigierbar
dirsearch {String/Boolean} ist ein Plattform für die Suche nach j-Directory, Boolean mit false wird die Suche deaktivieren
type {String} optionale, kann eine Datenart enthalten (string, boolean, date, number, email, phone oder url) für das Feld
editable {Boolean} ermöglicht die Bearbeitung
currency {String} ein Währungsnamen (sie müssen in DEF.currencies) definiert werden
editable {String} Ein Weg zum anpassbaren function(meta), wichtig: meta.next(new_value) oder meta.cancel()
colorize {Boolean} ermöglicht eine Farbung des Wertes
monospace {Boolean} ermöglicht monospace-Schriftart
NEW raw {Boolean} ermöglicht / verhindert HTML-Flüchtungen in Kolumnenfiltern (Default: false)
NEW pair {Boolean} ermöglicht/deaktiviert Auto-Wert in Verbindung mit der Konfiguration options (Default: false)

Röhrungskontrolle (NEW):

kann als Kolonne Typ controls definiert werden
muss die Spalte template definiert werden (Tangular, row ist ein Modell für Tangular für jede Reihe)
Schauen Sie sich zum Beispiel
Die click-Event-Button wird auf config.button festgenommen

Filterung:

numbers: (1) number sucht eine genaue Zahl, (2) number - number ist ein Abschnitt zwischen den Zahlen
strings: (1) string sucht eine genaue Zeile, (2) string1, string2, string3 ist ein mehrerer Suchkriterium
dates(1) Das Jahr 2017 Suche nach allen Daten in diesem Jahr, (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 Es gibt einen Abstand zwischen den Datensätzen (3) 12-20 - 12-31 -- 20.12 - 31.12 Ein Abstand zwischen den Daten im aktuellen Jahr und (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 oder (5) -5 days -- -1 week -- -10 years

Methoden:

component.redraw([reselect_again]) kann nochmals Zeilen redrawern (nur für Änderungen, wenn Sie einige Zeilen entfernen müssen, um das ganze Modell zu aktualisieren)
component.resetfilter() kann ein Filter neu aufstellen
component.exportrows(page_from or true from the current page, pages_count, callback(rows, internal_options), [reset_to_page or true for the current page]) kann Zeilen mit Server-Side-Rendering exportieren
component.appendrow(row_object, [scrolldown], [prepend]) Appends und Render
component.redrawrow(row_object, [new_object_row]) redraws line oder NEW: ersetzt +redraws row_object mit einem neuen new_object_row
component.clear() klärt alle Veränderungen
component.select(row) wählt row muss das gleiche Objekt sein wie in der Datenquelle
component.editcolumn(row_index, col_index) führt config.change intern aus (nur für fortgeschrittene Verwendung)
component.applyfilter(obj) kann ein benutzerdefiniertes Filter { name: 'Peter', age: '20 - 50' } anwenden
component.resetcolumns() wiederherstellbar
component.readfilter() gibt einen aktuellen Filter zurück
component.rebind(schemaname__or__columnsdeclaration) die Methode verwandelt das Schema
component.reload() führt config.exec mit dem aktuellen Filter und Sortierung aus
component.empty() empties alle Zeilen
component.redrawcolumns() Redraw Kolumne ohne Wiederherstellung
NEW: component.schema(name) ändert ein Schema und erfrischt Daten

Eigenschaften:

component.meta gibt interne Meta-Informationen über Filter, Spalten und Zeilen zurück

Gut zu wissen:

NULL('link.to.data') wertet config.exec aus
SET('link.to.data', data, 'noscroll') --> Typ noscroll verhindert die Wiederherstellung des Schraubens

Wie erweitert man eine Klasse?

Auf die {{ if active }}-Linie wird eine Klasse der Reihe erweitert, indem Sie dg-active-class hinzufügen, wenn die active gültig ist.

[
	'{{ if active }} dg-active-class{{ fi }}',
	{ name: 'name', text: 'Name', width: 200 },
	// other columns ...
]

Mehrere Schemata:

<ui-component name="datagrid" path="obj">

	<script type="text/plain" data-id="SCHEMA_A">
		[
			{ name: 'name', text: 'Name', width: 200 },
			// ...
		]
	</script>

	<script type="text/plain" data-id="SCHEMA_B">
		[
			{ name: 'price', text: 'Price', width: 100 },
			// ...
		]
	</script>

</ui-component>

<script>
	// Usage
	var obj = {};
	obj.schema = 'SCHEMA_A';
	obj.items = [];

	// Changing of schema
	setTimeout(function() {
		obj.schema = 'SCHEMA_B';
		obj.items = [];
		UPD('obj');
	}, 5000);
</script>

Verwenden Sie es mit <ui-component name="datagrid">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<ui-component name="LAZY directory"></ui-component>
<ui-component name="datagrid" path="items" config="margin:22;button:clicked">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', width: 200 },
			{ name: 'price', text: 'Price', align: 1, alignfilter: 1 },
			{ name: 'published', text: 'Public', align: 1, options: [{ name: 'yes', id: true }, { name: 'no', id: false }], type: 'boolean' },
			{ name: 'description', text: 'Description', filter: 'Search in description' },
			{ name: 'created', text: 'Created', template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignfilter: 2, alignheader: 2 },
			{ type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }
		]
	</script>
</ui-component>

<script>

	var items = [];
	for (var i = 1; i < 90; i++)
		items.push({ name: '{0} Lorem ipsum dolor'.format(i), published: i % 5 !== 0, description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: i + 100, created: new Date().add('-5 days') });

	function clicked(btnname, row, button, e) {
		console.log(btnname, row);
	}

</script>