j-DataGrid

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Táto mriežka bola vytvorená pre jednostránkové aplikácie a podnikové aplikácie.

potrebný mriežkový systém bootstrap
bez problémov vykreslíte viac ako 30 000 riadkov
podporuje drag&drop stĺpce
podporuje triedenie
podporuje zmenu veľkosti stĺpcov
podporuje vertikálne/horizontálne rolovanie
podporuje filtre
podporuje začiarkavacie políčka
vlastné posuvníky nezávislé na OS
citlivý
podporuje tmavý režim
IMPORTANT filter možností stĺpca potrebuje komponent j-Directory

TO-DO:

viactriedny
zmena veľkosti stĺpcov pre dotykové zariadenia
preusporiadanie stĺpcov pre dotykové zariadenia

Data-source musí obsahovať:

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

alebo surové Array, ale nemôžete použiť stránkovanie a externé filtre:

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

Konfigurácia:

filterlabel {String} predvolený zástupný symbol pre všetky filtre (voliteľné)
rememberfilter {Boolean} s pravým to pripomína filtre pre každý schéma (predvolené: true)
schema {String} je predvolená schéma (predvolená: default)
pluralizepages {String} pluralita stránok (voliteľné, predvolená hodnota: # pages,# page,# pages,# pages)
pluralizeitems {String} množné číslo pre položky (voliteľné, predvolené: # items,# item,# items,# items)
height {Number/String} Výška siete, podporované hodnoty: auto (predvolené) _Nový fluid, parent alebo parent1, parent2a) alebo NUMBER ako výška alebo selector pre jQuery.closest()
Minimálna výška siete minheight {Number}, pracuje s výškou fluid a auto (predvolená: 200)
Volič parent {String} pre možnosť výšky auto (predvolené: window)
margin {Number} horný okraj výšky (voliteľné, predvolené: 0)
boolean {String} hodnoty pre filtrovanie booleánových hodnôt (opcionálne, predvolené: true|on|yes)
resize {Boolean} umožňuje revíziu stĺpcov (voliteľné, predvolené: true)
reorder {Boolean} umožňuje re-objednávanie stĺpcov (voliteľné, predvolené: true)
sorting {Boolean} umožňuje sortivanie (voliteľné, predvolené true)
remember {Boolean} pripomína re-objednávanie a resing stĺpcov (voliteľné, predvolené true)
checkbox {Boolean} umožňuje kontrolné boxy
colwidth {Number} predvolená šírka stĺpca v pixeloch (opcionálne, predvolené 150)
rowheight {Number} predvolená vrstva v pixeloch (opcionálne, predvolené: 24) + závisí od CSS
alignheader {String/Number} align pre hlavičku right (alebo 2) alebo center (albo 1) (voliteľné, predvolené: left)
alignfilter {String/Number} align pre vstup filtra right (alebo 2) alebo center (albo 1) (voliteľné, predvolené: left)
align {String/Number} zhoduje hodnotu stĺpca right (alebo 2) alebo center (albo 1) (opcionálne, predvolené: left)
click {String} odkaz na cestu alebo function(row, grid, row_el), záznam sa priradí/vyplní, ak používateľ klikne na riadok
clickid {String} názov identifikátora / majetku pre spätné vysielanie (pre predchádzajúci riadok), predvolený: id
highlight {Boolean} každý vybraný riadok (po click) bude zvýraznený (predvolené: false)
unhighlight {Boolean} povolí undo highlighting zvoleného riadku (predvolené: true)
checked {String} path k premennej alebo ceste k function(rows, grid) sa vykoná, ak používateľ vybral/skontroloval niektoré riadky
autoselect {Boolean} umožňuje automatický výber prvého riadku v mriežke, vykonáva EXEC(config.click), predvolené: false
limit {Number} je klastrová hranica, predvolená: 80
numbering {Boolean}Opcionálny default false
allowtitles {Boolean}, umožňuje titulky pre všetky hodnoty riadkov, voliteľné predvolené false
button {String} sa spustí odkaz na function(btn_name, row, btn_element, event, name) ak používateľ klikne na tlačidlo v riadku
exec {String} odkaz na function(type, filter, sort, page) len pre operácie na strane servera (vypína triedenie a filtrovanie na strane klienta), podporované typy: refresh alebo page
changed {String} path k premennej alebo ceste k function(rows, grid) sa vykoná, ak používateľ zmenil niektoré riadky
change {String/Boolean} boolean umožňuje vnútorné úpravy alebo riadok musí obsahovať path na variantu alebo trasa na function(meta, next(meta)) sa vykonáva, ak používateľ dvojnásobne klikne na stĺpec (meta môže byť null ak je sieť obnovená) + next(null) nahrádza predchádzajúci obsah znova
columns {String} je cesta k definícii columns {Array}
dblclick {String} prepojenie na metódu function(row, grid, row_el), vykoná sa, ak používateľ dvakrát klikne na riadok
noborder {Boolean} môže zakázať ohraničenie okolo mriežky (predvolené: false)
clusterize {Boolean} môže deaktivovať klastrovanie (predvolené: true)
contextmenu {String} odkaz na function(e, grid), keď používateľ vyvolá kontextovú ponuku
autoformat {Boolean} umožňuje automatické formáty, ako je email, phone a number (predvolené: true)
controls {Boolean} umožňuje kontroly definované v columns (predvolené: true)
hfunc {String} odkaz na metódu function(el), je spustený, ak používateľ klikne na ikonu pridanú do veľmi prvého riadku hlavy. usefull integrovať inú zložku s DataGrid.
hfuncicon {String} hfunc ikona napr. dom, cog, atď.
pagination {Boolean} umožňuje/nesúhlasí vyhľadávanie (predvolené: true)
- config.exec bude spustený, ak je vrstva na konci a môžete použiť ako surovú odpoveď array riadkov
ovalue {String} je predvolený kľúč na získanie value z column.options (predvolený: id)
otext {String} je predvolený kľúč na získanie text z column.options (predvolený: name)

Vlastnosti stĺpca:

name {String} názov poľa v objekte riadku
text {String} je stĺpecová značka, text s .ti ti-home zobrazí ikonu Total
title {String} nástrojový typ stĺpca (voliteľné)
width {Number} šírka stĺpca (voliteľné, predvolená hodnota config.colwidth)
filter {String/Boolean} môže byť umiestnený na filter alebo boolean môže byť vypnutý filter pre túto stĺpec (voliteľné)
filtervalue {Object} voliteľné, preddefinovaná hodnota filtra (predvolená hodnota: undefined)
filtertype {Number/String}, 1 zabraňuje inteligentnému vyhľadávaniu (predvolené: 0 - to znamená, že je zapnuté inteligentné vyhľadávanie)
align {String} môže byť center alebo right (voliteľné, predvolené: left)
template {String} môže byť šablóna Tangular a model je celý objekt riadku
sorting {Boolean} umožňuje triedenie (voliteľné, predvolené: true)
search {Boolean/String} true bude filtrovať hodnotu podľa výsledku template alebo String môže byť šablónou Tangular, ktorá sa použije ako hodnota pre vyhľadávanie
format {String/Number} je možné použiť pre pole dátumu a čísel (počet desatinných miest) (voliteľné), napr. dd.MM.yyyy
hide {Boolean} skrýva stĺpec
listcolumn {Boolean} predvolené: pravdivé, falošné pre odstránenie stĺpcov zoznamu
hidden {String} ako strela funkcia column => true -> stĺpec bude skryté (napríklad pre obmedzujúceho používateľa)
options {Object Array} voliteľné, vlastný filter napríklad [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r odkaz na zdroj údajov
otext {String} voliteľné, kľúč pre pole text v options, predvolené config.otext
ovalue {String} voliteľné, kľúč pre pole value v options, predvolené config.ovalue
buttonapply {String} voliteľné, štítok pre tlačidlo Apply v stĺpcoch, predvolené: Apply
class {String} voliteľné, názov triedy vlastného stĺpca
empty {String/Boolean} voliteľné, môže prepísať prázdnu hodnotu hodnotou definovanou v prázdnom poli (hodnota true používa --- ako predvolenú hodnotu)
min {Number} editable iba min. hodnota
max {Number} editable iba max. hodnota čísla
required {Boolean} editable iba
dirsearch {String/Boolean} je umiestnený pre vyhľadávanie j-Directory, boolean s false bude vypnúť vyhľadávať
type {String} voliteľné, môže obsahovať typ údajov (string, boolean, date, number, email, phone alebo url) pre pole
editable {Boolean} umožňuje editáciu
currency {String} menový názov (musí byť definovaný v DEF.currencies)
editable {String} Cesta k úpravám function(meta)Dôležité je: meta.next(new_value) alebo meta.cancel()
colorize {Boolean} umožňuje farbenie hodnoty
monospace {Boolean} umožňuje typ písma monospace
NEW raw {Boolean} umožňuje/nezabudne únik HTML v stĺpcoch filtrov (predvolené: false)
NEW pair {Boolean} umožňuje/nesúhlasí automatickú hodnotu v páre s konfiguráciou options (predvolené: false)

Kontroly riadenia (NEW):

Môže byť definovaný ako stĺpec typu controls
musí definovať stĺpec template (Tangular, row je model pre Tangular pre každý riadok)
Pozrite sa na príklad
tlačidlo click sa zachytáva na config.button

filtrovanie:

numbers: (1) number vyhľadáva presné číslo, (2) number - number je interval medzi číslami
strings: (1) string vyhľadáva presný riadok, (2) string1, string2, string3 je viacnásobné kritérium hľadania
dates(1) rok 2017 Vyhľadávanie všetkých dátumov v tomto roku, (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 je interval medzi dátummi, (3) 12-20 - 12-31 -- 20.12 - 31.12 interval medzi dátummi v danom roku a (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 alebo (5) -5 days -- -1 week -- -10 years

Metódy:

component.redraw([reselect_again]) môže znova prevrátiť riadky (len pre úpravy, ak odstránite niektoré riadky, ktoré potrebujete aktualizovať celý model)
component.resetfilter() môže resetovať filter
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]) môže vyvážať riadky s serverovým renderovaním
component.appendrow(row_object, [scrolldown], [prepend]) prichádza a renderuje
component.redrawrow(row_object, [new_object_row]) prekreslí riadok alebo NEW: nahradí+prekreslí row_object novým new_object_row
component.clear() vymaže všetky zmeny
component.select(row) vyberie row musí byť rovnaký objekt ako v zdroji údajov
component.editcolumn(row_index, col_index) vykonáva config.change interne (len pre pokročilé použitie)
component.applyfilter(obj) môže použiť vlastný filter { name: 'Peter', age: '20 - 50' }
component.resetcolumns() reštartovanie stĺpcov
component.readfilter() vráti aktuálny filter
component.rebind(schemaname__or__columnsdeclaration) metóda znovu spája schému
component.reload() spúšťa config.exec s aktuálnym filtrovým a sortiacím systémom
component.empty() empties všetky riadky
component.redrawcolumns() redraw stĺpce bez ich resetovania
NEW: component.schema(name) mení schému a osviežuje údaje

Vlastnosti:

component.meta vráti interné meta informácie o filtroch, stĺpcoch a riadkoch

Je dobré vedieť:

NULL('link.to.data') vyhodnocuje config.exec
SET('link.to.data', data, 'noscroll') --> Typ noscroll zakáže resetovanie rolovania

Ako rozšíriť triedu riadkov?

pozrite sa na riadok {{ if active }}, rozširuje triedu riadku pridaním dg-active-class, ak bude platný active

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

Viaceré schémy:

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

Použite ho so <ui-component name="datagrid">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>