j-DataTable

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

BETA: Questo componente è mirato per la lista SPA e server-side.

Supporta la pagina
Il sistema di rete bootstrap
Supporto per la sorta
Supporta la scorrimento orizzontale/verticale
Rispondi
Sviluppo - Modo oscuro

data-source deve contenere:

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

Configurazione:

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 NUMBER L’altezza o selector per il sito jQuery.closest()
NEW minheight {Number} altezza minima della rete, funziona con altezza fluid e auto (default: 300)
NEW parent {String} selettore per l'opzione di altezza auto (default: window)
margin {Number} una margina superiore per l'altezza (opzionale, predefinito: 0)
click {String} un collegamento a function(row, grid, row_el), viene eseguito se l'utente fa clic su una riga
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
exec {String} un collegamento a function(type, page, sort) 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
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)
colwidth {Number} una larghezza predefinita per le colonne (predefinito: 150)
editable {String} un collegamento a function(opt) quando l'utente esegue la modifica
contextmenu {String} un collegamento a function(e, grid) quando l'utente alza il menu di contesto

Proprietà della colonna:

name {String} un nome di campo nell'oggetto di riga
text {String} è un'etichetta della colonna, il testo con .fa fa-home renderà FontAwesome icon
width {Number} una colonna larghezza (opzionale, predefinito config.colwidth)
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
sort {Boolean} consente la classificazione (opzionale, predefinito: false)
format {String/Number} può essere utilizzato per la data e i numeri (numero di decimali) campo (opzionale), ad esempio dd.MM.yyyy
currency {String} un formato di valuta, basta aggiungere una valuta
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)
type {String} opzionale, può contenere un tipo di dati (boolean, date o number) per il campo
editable {Boolean} consente di modificare

Metodi:

component.redrawrow(row_object/index) 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.rebind(columnsdeclaration) il metodo rimborserà lo schema
NEW: component.reload() esegue config.exec con il filtro corrente e la sorta
NEW: component.empty() impiegano tutte le righe

Buono sapere:

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

Utilizzare con <ui-component name="datatable">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

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