j-DataGrid

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

Tato síť byla vytvořena pro jediné aplikace a podnikové aplikace.

Systém bootstrap
Můžete vydat více než 30 000 řádků bez problémů
Podporuje drag&drop sloupce
Podporuje sortizaci
Podporuje odstraňování sloupů
Podporuje vertikální/horizontální scrolling
Podporuje filtry
Podporuje checkboxes
Skládací bary nezávisle na OS
Odpovědnost
Podporuje tmavý režim
IMPORTANT sloupec možnosti filtr potřebuje složku j-Directory

To-do:

Množství
Převod sloupců pro dotykové zařízení
Přepisování sloupců pro dotykové zařízení

Data-source musí obsahovat:

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

nebo surové Array, ale nemůžete použít stránky a externí filtry:

[{ name: 'Row 1' }, { name: 'Row 2' }];

Konfigurace:

filterlabel {String} je standardní držák místa pro všechny filtry (volitelné)
rememberfilter {Boolean} s pravým to připomíná filtry pro každý režim (předvolený: true)
schema {String} je standardní schéma (default: default)
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 parent1, parent2a) nebo NUMBER jako výška nebo selector pro jQuery.closest()
Minimální výška sítě minheight {Number}, práce s výškou fluid a auto (předvolený: 200)
Výběr parent {String} pro možnost výšky auto (předvolený: window)
margin {Number} je vrcholová hranice pro výšku (volitelná, výchozí: 0)
boolean {String} hodnoty pro filtrování booleánových hodnot (volitelné, výchozí: true|on|yes)
resize {Boolean} umožňuje resing sloupců (volitelné, výchozí: true)
reorder {Boolean} umožňuje přepracování sloupců (volitelné, výchozí: true)
sorting {Boolean} umožňuje srovnání (volitelné, předvolené true)
remember {Boolean} připomíná re-objednávání a resing sloupců (volitelné, výchozí true)
checkbox {Boolean} umožňuje kontrolní krabičky
colwidth {Number} je standardní šířka sloupce v pixlech (volitelné, standardní 150)
rowheight {Number} je výchozí výška řádku v pixlech (volitelně: 24) + závisí na CSS
alignheader {String/Number} Align pro hlavu right nebo 2a) nebo center nebo 1Opční a default: left)
alignfilter {String/Number} Přizpůsobení filtru right nebo 2a) nebo center nebo 1Opční a default: left)
align {String/Number} Přizpůsobte se hodnotě sloupce right nebo 2a) nebo center nebo 1Opční a default: left)
click {String} odkaz na trati nebo function(row, grid, row_el), záznam bude přidělen/vykonan, pokud uživatel klikne na řádek
clickid {String} název identifikátoru / majetku pro zpětné vyhledávání (pro předchozí řádek), výchozí: id
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
limit {Number} je limit klastru, standardní: 80
numbering {Boolean}Opční default false
allowtitles {Boolean}, umožňuje tituly pro všechny hodnoty řádku, volitelná předvolba false
button {String} odkaz na function(btn_name, row, btn_element, event, name) je spuštěn, pokud uživatel klikne na button v řádku
exec {String} odkaz na function(type, filter, sort, page) 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
change {String/Boolean} boolean umožňuje vnitřní úpravu nebo řetězec musí obsahovat path k proměnné nebo trasa k function(meta, next(meta)) je spuštěna, pokud uživatel dvakrát klikne na sloupec (meta může být null pokud je síť obnovena) + next(null) nahrazuje předchozí obsah znovu
columns {String} je cesta k definici columns {Array}
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)
clusterize {Boolean} může vypnout klastrované otáčení (podmínkou: true)
contextmenu {String} odkaz na function(e, grid) když uživatel zvyšuje kontext menu
autoformat {Boolean} umožňuje typy automatického formátu, jako je email, phone a number (předvolené: true)
controls {Boolean} umožňuje kontroly definované v columns (podmínkou: true)
hfunc {String} odkaz na metodu function(el), je spuštěn, pokud uživatel klikne na ikonu přidanou do velmi prvního řádu hlavy. usefull integrovat jinou složku s DataGrid. např. j-filter
hfuncicon {String} hfunc ikona např. domácí, cog atd.
pagination {Boolean} aktivuje/neaktivuje stránku (podmínkou: true)
- config.exec bude spuštěn, pokud je řádek na konci, a můžete použít jako surovou odpověď array řádků
ovalue {String} je výchozí klíč pro získání value z column.options (důvodní: id)
otext {String} je výchozí klíč pro získání text z column.options (důvodní: name)

Kolonové vlastnosti:

