# j-DataGrid

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: de62eda6eb2144a28fa5e5c50a07a480250cccd239be81eb19e034febe37a711
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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

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

```js
[{ 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`, `parent2`a) 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`

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

__Viaceré schémy__:

```html
<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.

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