# j-DataGrid

> Ez a hálózat egyoldalú alkalmazások és vállalati alkalmazások számára jött létre.

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

Ez a hálózat egyoldalú alkalmazások és vállalati alkalmazások számára jött létre.

- `bootstrap` hálózati rendszer
- Több mint 30 000 sorot adhat meg problémamentesen
- Támogatja a drag&drop oszlopokat
- Támogatja a sorozást
- Támogatja a oszlopok visszavonását
- Vertikális/horizontális forgatás
- Támogatja a szűrőt
- Támogatja a checkboxes
- Független scrollbars az OS-on
- Válasz
- Támogatja a sötét módot
- __IMPORTANT__ oszlop opciók szűrő igényel `j-Directory` komponens

__TO-DO__:

- Többszöri
- A touch eszközökre vonatkozó oszlopok újrahasznosítása
- Újrarendelés oszlopok érintő eszközök

Az adatforrásnak tartalmaznia kell:

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

vagy nyers `Array`, de nem használhat oldalsó és külső szűrőket:

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

__konfiguráció__:

- `filterlabel {String}` - Az összes szűrőre vonatkozó alapértelmezett helytartó (opcionális)
- `rememberfilter {Boolean}` valódi, minden rendszerre emlékeztető szűrők (default: `true`)
- `schema {String}` egy alapértelmezett rendszer (default: `default`)
- `pluralizepages {String}` pluralizáció oldalak (opcionális, alapértelmezett: `# pages,# page,# pages,# pages`)
- `pluralizeitems {String}` pluralizáció az elemekre (opcionális, alapértelmezett: `# items,# item,# items,# items`)
- `height {Number/String}` A hálózat magassága, a támogatott értékek: `auto` (Egyszerűen csak az új) `fluid`, `parent` vagy `parent1`, `parent2`vagy `NUMBER` A magasság vagy `selector` A jQuery.closest oldalról
- `minheight {Number}` minimális hálózati magasság, `fluid` és `auto` magasságban működik (default: `200`)
- `parent {String}` kiválasztó a `auto` magasság opció (default: `window`)
- `margin {Number}` a magasság felső marginja (opcionális, alapértelmezett: `0`)
- `boolean {String}` a boolean értékek szűrésére szolgáló értékek (opcionális, alapértelmezett: `true|on|yes`)
- A `resize {Boolean}` lehetővé teszi a oszlopok visszaszorítását (opcionális, alapértelmezett: `true`)
- `reorder {Boolean}` lehetővé teszi a oszlopok újrarendelését (opcionális, alapértelmezett: `true`)
- `sorting {Boolean}` lehetővé teszi a sorozást (opcionális, alapértelmezett `true`)
- `remember {Boolean}` emlékeztet az újrarendelésre és a visszahozásra vonatkozó oszlopokra (opcionális, alapértelmezett `true`)
- A `checkbox {Boolean}` ellenőrző dobozok
- `colwidth {Number}` egy alapértelmezett oszlop szélessége pixelekben (opcionális, alapértelemszerű `150`)
- `rowheight {Number}` egy alapértelmezett sor magassága pixelekben (opcionális, alapértelem: `24`) + attól függ, hogy CSS
- `alignheader {String/Number}` Align a fejedelemhez `right` vagy `2`vagy `center` vagy `1`(Az opcionális és a default: `left`)
- `alignfilter {String/Number}` A filter bevezetéséhez `right` vagy `2`vagy `center` vagy `1`(Az opcionális és a default: `left`)
- `align {String/Number}` Egy oszlop értéke `right` vagy `2`vagy `center` vagy `1`(Az opcionális és a default: `left`)
- `click {String}` egy útvonalhoz vagy `function(row, grid, row_el)`-hez való link, a rekordot akkor adják ki/végrehajtják, ha a felhasználó egy sorra kattint.
- `clickid {String}` azonosító/tulajdon neve a visszafordításhoz (előző sorban), alapértelmezett: `id`
- `highlight {Boolean}` minden kiválasztott sorban (a `click` után) kiemelkedik (elsődleges: `false`)
- `unhighlight {Boolean}` lehetővé teszi a kiválasztott sor `undo highlighting` (default: `true`)
- A `checked {String}` `path` egy változóhoz vagy a `function(rows, grid)` útvonalához fut, ha a felhasználó kiválasztotta/ellenőrizte néhány sorot.
- A `autoselect {Boolean}` lehetővé teszi az első sor automatikus kiválasztását a hálózatban, a `EXEC(config.click)`-et teljesíti, alapértelmezett: `false`
- `limit {Number}` egy klaszter korlátozás, alapértelmezett: `80`
- `numbering {Boolean}`, opcionális alapértelmezett `false`
- `allowtitles {Boolean}`, lehetővé teszi az összes sor értékének címét, opcionális alapértelmezett `false`
- `button {String}` egy link a `function(btn_name, row, btn_element, event, name)` fut, ha a felhasználó kattint egy __ gomb__ a sorban
- `exec {String}` egy link a `function(type, filter, sort, page)` csak a szerver oldalán működő műveletekhez (a kliens oldalán sorozás és szűrés megakadályozható), támogatott típusok: `refresh` vagy `page`
- `changed {String}` `path` egy változóra vagy a `function(rows, grid)` útvonalra fut, ha a felhasználó megváltoztatja néhány sorot
- `change {String/Boolean}` A boolean lehetővé teszi a belső szerkesztést vagy a szalagot, amely tartalmazza a `path` Változó vagy útvonal `function(meta, next(meta))` a felhasználó kétszeres kattintással (`meta` Lehet `null` ha a hálózat frissül) + `next(null)` Újra helyettesíti a korábbi tartalmakat
- A `columns {String}` a `columns {Array}` meghatározásához vezet
- `dblclick {String}` egy link a `function(row, grid, row_el)` módszerre, akkor fut, ha a felhasználó kétszer kattint egy sorban
- A `noborder {Boolean}` kikapcsolhatja a hálózat körül lévő határt (default: `false`)
- A `clusterize {Boolean}` kikapcsolhatja a klaszteres forgalmat (default: `true`)
- `contextmenu {String}` egy link a `function(e, grid)` amikor a felhasználó felemeli a kontextus menüt
- `autoformat {Boolean}` automatikus formátumok, mint például `email`, `phone` és `number` (Az alapértelmezett `true`)
- `controls {Boolean}` lehetővé teszi a `columns` meghatározott ellenőrzéseket (default: `true`)
- `hfunc {String}` egy link a `function(el)` módszer, akkor fut, ha a felhasználó kattintson az ikon hozzáadott nagyon első címsor sorban. usefull integrálni más komponens DataGrid. e.g. j-szűrő
- `hfuncicon {String}` hfunc ikon például otthon, cog stb.
- `pagination {Boolean}` engedélyezi / megakadályozza az oldaladást (default: `true`)
	- A `config.exec` akkor fut, ha a szalag véget ér, és használhatja a nyers válasz `array` sorok
