# j-DataTable

> BETA: Ez az összetevő a SPA és a szerver oldal listájára irányul.

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

__BETA__: Ez az összetevő a SPA és a szerver oldal felsorolására irányul.

- Támogatja az oldalakat
- `bootstrap` hálózati rendszer
- Támogatja a sorozást
- Vertikális/horizontális forgatás
- Válasz
- Támogatja a sötét módot

Az adatforrásnak tartalmaznia kell:

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

__konfiguráció__:

- `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 `NUMBER` A magasság vagy `selector` A jQuery.closest oldalról
- __NEW__ `minheight {Number}` minimális hálózati magasság, működik a `fluid` és a `auto` magasság (default: `300`)
- __NEW__ `parent {String}` kiválasztó a `auto` magasság opció (default: `window`)
- `margin {Number}` a magasság felső marginja (opcionális, alapértelmezett: `0`)
- `click {String}` egy link a `function(row, grid, row_el)`, akkor fut, ha a felhasználó kattint egy sorban
- `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`
- `exec {String}` egy link a `function(type, page, sort)` 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
- `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`)
- `colwidth {Number}` egy alapértelmezett szélesség oszlopok (default: `150`)
- `editable {String}` a `function(opt)` linkre, amikor a felhasználó szerkesztést végez
- `contextmenu {String}` egy link a `function(e, grid)` amikor a felhasználó felemeli a kontextus menüt

__oszlop tulajdonságai__:

- `name {String}` - A mező neve a sorban
- `text {String}` egy oszlop címke, a szöveg a `.fa fa-home` lesz FontAwesome ikon
- `width {Number}` egy oszlop szélessége (opcionális, alapértelmezett `config.colwidth`)
- `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.
- `sort {Boolean}` lehetővé teszi a sorozást (opcionális, alapértelmezett: `false`)
- `format {String/Number}` használható dátumok és számok (szám decimális) mező (opcionális), például `dd.MM.yyyy`
- `currency {String}` egy pénznem formátum, csak adjunk hozzá valutát
- `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)
- `type {String}` opcionális, tartalmazhat egy adattípus (`boolean`, `date` vagy `number`) a mező
- A `editable {Boolean}` lehetővé teszi a szerkesztést

__módszerek__:

- `component.redrawrow(row_object/index)` 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.rebind(columnsdeclaration)` a módszer visszahívja a schéma
- __NEW__: `component.reload()` fut `config.exec` a jelenlegi szűrővel és sorozással
- __NEW__: `component.empty()` empties minden sorban

__Jó tudni__:

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

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

Használja a `<ui-component name="datatable">`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
<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>
```