j-DataTable

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

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:

{
	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

[
	'{{ 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.

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>