# j-Grid

> Visualizza i registri di tabella con filtraggio, pagamento e una fonte di dati configurabile.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: b584985aa31c780509732a13e1097e2e4a1b801a41e516788c647b4741b9cbff
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Il sistema di rete `bootstrap`

__data-source__ deve contenere:

```javascript
{
    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.

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