name {String} - název pole v řádném objektu
text {String} sloupec, text s .ti ti-home bude zobrazovat Total ikonu
title {String} nástrojový tip sloupce (volitelné)
width {Number} Široká šířka sloupce (volitelná, výchozí) config.colwidth)
filter {String/Boolean} je místo pro filtr nebo boolean může vypnout filtr pro tento sloupec (volitelné)
filtervalue {Object} volitelně, předdefinovaná hodnota filtru (podle předvolby: undefined)
filtertype {Number/String}, 1 zabraňuje chytrému vyhledávání (podmínkou: 0 - znamená, že je aktivováno chytré vyhledání)
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
sorting {Boolean} umožňuje srovnání (volitelné, předběžné: true)
search {Boolean/String} true bude filtrovat hodnotu podle výsledku template nebo String může být šablona Tangular, která bude použita jako hodnota pro vyhledávání
format {String/Number} lze použít pro datum a čísla (počet desítek) pole (volitelné), např. dd.MM.yyyy
hide {Boolean} ukrývá sloupec
listcolumn {Boolean} default:pravdivý, falešný pro odstranění sloupce ze seznamu sloupců
hidden {String} jako šířka funkce column => true -> sloupec bude skryta (například pro omezení uživatele)
options {Object Array} volitelný, přizpůsobený filtr například [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r odkaz na zdroj dat
otext {String} volitelný, klíč pro pole text v options, předvolený config.otext
ovalue {String} volitelný, klíč pro pole value v options, předvolený config.ovalue
buttonapply {String} volitelné, štítek pro tlačítko Apply v sloupcích, předběžně: Apply
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)
min {Number} editable pouze min. hodnota
max {Number} editovatelný pouze max. číslo hodnoty
required {Boolean} - pouze editovatelný
dirsearch {String/Boolean} místo pro vyhledávání j-Directory, boolean s false bude vypnutý
type {String} volitelně, může obsahovat typ údajů (string, boolean, date, number, email, phone nebo url) pro pole
editable {Boolean} umožňuje úpravu
Název měny currency {String} (musí být definován v DEF.currencies)
editable {String} Cesta k úpravě function(meta)Důležité je: meta.next(new_value) nebo meta.cancel()
colorize {Boolean} umožňuje barevnost hodnoty
monospace {Boolean} umožňuje monospace typ písma
NEW raw {Boolean} umožňuje/nemožňuje únik HTML ve sloupcích filtrov (podle předvolby: false)
NEW pair {Boolean} umožňuje/vypustí automatickou hodnotu v kombinaci s konfigurací options (default: false)

Kontrolní řád (NEW):

Může být definován jako sloupec typu controls
musí definovat sloupec template (Tangular, row je model pro Tangular pro každý řádek)
Podívejte se na příklad
tlačítko click Událost je zachycena config.button

filtrování:

numbers: (1) number vyhledává přesné číslo, (2) number - number je interval mezi čísly
strings: (1) string vyhledává přesný řádek, (2) string1, string2, string3 je více vyhledávacím kritériem
dates(1) Roky 2017 Vyhledávání všech dat v letošním roce (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 je interval mezi daty, (3) 12-20 - 12-31 -- 20.12 - 31.12 Rozdíl mezi daty v aktuálním roce a (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 nebo (5) -5 days -- -1 week -- -10 years

Metody:

component.redraw([reselect_again]) může znovu přehrávat řádky (pouze pro změny, pokud odstraníte některé řádek potřebujete aktualizovat celý model)
component.resetfilter() může nastavit filtr
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]) může exportovat řádky s serverovým renderem
component.appendrow(row_object, [scrolldown], [prepend]) přidává a řádí
component.redrawrow(row_object, [new_object_row]) 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.editcolumn(row_index, col_index) provádí config.change interně (pouze pro pokročilé použití)
component.applyfilter(obj) může použít přizpůsobený filtr { name: 'Peter', age: '20 - 50' }
component.resetcolumns() opětovný kolumn
component.readfilter() vrátí aktuální filtr
component.rebind(schemaname__or__columnsdeclaration) - Metoda odráží schéma
component.reload() provádí config.exec s aktuálním filtrem a řadou
component.empty() všechny řádky
component.redrawcolumns() redraw sloupce bez jejich přestavby
NEW: component.schema(name) mění schématu a aktualizuje data

Vlastnosti:

component.meta vrací interní meta informace o filtech, sloupcích a řádcích

Dobré vědět:

NULL('link.to.data') Hodnocení config.exec
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 ...
]

Množství schémat:

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

Použijte ji s <ui-component name="datagrid">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

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