j-DataTable

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

BETA: Tento komponent je určený pre SPA a výpisy na strane servera.

podporuje stránkovanie
potrebný mriežkový systém bootstrap
podporuje triedenie
podporuje vertikálne/horizontálne rolovanie
citlivý
podporuje tmavý režim

Data-source musí obsahovať:

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

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 mriežky, podporované hodnoty: auto (predvolené), NEW fluid, parent alebo NUMBER ako výška alebo selectorery.
NEW minheight {Number} minimálna výška mriežky, pracuje s výškou fluid a auto (predvolené: 300)
NEW Volič parent {String} pre možnosť výšky auto (predvolené: window)
margin {Number} horný okraj výšky (voliteľné, predvolené: 0)
click {String} odkaz na function(row, grid, row_el), spustí sa, ak používateľ klikne na riadok
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
exec {String} odkaz na function(type, page, sort) 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
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)
colwidth {Number} predvolená šírka stĺpcov (predvolená: 150)
editable {String} odkaz na function(opt), keď používateľ vykonáva úpravy
contextmenu {String} odkaz na function(e, grid), keď používateľ vyvolá kontextovú ponuku

Vlastnosti stĺpca:

name {String} názov poľa v objekte riadku
text {String} štítok stĺpca, text so .fa fa-home vykreslí ikonu FontAwesome
width {Number} šírka stĺpca (voliteľné, predvolená hodnota config.colwidth)
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
sort {Boolean} umožňuje triedenie (voliteľné, predvolené: false)
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
currency {String} formátovač meny, stačí pridať menu
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)
type {String} voliteľné, môže obsahovať typ údajov (boolean, date alebo number) pre pole
editable {Boolean} umožňuje editáciu

Metódy:

component.redrawrow(row_object/index) 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.rebind(columnsdeclaration) metóda znovu spája schému
NEW: component.reload() vykoná config.exec s aktuálnym filtrom a triedením
NEW: component.empty() vyprázdni všetky riadky

Je dobré vedieť:

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

Použite ho so <ui-component name="datatable">. 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

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