j-DataGrid

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Questa rete è stata creata per applicazioni di singola pagina e applicazioni aziendali.

Il sistema di rete bootstrap
Puoi rendere più di 30.000 righe senza problemi
Supporto di drag&drop
Supporto per la sorta
Supporta il ripristino delle colonne
Supporta la scorrimento orizzontale/verticale
Supporta i filtri
Supporto dei checkboxes
Scrollbars indipendenti su OS
Rispondi
Sviluppo - Modo oscuro
IMPORTANT opzioni di colonna filtro ha bisogno di componente j-Directory

Il Do:

multisorte
Ristrutturazione delle colonne per i dispositivi touch
Ristrutturazione delle colonne per i dispositivi touch

data-source deve contenere:

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

o Array crudo ma non è possibile utilizzare paginazione e filtri esterni:

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

Configurazione:

filterlabel {String} un locatore predefinito per tutti i filtri (opzionale)
rememberfilter {Boolean} con vero che ricorda i filtri per ogni schema (default: true)
schema {String} un schema predefinito (default: default)
pluralizepages {String} pluralizzazione per pagine (opzionale, predefinito: # pages,# page,# pages,# pages)
pluralizzazione di pluralizeitems {String} per gli articoli (opzionale, predefinito: # items,# item,# items,# items)
height {Number/String} Altezza della rete, valori supportati: auto (in base al nuovo) fluid, parent (o parent1, parent2o NUMBER L’altezza o selector per il sito jQuery.closest()
L'altezza minima di minheight {Number} della rete, funziona con l'alto fluid e auto (default: 200)
Selettore parent {String} per l'opzione di altezza auto (default: window)
margin {Number} una margina superiore per l'altezza (opzionale, predefinito: 0)
boolean {String} un valore per la filtrazione dei valori booleani (opzionale, predefinito: true|on|yes)
resize {Boolean} consente la ripresa delle colonne (opzionale, predefinito: true)
reorder {Boolean} consente la re-ordine delle colonne (opzionale, predefinito: true)
sorting {Boolean} consente di classificare (opzionale, standard true)
remember {Boolean} ricorda le colonne di re-ordine e di ritorno (opzionale, standard true)
checkbox {Boolean} permette il checkboxes
colwidth {Number} una larghezza di colonna predefinita in pixel (opzionale, predecessivo 150)
rowheight {Number} un'altezza di linea predefinita in pixel (opzionale, predecessivo: 24) + dipende da CSS
alignheader {String/Number} Align per il titolo right (o 2o center (o 1(Opzionale e di default) left)
alignfilter {String/Number} Align per il filtro di input right (o 2o center (o 1(Opzionale e di default) left)
align {String/Number} Alineamento per un valore di colonna right (o 2o center (o 1(Opzionale e di default) left)
click {String} un collegamento a un percorso o function(row, grid, row_el), un record verrà assegnato/eseguito se l'utente fa clic su una riga
clickid {String} un identificatore/nome di proprietà per il riproduttivo indietro (per l'avanguardia della fila), predefinito: id
highlight {Boolean} ogni riga selezionata (dopo click) sarà evidenziato (default: false)
unhighlight {Boolean} consente undo highlighting della linea selezionata (default: true)
checked {String} path a una variabile o la strada a function(rows, grid) viene eseguita se l'utente ha selezionato / controllato alcune righe
autoselect {Boolean} consente di selezionare automaticamente la prima riga in rete, esegue EXEC(config.click), standard: false
limit {Number} un limite di cluster, standard: 80
numbering {Boolean}, standard opzionale false
allowtitles {Boolean}, permette titoli per tutti i valori di riga, standard opzionale false
button {String} un collegamento a function(btn_name, row, btn_element, event, name) viene eseguito se l'utente fa clic su un button nella riga
exec {String} un collegamento a function(type, filter, sort, page) solo per le operazioni sul server (è in grado di disattivare la classificazione e il filtraggio sul client), tipi supportati: refresh o page
changed {String} path a una variabile o percorso a function(rows, grid) viene eseguito se l'utente ha cambiato alcune righe
change {String/Boolean} boolean consente l'editing interno o la riga deve contenere un path a una variabile o il percorso a function(meta, next(meta)) viene eseguito se l'utente fa doppio clic su una colonna (meta può essere null se la rete è rinnovata) + next(null) sostituisce nuovamente il contenuto precedente
columns {String} è un percorso verso la definizione di columns {Array}
dblclick {String} un collegamento al metodo function(row, grid, row_el), viene eseguito se l'utente fa doppio clic su una riga
noborder {Boolean} può disattivare una frontiera intorno alla rete (default: false)
clusterize {Boolean} può disattivare la scorrimento clusterato (default: true)
contextmenu {String} un collegamento a function(e, grid) quando l'utente alza il menu di contesto
autoformat {Boolean} consente tipi di formato automatico come email, phone e number (default: true)
controls {Boolean} consente i controlli definiti in columns (default: true)
hfunc {String} un collegamento al metodo function(el), viene eseguito se l'utente fa clic sull'icona aggiunta alla prima riga di titolo. usefull per integrare un altro componente con DataGrid.
hfuncicon {String} hfunc icone, come la casa, cog, ecc.
pagination {Boolean}: consentono/disabilitano le pagine (default: true)
- config.exec verrà eseguito se la barra di scorrimento è alla fine, e si può usare come risposta matura array delle righe
ovalue {String} una chiave predefinita per ottenere value da column.options (predefinito: id)
otext {String} una chiave predefinita per ottenere text da column.options (predefinito: name)

Proprietà della colonna:

name {String} un nome di campo nell'oggetto di riga
text {String} è un'etichetta della colonna, il testo con .ti ti-home renderà l'icona totale
title {String} una colonna tooltip (opzionale)
width {Number} una colonna larghezza (opzionale, predefinito config.colwidth)
filter {String/Boolean} è un contenitore del filtro o boolean può disattivare il filtro per questa colonna (opzionale)
filtervalue {Object} opzionale, un valore di filtro predefinito (default: undefined)
filtertype {Number/String}, 1 disabilita la ricerca intelligente (default: 0 - significa che è abilitata la ricerca inteligente)
align {String} può essere center o right (opzionale, predefinito: left)
template {String} può essere un modello Tangular e il modello è l'intero oggetto della riga
sorting {Boolean} consente la classificazione (opzionale, predefinito: true)
search {Boolean/String} true filtrerà un valore in base al risultato template o String può essere un modello Tangular che verrà utilizzato come valore per la ricerca
format {String/Number} può essere utilizzato per la data e i numeri (numero di decimali) campo (opzionale), ad esempio dd.MM.yyyy
hide {Boolean} nasconde una colonna
listcolumn {Boolean}: vero, falso per rimuovere la colonna dalla lista delle colonne
hidden {String} Come funzione di pistola column => true --> la colonna sarà nascosta (ad esempio per restringere l'utente)
options {Object Array} opzionale, un filtro personalizzato per esempio [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r collegamento alla fonte di dati
otext {String} opzionale, una chiave per il campo text in options, standard config.otext
ovalue {String} opzionale, una chiave per il campo value in options, standard config.ovalue
buttonapply {String} opzionale, un'etichetta per il pulsante Apply in colonne, predefinito: Apply
class {String} opzionale, un nome di classe personalizzato
empty {String/Boolean} è opzionale, può ri-scrivere il valore vuoto con il valore definito nel campo vuoto (il valore true utilizza --- come valore predefinito)
min {Number} editabile solo un min. valore
max {Number} editabile solo un valore massimo
required {Boolean} - Editore solo
dirsearch {String/Boolean} un locatore per la ricerca di j-Directory, boolean con false disabiliterà la ricerca
type {String} opzionale, può contenere un tipo di dati (string, boolean, date, number, email, phone o url) per il campo
editable {Boolean} consente di modificare
currency {String} un nome di valuta (deve essere definito in DEF.currencies)
editable {String} Un cammino verso il personalizzabile function(meta), importante: meta.next(new_value) o meta.cancel()
colorize {Boolean} consente di colorare il valore
monospace {Boolean} permette il tipo di font monospaziale
NEW raw {Boolean} consente/disabilita l'escapazione HTML nei filtri di colonna (default: false)
NEW pair {Boolean} consente/disabilita il valore automatico in combinazione con la configurazione options (default: false)

Controlli di rotazione (NEW):

può essere definito come tipo di colonna controls
deve essere definita la colonna template (Tangular, row è un modello per Tangular per ogni riga)
Guarda l’esempio
Il pulsante di evento click viene catturato a config.button

Filtrare:

numbers: (1) number cerca un numero esatto, (2) number - number è un intervallo tra i numeri
strings: (1) string cerca una riga esatta, (2) string1, string2, string3 è un criterio di ricerca multiplo
dates(1) Il giorno 2017 Tutte le date di quest'anno (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 è un intervallo tra le date, (3) 12-20 - 12-31 -- 20.12 - 31.12 un intervallo tra le date dell'anno in corso e (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 o (5) -5 days -- -1 week -- -10 years

Metodi:

component.redraw([reselect_again]) può riprendere le righe (solo per modifiche, se si rimuove alcune righe è necessario aggiornare l'intero modello)
component.resetfilter() può ripristinare un filtro
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]) può esportare righe con rendering sul server
component.appendrow(row_object, [scrolldown], [prepend]) appends e render ordine
component.redrawrow(row_object, [new_object_row]) riduce la linea o NEW: sostituisce +Riduce row_object con un nuovo new_object_row
component.clear() chiarisce tutti i cambiamenti
component.select(row) seleziona row deve essere lo stesso oggetto che nella fonte dati
component.editcolumn(row_index, col_index) esegue config.change internamente (solo per uso avanzato)
component.applyfilter(obj) può applicare un filtro personalizzato { name: 'Peter', age: '20 - 50' }
component.resetcolumns() riproduzione delle colonne
component.readfilter() ritorna un filtro attuale
component.rebind(schemaname__or__columnsdeclaration) il metodo rimborserà lo schema
component.reload() esegue config.exec con il filtro e la sorta corrente
component.empty() di tutte le righe
Ristrutturare le colonne component.redrawcolumns() senza riprendere
NEW: component.schema(name) cambia un schema e rinvia i dati

Proprietà:

component.meta ritorna i metadati interni sui filtri, le colonne e le righe

Buono sapere:

NULL('link.to.data') Valutazione config.exec
SET('link.to.data', data, 'noscroll') -> tipo noscroll disabilita la ripresa della scorrimento

Come estendere una classe di riga?

guardare la linea {{ if active }}, si estende una classe di riga aggiungendo dg-active-class se il active sarà valido

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

Numerosi schemi:

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

Utilizzare con <ui-component name="datagrid">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

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>