# j-DataGrid > Dit netwerk is gemaakt voor single-page toepassingen en bedrijfsapplicaties. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: nl Content-SHA256: fa97fd9bf170d59455e347914b1d2009d4334173e7ae56d5b9aaa7b45d7dc86e Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Dit netwerk is gemaakt voor single-page toepassingen en bedrijfsapplicaties. - Een `bootstrap`-netwerk nodig - U kunt meer dan 30 000 ronden zonder problemen maken - Draag en drop columns - Ondersteunt het sorteren - ondersteunt het herstellen van kolommen - Ondersteunt verticale/horizontaal scrolling - Ondersteunt filters - Ondersteunt checkboxes - Custom scrollbars onafhankelijk op OS - Reactie - Ondersteunt het donkere mode - __IMPORTANT__ kolomopties filter vereist `j-Directory` component __To-do__: - Multisort - Columns voor touch-apparaten - herbestellen van kolommen voor touch-apparaten _Data-bron__ moet bevatten: ```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 } ``` of grondige `Array`, maar u kunt geen pagina's en externe filters gebruiken: ```js [{ name: 'Row 1' }, { name: 'Row 2' }]; ``` __Configuratie__: - `filterlabel {String}` een standaard plaatshouder voor alle filters (optional) - `rememberfilter {Boolean}` met waar het herinnert de filters voor elk schema (default: `true`) - `schema {String}` een standaard schema (default: `default`) - `pluralizepages {String}` pluralisatie voor pagina's (optional, standaard: `# pages,# page,# pages,# pages`) - `pluralizeitems {String}` pluralisatie voor items (optional, standaard: `# items,# item,# items,# items`) - `height {Number/String}` Hoogte van het netwerk, ondersteunde waarden: `auto` (de standaard) _NIEW `fluid`, `parent` ( of `parent1`, `parent2`) of `NUMBER` Als hoogte of `selector` voor jQuery.closest() - `minheight {Number}` minimale hoogte van het netwerk, werkt met `fluid` en `auto` hoogte (default: `200`) - `parent {String}` selector voor de `auto` hoogte optie (default: `window`) - `margin {Number}` een topmarge voor hoogte (optional, standaard: `0`) - `boolean {String}` een waarde voor het filteren van booleanwaarden (optional, default: `true|on|yes`) - `resize {Boolean}` maakt het mogelijk om kolommen te herstellen (optional, default: `true`) - `reorder {Boolean}` maakt het mogelijk om kolommen te herbestellen (optional, default: `true`) - `sorting {Boolean}` maakt het mogelijk om te sorteren (optional, default `true`) - `remember {Boolean}` herinnert aan re-order en resing kolommen (optional, standaard `true`) - `checkbox {Boolean}` maakt checkboxes mogelijk - `colwidth {Number}` een standaard kolombreedte in pixels (optional, standaard `150`) - `rowheight {Number}` een standaard rijhoogte in pixels (optional, standaard: `24`) + het hangt af van CSS - `alignheader {String/Number}` Align voor header `right` ( of `2`) of `center` ( of `1`(Optioneel en standaard) `left`) - `alignfilter {String/Number}` Align voor filterinput `right` ( of `2`) of `center` ( of `1`(Optioneel en standaard) `left`) - `align {String/Number}` Align voor een kolom waarde `right` ( of `2`) of `center` ( of `1`(Optioneel en standaard) `left`) - `click {String}` een link naar een pad of `function(row, grid, row_el)`, een record wordt toegewezen/uitgevoerd als de gebruiker op een rij klikt - `clickid {String}` een identificator/eigendomsnaam voor terugwerkende redrawing (voor voorafgaande volgorde highlight), standaard: `id` - `highlight {Boolean}` wordt aangegeven in elke geselecteerde volgorde (na `click`) (default: `false`) - `unhighlight {Boolean}` maakt `undo highlighting` van de geselecteerde volgorde mogelijk (default: `true`) - `checked {String}` `path` naar een variabele of pad naar `function(rows, grid)` wordt uitgevoerd als de gebruiker bepaalde lijnen heeft geselecteerd/checkt - `autoselect {Boolean}` maakt het mogelijk om de eerste rij in het net te selecteren, het uitvoert `EXEC(config.click)`, standaard: `false` - `limit {Number}` een clusterslimit, standaard: `80` - `numbering {Boolean}`, optionele standaard `false` - `allowtitles {Boolean}`, toelaat titels voor alle rijwaarden, optionele standaard `false` - `button {String}` een link naar `function(btn_name, row, btn_element, event, name)` wordt uitgevoerd als de gebruiker op een __button__ klikt in de volgorde - `exec {String}` een link naar `function(type, filter, sort, page)` voor server-side-activiteiten alleen (dit stelt de client-side sortering en filteren niet in staat), ondersteunde soorten: `refresh` of `page` - `changed {String}` `path` naar een variabele of pad naar `function(rows, grid)` wordt uitgevoerd als de gebruiker bepaalde lijnen verandert - `change {String/Boolean}` boolean toelaat interne bewerking of string moet een `path` bevatten tot een variabele of de route naar `function(meta, next(meta))` wordt uitgevoerd als de gebruiker tweemaal op een kolom klikt (`meta` kan `null` zijn als het netwerk is verfrissend) + `next(null)` vervangt de vorige inhoud weer - `columns {String}` een weg naar de definitie van `columns {Array}` - `dblclick {String}` een link naar de `function(row, grid, row_el)` methode, het wordt uitgevoerd als de gebruiker dubbel klikt op een rij - `noborder {Boolean}` kan een grens rond het netwerk ontgrendelen (default: `false`) - `clusterize {Boolean}` kan worden uitgeschakeld door clustering (default: `true`) - `contextmenu {String}` een link naar `function(e, grid)` wanneer de gebruiker het contextmenu opneemt - `autoformat {Boolean}` maakt auto-formaten zoals `email`, `phone` en `number` mogelijk (de standaard: `true`) - `controls {Boolean}` maakt controles mogelijk zoals gedefinieerd in `columns` (default: `true`) - `hfunc {String}` een link naar de `function(el)` methode, het wordt uitgevoerd als de gebruiker klikt op de icoon toegevoegd aan de eerste headerlijn. usefull om andere componenten te integreren met DataGrid. - `hfuncicon {String}` hfunc icon bijvoorbeeld thuis, cog, enz. - `pagination {Boolean}` mogelijk / niet mogelijk pagina's (default: `true`) - `config.exec` zal worden uitgevoerd als de scrollbar aan het einde is en u kunt gebruiken als de grondrespons `array` van rijen - `ovalue {String}` een standaard sleutel voor het verkrijgen van `value` van `column.options` (default: `id`) - `otext {String}` een standaard sleutel voor het verkrijgen van `text` van `column.options` (default: `name`) __Column eigenschappen__: - `name {String}` een naam van het veld in de volgorde object - `text {String}` een kolom label, tekst met `.ti ti-home` zal de totale icoon - `title {String}` een kolom tooltip (optional) - `width {Number}` een kolombreedte (optional, standaard `config.colwidth`) - `filter {String/Boolean}` een plaatshouder voor het filter of `boolean` kan de filter voor deze kolom uit te schakelen (optional) - `filtervalue {Object}` optioneel, een vooraf gedefinieerde filterwaarde (default: `undefined`) - `filtertype {Number/String}`, `1` schakelt smart search uit (de standaard: `0` - het betekent dat smart search is geactiveerd) - `align {String}` kan `center` of `right` zijn (optional, standaard: `left`) - `template {String}` kan een Tangular-template zijn en het model is het gehele object van de rij - `sorting {Boolean}` maakt het mogelijk om te sorteren (optional, default: `true`) - `search {Boolean/String}` `true` zal een waarde filteren volgens het resultaat van `template` of `String` kan een Tangular template zijn die als waarde wordt gebruikt voor zoekopdrachten. - `format {String/Number}` kan worden gebruikt voor de datum en cijfers (het aantal decimalen) veld (optional), bijvoorbeeld `dd.MM.yyyy` - `hide {Boolean}` verbergt een kolom - `listcolumn {Boolean}` standaard:waar, vals voor het verwijderen van kolom uit de kolomlijst - `hidden {String}` als een pijlfunctie `column => true` -> kolom zal verborgen zijn (bijvoorbeeld voor beperkende gebruikers) - `options {Object Array}` optioneel, een aangepaste filter bijvoorbeeld `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r link naar gegevensbron - `otext {String}` optioneel, een sleutel voor het veld `text` in `options`, standaard `config.otext` - `ovalue {String}` optioneel, een sleutel voor het veld `value` in `options`, standaard `config.ovalue` - `buttonapply {String}` optioneel, een label voor de knop `Apply` in kolommen, standaard: `Apply` - `class {String}` optioneel, een aangepaste kolomklasse naam - `empty {String/Boolean}` optioneel, kan leegte met de waarde gedefinieerd in leeg veld opnieuw schrijven (`true` waarde gebruikt `---` als standaardwaarde) - `min {Number}` __editable slechts__ een min. waarde - `max {Number}` __editeerbaar slechts__ max. getal waarde - `required {Boolean}` - alleen te bewerken - `dirsearch {String/Boolean}` een plaatshouder voor de `j-Directory` zoekopdracht, boolean met `false` zal de zoekopgave uitschakelen - `type {String}` optioneel, kan een gegevenstype bevatten (`string`, `boolean`, `date`, `number`, `email`, `phone` of `url`) voor het veld - `editable {Boolean}` kan worden bewerkt - `currency {String}` een muntnaam (dat moet worden gedefinieerd in `DEF.currencies`) - `editable {String}` Een weg naar aangepaste bewerkbare `function(meta)`, belangrijk: `meta.next(new_value)` of `meta.cancel()` - `colorize {Boolean}` zorgt voor een kleur van de waarde - `monospace {Boolean}` maakt monospace font type mogelijk - __NEW__ `raw {Boolean}` maakt/verwijdert HTML ontsnappen in kolomfilters (default: `false`) - __NEW__ `pair {Boolean}` toelaat/uitgeeft auto-waarde in combinatie met de configuratie van `options` (default: `false`) __Routenbeheersing (NIE)__: - kan worden gedefinieerd als kolomtype `controls` - moet worden gedefinieerd kolom `template` (Tangular, `row` is een model voor Tangular voor elke rij) - Kijk naar het voorbeeld - De knop `click` gebeurtenis wordt opgenomen naar `config.button` __Filteren__: - `numbers`: (1) `number` zoekt een exacte getal, (2) `number - number` is een interval tussen cijfers - `strings`: (1) `string` zoekt een nauwkeurige lijn, (2) `string1, string2, string3` is een meerdere zoekcriteria - `dates`1 jaar `2017` Zoeken naar alle data in dit jaar (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` is een interval tussen de datum, (3) `12-20 - 12-31` <--> `20.12 - 31.12` een interval tussen de datum in het huidige jaar en (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` of (5) `-5 days` <--> `-1 week` <--> `-10 years` __Methoden__: - `component.redraw([reselect_again])` kan de lijnen opnieuw redraw (alleen voor wijzigingen, als u een aantal lijnen verwijdert die u nodig hebt om het hele model te updaten) - `component.resetfilter()` kan een filter herstellen - `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])` kan rijen exporteren met server-side rendering - `component.appendrow(row_object, [scrolldown], [prepend])` appends en renderen - `component.redrawrow(row_object, [new_object_row])` redraws rij of __NEW__: vervangt + redrays `row_object` met een nieuwe `new_object_row` - `component.clear()` verwijdert alle veranderingen - `component.select(row)` selecteert `row` moet hetzelfde object zijn als in de gegevensbron - `component.editcolumn(row_index, col_index)` uitvoert `config.change` intern (alleen voor geavanceerd gebruik) - `component.applyfilter(obj)` kan een aangepaste filter gebruiken `{ name: 'Peter', age: '20 - 50' }` - `component.resetcolumns()` herstelt kolom - `component.readfilter()` geeft een huidige filter terug - `component.rebind(schemaname__or__columnsdeclaration)` de methode herbindt het schema - `component.reload()` executeert `config.exec` met de huidige filter en sortering - `component.empty()` empties alle rijen - `component.redrawcolumns()` redraw kolommen zonder ze te herstellen - __NEW__: `component.schema(name)` wijzigt een schema en verfrissert gegevens __eigenschappen__: - `component.meta` geeft interne meta-informatie over filters, kolommen en lijnen terug __Goed om te weten__: - `NULL('link.to.data')` beoordeelt `config.exec` - `SET('link.to.data', data, 'noscroll')` --> type `noscroll` ontbreekt om te scrollen __Hoe kan ik een klasse van rij uitbreiden?__ - Kijk naar de `{{ if active }}`-lijn, het vergroot een rangklasse door `dg-active-class` toe te voegen als de `active` geldig is ```javascript [ '{{ if active }} dg-active-class{{ fi }}', { name: 'name', text: 'Name', width: 200 }, // other columns ... ] ``` __Multiple schema's__: ```html ``` Gebruik het met ``Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie. ```html example.html ```