j-Grid

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

Benötigtes Gittersystem bootstrap

Datenquelle muss Folgendes enthalten:

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

filter {Boolean} zeigt ein Filter (optional, Standard: true)
filterlabel {String} ein Standardplatz für alle Filter (optional)
external {Boolean} ist eine externe Datenquelle (dynamische Datenladung) (optinisch, Standard: false)
pluralizepages {String} Pluralisierung für Seiten (optional, Standard: # pages,# page,# pages,# pages)
pluralizeitems {String} Pluralisierung für Artikel (optional, Standard: # items,# item,# items,# items)
exec {String} eine Verbindung zu function(type, filter, sort, page), wird bewertet, ob das Netz einige Operationen durchführt
padding {Number} Höhe Padding (optional, Standard: 0)
autosize {Boolean} ermöglicht volle Auto-Size (optional, Standard true)
boolean {String} eine Werte für die Filterung von Boolean-Wert (optional, Standard: true|on|yes)
pagination {Boolean} zeigt das Page-Panel (optional, Standard: false)
init {Funktion} eine Initfunktion für z.B. angepasste Spalten
checked {Funktion} Wenn die Zeilen <input type="checkbox enthalten, wird diese Funktion beurteilt, wenn die Checkbox überprüft wird

Kolonne Eigenschaften:

name {String} ein Feldnamen im Objekt
text {String} eine Spalte
title {String} eine Spalte-Tooltype (optional)
size {Number} eine Spalte Breite: 1 Kleine 2 Mittleren 3 Große ist, 4 sehr groß (optional, default) 1)
size {String} eine Spalteweite in Pixeln, Wert muss enthalten px e.g. 20px
filter {String/Boolean} ein Platzhalter für das Filter oder boolean kann Filter für diese Spalte deaktivieren (optional)
format {String/Nummer} für Formatwerte (string für Datum, number für Zahlen)
background {String} eine Hintergrundfarbe (optional)
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
render {String/Funktion(Wert, Spalte, Reihenfolge)} eine benutzerdefinierte Renderung, string wird als Feature eines Schildes bewertet
header {String/Funktion(Column)} eine benutzerdefinierte Renderung des Heads, string wird als Fingerfunktion bewertet
sort {Boolean} ermöglicht Sortierung (optional, Standard: true)
class {String} zusätzliche Klassen für die Spalte, z. B. hidden-xs
search {Boolean/String} true wird ein Wert nach dem template Ergebnis filtern oder String kann ein Tangular-Template sein, das als Wert für die Suche verwendet wird

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) Jahr 2017 sucht alle Daten in diesem Jahr, (2) 2017-02-12 / 2017-03-13 ist ein Abschnitt zwischen Daten, (3) 20.12 / 31.12 ein Ablauf zwischen Daten im aktuellen Jahr

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

<style>
	body{padding:50px;margin:0;background-color:#F0F0F0;font-family:Arial;height:100%;}
	html{height:100%;}
</style>

<ui-component name="grid" path="griddata" config="exec:filtering">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', size: 2, render: 'n => n.toUpperCase()', filter: 'Search in name' },
			{ name: 'price', text: 'Price', size: 1, format: 2, filter: 'Search in prices', align: 'right' },
			{ name: 'description', text: 'Description', size: 3, filter: 'Search in description' },
			{ name: 'created', text: 'Created', size: 1, filter: 'Search in dates', format: 'dd.MM.yyyy', align: 'center' }
		]
	</script>
</ui-component>

<script>
	var griddata = { page: 1, count: 18, pages: 3, limit: 6, items: [] };
	var items = griddata.items;

	items.push({ name: '1 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 233, created: new Date().add('-5 days') });
	items.push({ name: '2 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 122, created: new Date().add('-1 year') });
	items.push({ name: '3 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 119, created: new Date().add('-1 month') });
	items.push({ name: '4 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 35.34, created: new Date().add('-14 days') });
	items.push({ name: '5 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 439.33, created: new Date().add('-5 hours') });
	items.push({ name: '6 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 111.12, created: new Date().add('-349 minutes') });

	// Auto-resize
	$(window).on('resize', function() {
		setTimeout2('resize', function() {
			EMIT('resize');
		}, 100);
	});

	function filtering(type, filter, sort, page) {
		console.log(type, filter, sort, page);
	}

</script>