j-DataGrid

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

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:

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

[{ 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, parent2vagy 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 2vagy center vagy 1(Az opcionális és a default: left)
alignfilter {String/Number} A filter bevezetéséhez right vagy 2vagy center vagy 1(Az opcionális és a default: left)
align {String/Number} Egy oszlop értéke right vagy 2vagy 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 optionsA default config.otext
ovalue {String} Választható, kulcs a value A mezőben optionsA 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

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

Többféle rendszer:

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

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>