# j-DataTable

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

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

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

```js
{
	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

```js
[
	'{{ 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.

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