- `ovalue {String}` A hiányzó kulcs a `value` A `column.options` (Az alapértelmezett `id`)
- `otext {String}` A hiányzó kulcs a `text` A `column.options` (Az alapértelmezett `name`)

__oszlop tulajdonságai__:

- `name {String}` - A mező neve a sorban
- `text {String}` egy oszlop címke, a szöveg a `.ti ti-home` megjeleníti a Total ikon
- `title {String}` egy oszlop eszköze (opcionális)
- `width {Number}` egy oszlop szélessége (opcionális, alapértelmezett `config.colwidth`)
- `filter {String/Boolean}` a szűrő helytartója, vagy `boolean` kikapcsolhatja a szűrést ebben a oszlopban (opcionális)
- `filtervalue {Object}` opcionális, előre meghatározott szűrőérték (default: `undefined`)
- `filtertype {Number/String}`, `1` kiküszöböli az intelligens keresést (default: `0` - ez azt jelenti, hogy az intelligent keresés aktiválva van)
- `align {String}` lehet `center` vagy `right` (opcionális, alapértelmezett: `left`)
- `template {String}` lehet a Tangular mintája, és a modell az egész sor tárgyát jelenti.
- `sorting {Boolean}` lehetővé teszi a sorozást (opcionális, alapértelmezett: `true`)
- `search {Boolean/String}` `true` Az értéket a `template` Az eredmény vagy `String` Lehet a Tangular Template, amelyet keresési értékként használnak
- `format {String/Number}` használható dátumok és számok (szám decimális) mező (opcionális), például `dd.MM.yyyy`
- A `hide {Boolean}` egy oszlopot rejt
- `listcolumn {Boolean}` alapértelmezett: Igaz, hamis oszlop eltávolítása oszlopok listáján
- `hidden {String}` mint tű funkció `column => true` --> oszlop lesz rejtve (például korlátozó felhasználó)
- `options {Object Array}` opcionális, egy személyre szabott szűrő például `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r link adatforrás
- `otext {String}` Választható, kulcs a `text` A mezőben `options`A default `config.otext`
- `ovalue {String}` Választható, kulcs a `value` A mezőben `options`A default `config.ovalue`
- `buttonapply {String}` opcionális, a `Apply` gomb címkéje oszlopokban, alapértelmezett: `Apply`
- `class {String}` opcionális, egy személyre szabott oszlop osztály neve
- `empty {String/Boolean}` opcionális, az üres értéket a üres mezőben meghatározott értékkel írhatja újra (a `true` értéke a `---` alapértelmezett értéktől függ)
- `min {Number}` _szerkeszthető csak_ egy min. szám értéke
- `max {Number}` _szerkeszthető csak__ max. szám értéke
- `required {Boolean}` - csak szerkeszthető
- `dirsearch {String/Boolean}` a `j-Directory` keresés helyszínét, a `false`-es boolean letiltja a keresést
- `type {String}` opcionális, tartalmazhat egy adattípus (`string`, `boolean`, `date`, `number`, `email`, `phone` vagy `url`) a mező
- A `editable {Boolean}` lehetővé teszi a szerkesztést
- `currency {String}` egy pénznem neve (meg kell határozni a `DEF.currencies`)
- `editable {String}` Az út a személyre szabható `function(meta)`, fontos: `meta.next(new_value)` vagy `meta.cancel()`
- A `colorize {Boolean}` lehetővé teszi az érték színezését
- A `monospace {Boolean}` monospace font típusát engedélyezi
- __NEW__ `raw {Boolean}` lehetővé teszi/megtagadja a HTML-t a oszlopszűrőkben (elsődleges: `false`)
- __NEW__ `pair {Boolean}` lehetővé teszi/megtagadja az automatikus értékek párosítását a `options` konfigurációval (előzetes: `false`)

__Rövid ellenőrzés (New)__:

- Az oszlop típusának `controls`-nek lehet meghatározni
- meghatározott oszlop `template` (Tangular, `row` egy modell a Tangular minden sorban)
- Nézd meg a példát
- A `click` esemény gombot a `config.button`-re rögzítik

__Szűrő__:

- `numbers`: (1) a `number` pontos számot keres, (2) a `number - number` a számok közötti intervallum.
- `strings`: (1) a `string` egy pontos vonalat keres, (2) a `string1, string2, string3` több keresési kritérium
- `dates`• 1 év `2017` Az idei év összes dátumát keresik (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` a dátumok közötti időtartam, (3) `12-20 - 12-31` <--> `20.12 - 31.12` A jelenlegi év dátumai közötti intervallum (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` vagy (5) `-5 days` <--> `-1 week` <--> `-10 years`

__módszerek__:

- A `component.redraw([reselect_again])` ismét a sorokat átirányíthatja (csak módosítások esetén, ha eltávolítja az egész modell frissítéséhez szükséges sorokat)
- A `component.resetfilter()` egy szűrőt állíthat be
- `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])` exportálhat sorokat a szerver oldalán
- `component.appendrow(row_object, [scrolldown], [prepend])` és rendes sor
- `component.redrawrow(row_object, [new_object_row])` redraws sor vagy __NEW__: helyettesíti + redrays `row_object` egy új `new_object_row`
- A `component.clear()` megtisztítja az összes változást
- `component.select(row)` kiválasztja a `row` kell ugyanaz a tárgy, mint az adatforrás
- `component.editcolumn(row_index, col_index)` végzi a `config.change` belsőleg (csak fejlett használatra)
- A `component.applyfilter(obj)` alkalmazható a `{ name: 'Peter', age: '20 - 50' }` szűrővel
- `component.resetcolumns()` újraindítás
- A `component.readfilter()` visszatér a jelenlegi szűrővel
- `component.rebind(schemaname__or__columnsdeclaration)` a módszer visszahívja a schéma
- A `component.reload()` a jelenlegi szűrővel és sorozattal fut `config.exec`
- `component.empty()` Empty minden sorban
- `component.redrawcolumns()` redraw oszlopok újra beállítása nélkül
- __NEW__: a `component.schema(name)` megváltoztatja a rendszerét és frissíti az adatokat

__tulajdonság__:

- A `component.meta` belső meta információkat ad a szűrőkről, oszlopokról és sorokról

__Jó tudni__:

- `NULL('link.to.data')` Értékelés `config.exec`
- `SET('link.to.data', data, 'noscroll')` -> `noscroll` típus megakadályozza a forgatás újraállítása

__Hogyan kell kiterjeszteni a sorrendet?__

- Nézd meg a `{{ if active }}` a sor, kiterjeszti a sor osztályát hozzáadva `dg-active-class` Ha a `active` érvényes lesz

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

__Többféle rendszer__:

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

Használja a `<ui-component name="datagrid">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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