j-Grid

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

Il sistema di rete bootstrap

data-source deve contenere:

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

filter {Boolean} mostra un filtro (opzionale, predefinito: true)
filterlabel {String} un contenitore di posizione predefinito per tutti i filtri (opzionale)
external {Boolean} è una fonte di dati esterna (carica dinamica dei dati) (optina, predefinita: false)
pluralizepages {String} pluralizzazione per le pagine (opzionale, predefinito: # pages,# page,# pages,# pages)
pluralizeitems {String} pluralizzazione per gli articoli (opzionale, predefinito: # items,# item,# items,# items)
exec {String} un collegamento a function(type, filter, sort, page), viene valutato se la rete esegue alcune operazioni
padding {Numero} di altezza (opzionale, predefinito: 0)
autosize {Boolean} consente auto-dimensioni di piena altezza (opzionale, standard true)
boolean {String} un valore per la filtrazione dei valori booleani (opzionale, predefinito: true|on|yes)
pagination {Boolean} mostra il pannello di pagina (opzionale, predefinito: false)
init {Funzione} una funzione init per es. colonne personalizzate
checked {Funzione} se le righe contengono <input type="checkbox allora questa funzione sarà valutata quando la scatola è controllata

Proprietà della colonna:

name {String} un nome di campo nell'oggetto
text {String} un'etichetta della colonna
title {String} un tooltip della colonna (opzionale)
size {Numero} una colonna di larghezza: 1 Il piccolo, 2 di mezzo, 3 Il grande, 4 molto grande (opzionale, default) 1)
size {String} una colonna di larghezza in pixel, il valore deve contenere px ecc. 20px
filter {String/Boolean} un contenitore del filtro o boolean può disattivare il filtro per questa colonna (opzionale)
format {String/Number} per i valori di formattamento (string per la data, number per i numeri)
background {String} un colore di sfondo (opzionale)
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
render {String/Function(valore, colonna, riga)} un rendering personalizzato, string è valutato come funzione di pistola
header {String/Function(colonna)} un rendering personalizzato del titolo, string è valutato come funzione di freccia
sort {Boolean} consente la classificazione (opzionale, predefinito: true)
class {String} classi aggiuntivi per la colonna, ad esempio hidden-xs
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

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) anno 2017 cerca tutte le date in quest'anno, (2) 2017-02-12 / 2017-03-13 è un intervallo tra le date, (3) 20.12 / 31.12 è un intervallo tra le data nell'anno corrente

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

<style>
	body{padding:50px;margin:0;background-color:#F0F0F0;font-family:Arial;height:100%;}
	html{height:100%;}
</style>

<ui-component name="grid" path="griddata" config="exec:filtering">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', size: 2, render: 'n => n.toUpperCase()', filter: 'Search in name' },
			{ name: 'price', text: 'Price', size: 1, format: 2, filter: 'Search in prices', align: 'right' },
			{ name: 'description', text: 'Description', size: 3, filter: 'Search in description' },
			{ name: 'created', text: 'Created', size: 1, filter: 'Search in dates', format: 'dd.MM.yyyy', align: 'center' }
		]
	</script>
</ui-component>

<script>
	var griddata = { page: 1, count: 18, pages: 3, limit: 6, items: [] };
	var items = griddata.items;

	items.push({ name: '1 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 233, created: new Date().add('-5 days') });
	items.push({ name: '2 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 122, created: new Date().add('-1 year') });
	items.push({ name: '3 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 119, created: new Date().add('-1 month') });
	items.push({ name: '4 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 35.34, created: new Date().add('-14 days') });
	items.push({ name: '5 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 439.33, created: new Date().add('-5 hours') });
	items.push({ name: '6 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 111.12, created: new Date().add('-349 minutes') });

	// Auto-resize
	$(window).on('resize', function() {
		setTimeout2('resize', function() {
			EMIT('resize');
		}, 100);
	});

	function filtering(type, filter, sort, page) {
		console.log(type, filter, sort, page);
	}

</script>