j-DataTable

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

BETA: Diese Komponente ist für SPA und serverseitige Auflistung vorgesehen.

unterstützt Paginierung
Benötigtes Gittersystem bootstrap
unterstützt das Sortieren
Unterstützt vertikales/horizontales Scrollen
reaktionsschnell
unterstützt den Dark-Modus

Datenquelle muss Folgendes enthalten:

{
	cols: [{ name: 'id', ... }], // optional, can be defined inline in HTML
    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
}

Konfiguration:

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 NUMBER als Höhe oder selector für jQuery.closest()
NEW minheight {Number} Minimale Höhe des Netzes, arbeitet mit fluid und auto Höhe (Default: 300)
NEW parent {String} Selektor für die auto Höhe Option (Default: window)
margin {Number} ein oberer Rand für die Höhe (optional, Standard: 0)
click {String} eine Verbindung zu function(row, grid, row_el), es wird ausgeführt, wenn der Benutzer auf eine Reihe klickt
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
exec {String} eine Verbindung zu function(type, page, sort) 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
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)
colwidth {Number} eine Standardweite für Kolumne (Default: 150)
editable {String} eine Verbindung zu function(opt) wenn der Benutzer die Bearbeitung durchführt
contextmenu {String} eine Verbindung zu function(e, grid) wenn der Benutzer das Kontextmenü erhöht

Kolonne Eigenschaften:

name {String} ein Feldnamen in der Reihe von Objekten
text {String} eine Spalte-Label, Text mit .fa fa-home wird FontAwesome-Ikon darstellen
width {Number} eine Spalteweite (optional, Standard config.colwidth)
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
sort {Boolean} ermöglicht die Sortierung (optional, Standard: false)
format {String/Number} kann für Datum und Zahlen (Zahl von Decimalen) Feld (optional) verwendet werden, z. B. dd.MM.yyyy
currency {String} ein Währungsformat, einfach eine Währung hinzufügen
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)
type {String} optionale, kann einen Datentyp (boolean, date oder number) für das Feld enthalten
editable {Boolean} ermöglicht die Bearbeitung

Methoden:

component.redrawrow(row_object/index) 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.rebind(columnsdeclaration) die Methode verwandelt das Schema
NEW: component.reload() führt config.exec mit dem aktuellen Filter und Sortierung aus
NEW: component.empty() empties alle Zeilen

Gut zu wissen:

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 ...
]

Verwenden Sie es mit <ui-component name="datatable">. 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

<div style="width:500px;height:400px">
	<ui-component name="datatable" path="data" config="highlight:1;exec:paginate;editable:editable;checked:checked;margin:22">
		<script type="text/html">
			[
				{ name: 'name', text: 'Opportunity name', width: 200, sort: 1, editable: 1 },
				{ name: 'value', text: 'Value', width: 100, sort: 1, type: 'number', format: 2 },
				{ name: 'status', text: 'Status', width: 100, editable: 1 },
				{ name: 'owner', text: 'Owner', width: 200 },
				{ name: 'newsletter', text: 'Newsletter', width: 100, type: 'boolean' },
				{ name: 'date', text: 'Date', width: 200, sort: 1, type: 'date', format: 'yyyy-MM-dd' }
			]
		</script>
	</ui-component>
</div>

<script>

	function checked(rows) {
		console.log(rows);
	}

	function editable(opt) {
		// opt.row
		// opt.col
		// opt.value
		// opt.next(NEW_VALUE);
		opt.next(opt.value + ' (modified)');
	}

	function paginate(type, page, sort) {
		console.log('Page:', page, 'sort:', sort);
	}

		var data = {};

		data.items = [];
		data.pages = 53;
		data.page = 3;

		// data.cols.push({ name: 'name', text: 'Opportunity name', width: 200, sort: true });
		// data.cols.push({ name: 'value', text: 'Value', width: 100, sort: true });
		// data.cols.push({ name: 'status', text: 'Status', width: 100 });
		// data.cols.push({ name: 'owner', text: 'Owner', width: 200 });
		// data.cols.push({ name: 'date', text: 'Date', width: 200, sort: true });

		for (var i = 0; i < 50; i++)
			data.items.push({ name: GUID(20), value: Math.random() * 1000 >> 0, status: GUID(10), owner: 'Peter Širka', newsletter: i % 3 === 0, date: NOW });
</script>