j-DataTable

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

BETA: Tato složka je zaměřena na seznamování SPA a serveru.

Podporuje stránku
Systém bootstrap
Podporuje sortizaci
Podporuje vertikální/horizontální scrolling
Odpovědnost
Podporuje tmavý režim

Data-source musí obsahovat:

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

Konfigurace:

Pluralizace pluralizepages {String} pro stránky (volitelné, výchozí: # pages,# page,# pages,# pages)
Pluralizace pluralizeitems {String} pro položky (volitelné, výchozí: # items,# item,# items,# items)
height {Number/String} Výška sítě, podporované hodnoty: auto (přesněji řečeno) - nové fluid, parent nebo NUMBER jako výška nebo selector pro jQuery.closest()
NEW minimální výška sítě minheight {Number}, pracuje s výškou fluid a auto (předvolený: 300)
NEW parent {String} selektor pro možnost výšky auto (předvolený: window)
margin {Number} je vrcholová hranice pro výšku (volitelná, výchozí: 0)
click {String} odkaz na function(row, grid, row_el), je spuštěn, pokud uživatel klikne na řádek
Každý zvolený řádek highlight {Boolean} (po click) bude zdůrazněn (podle předvolby: false)
unhighlight {Boolean} umožňuje undo highlighting vybraného řádku (podmínkou: true)
checked {String} path na proměnnou nebo cestu k function(rows, grid) se provede, pokud uživatel vybral/kontroloval některé řádky
autoselect {Boolean} umožňuje automaticky vybírat první řádek v síti, provádí EXEC(config.click), předvolený: false
exec {String} odkaz na function(type, page, sort) pouze pro serverové operace (vypouští třídění a filtrování klienta), podporované typy: refresh nebo page
changed {String} path na proměnnou nebo cestu k function(rows, grid) se provádí, pokud uživatel změnil některé řádky
dblclick {String} odkaz na metodu function(row, grid, row_el), je spuštěn, pokud uživatel klikne na řádek
noborder {Boolean} může deaktivovat hranice kolem sítě (předvolené: false)
Standardní šířka colwidth {Number} pro sloupce (default: 150)
editable {String} odkaz na function(opt) když uživatel provádí úpravu
contextmenu {String} odkaz na function(e, grid) když uživatel zvyšuje kontext menu

Kolonové vlastnosti:

name {String} - název pole v řádném objektu
text {String} sloupec, text s .fa fa-home bude fontAwesome ikona
width {Number} Široká šířka sloupce (volitelná, výchozí) config.colwidth)
align {String} může být center nebo right (volitelné, výchozí: left)
template {String} může být šablona Tangular a model je celým předmětem řádku
sort {Boolean} umožňuje srovnání (volitelné, předběžné: false)
format {String/Number} lze použít pro datum a čísla (počet desítek) pole (volitelné), např. dd.MM.yyyy
currency {String} měnový formát, stačí přidat měnu
class {String} volitelný, přizpůsobený název třídy
empty {String/Boolean} volitelně, může přepsat prázdnou hodnotu s hodnotou definovanou v prázdném poli (hodnota true používá hodnotu --- jako předvolenou hodnotu)
type {String} je volitelný, může obsahovat typ údajů (boolean, date nebo number) pro pole
editable {Boolean} umožňuje úpravu

Metody:

component.redrawrow(row_object/index) redraws řádek nebo NEW: nahrazuje +redraws row_object novým new_object_row
component.clear() vyčistí všechny změny
component.select(row) vybere row musí být stejný objekt jako v datovém zdroji
component.rebind(columnsdeclaration) - Metoda odráží schéma
NEW: component.reload() provádí config.exec s aktuálním filtrem a řadou
NEW: component.empty() empties všechny řádky

Dobré vědět:

SET('link.to.data', data, 'noscroll') -> typ noscroll znemožňuje resetování

Jak rozšiřovat třídu řádku?

Podívejte se na {{ if active Způsob, jak rozšířit třídu řádku přidáním dg-active-class Pokud je active Bude platný

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

Použijte ji s <ui-component name="datatable">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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>