# j-DataGrid > Questa rete è stata creata per applicazioni di singola pagina e applicazioni aziendali. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: it Content-SHA256: f1089895b9e7b79ba0f62c05b285f406b7f455e41e09394030ea2837b60e746a Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded 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: ```js { 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: ```js [{ 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`, `parent2`o `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 `2`o `center` (o `1`(Opzionale e di default) `left`) - `alignfilter {String/Number}` Align per il filtro di input `right` (o `2`o `center` (o `1`(Opzionale e di default) `left`) - `align {String/Number}` Alineamento per un valore di colonna `right` (o `2`o `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 ```javascript [ '{{ if active }} dg-active-class{{ fi }}', { name: 'name', text: 'Name', width: 200 }, // other columns ... ] ``` __Numerosi schemi__: ```html ``` Utilizzare con ``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 ```