# j-DataGrid > Tato síť byla vytvořena pro jediné aplikace a podnikové aplikace. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: cs Content-SHA256: 718b4b24dbd3ffb48cb9d6cff0121e25d5f29116f45fede29c3a23f601d701ca Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Tato síť byla vytvořena pro jediné aplikace a podnikové aplikace. - Systém `bootstrap` - Můžete vydat více než 30 000 řádků bez problémů - Podporuje drag&drop sloupce - Podporuje sortizaci - Podporuje odstraňování sloupů - Podporuje vertikální/horizontální scrolling - Podporuje filtry - Podporuje checkboxes - Skládací bary nezávisle na OS - Odpovědnost - Podporuje _tmavý režim_ - __IMPORTANT__ sloupec možnosti filtr potřebuje složku `j-Directory` __To-do__: - Množství - Převod sloupců pro dotykové zařízení - Přepisování sloupců pro dotykové zařízení _Data-source_ musí obsahovat: ```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 } ``` nebo surové `Array`, ale nemůžete použít stránky a externí filtry: ```js [{ name: 'Row 1' }, { name: 'Row 2' }]; ``` __Konfigurace__: - `filterlabel {String}` je standardní držák místa pro všechny filtry (volitelné) - `rememberfilter {Boolean}` s pravým to připomíná filtry pro každý režim (předvolený: `true`) - `schema {String}` je standardní schéma (default: `default`) - Pluralizace `pluralizepages {String}` pro stránky (volitelné, výchozí: `# pages,# page,# pages,# pages`) - Pluralizace `pluralizeitems {String}` pro položky (volitelné, výchozí: `# items,# item,# items,# items`) - `height {Number/String}` Výška sítě, podporované hodnoty: `auto` (přesněji řečeno) - nové `fluid`, `parent` nebo `parent1`, `parent2`a) nebo `NUMBER` jako výška nebo `selector` pro jQuery.closest() - Minimální výška sítě `minheight {Number}`, práce s výškou `fluid` a `auto` (předvolený: `200`) - Výběr `parent {String}` pro možnost výšky `auto` (předvolený: `window`) - `margin {Number}` je vrcholová hranice pro výšku (volitelná, výchozí: `0`) - `boolean {String}` hodnoty pro filtrování booleánových hodnot (volitelné, výchozí: `true|on|yes`) - `resize {Boolean}` umožňuje resing sloupců (volitelné, výchozí: `true`) - `reorder {Boolean}` umožňuje přepracování sloupců (volitelné, výchozí: `true`) - `sorting {Boolean}` umožňuje srovnání (volitelné, předvolené `true`) - `remember {Boolean}` připomíná re-objednávání a resing sloupců (volitelné, výchozí `true`) - `checkbox {Boolean}` umožňuje kontrolní krabičky - `colwidth {Number}` je standardní šířka sloupce v pixlech (volitelné, standardní `150`) - `rowheight {Number}` je výchozí výška řádku v pixlech (volitelně: `24`) + závisí na CSS - `alignheader {String/Number}` Align pro hlavu `right` nebo `2`a) nebo `center` nebo `1`Opční a default: `left`) - `alignfilter {String/Number}` Přizpůsobení filtru `right` nebo `2`a) nebo `center` nebo `1`Opční a default: `left`) - `align {String/Number}` Přizpůsobte se hodnotě sloupce `right` nebo `2`a) nebo `center` nebo `1`Opční a default: `left`) - `click {String}` odkaz na trati nebo `function(row, grid, row_el)`, záznam bude přidělen/vykonan, pokud uživatel klikne na řádek - `clickid {String}` název identifikátoru / majetku pro zpětné vyhledávání (pro předchozí řádek), výchozí: `id` - Každý zvolený řádek `highlight {Boolean}` (po `click`) bude zdůrazněn (podle předvolby: `false`) - `unhighlight {Boolean}` umožňuje `undo highlighting` vybraného řádku (podmínkou: `true`) - `checked {String}` `path` na proměnnou nebo cestu k `function(rows, grid)` se provede, pokud uživatel vybral/kontroloval některé řádky - `autoselect {Boolean}` umožňuje automaticky vybírat první řádek v síti, provádí `EXEC(config.click)`, předvolený: `false` - `limit {Number}` je limit klastru, standardní: `80` - `numbering {Boolean}`Opční default `false` - `allowtitles {Boolean}`, umožňuje tituly pro všechny hodnoty řádku, volitelná předvolba `false` - `button {String}` odkaz na `function(btn_name, row, btn_element, event, name)` je spuštěn, pokud uživatel klikne na __button__ v řádku - `exec {String}` odkaz na `function(type, filter, sort, page)` pouze pro serverové operace (vypouští třídění a filtrování klienta), podporované typy: `refresh` nebo `page` - `changed {String}` `path` na proměnnou nebo cestu k `function(rows, grid)` se provádí, pokud uživatel změnil některé řádky - `change {String/Boolean}` boolean umožňuje vnitřní úpravu nebo řetězec musí obsahovat `path` k proměnné nebo trasa k `function(meta, next(meta))` je spuštěna, pokud uživatel dvakrát klikne na sloupec (`meta` může být `null` pokud je síť obnovena) + `next(null)` nahrazuje předchozí obsah znovu - `columns {String}` je cesta k definici `columns {Array}` - `dblclick {String}` odkaz na metodu `function(row, grid, row_el)`, je spuštěn, pokud uživatel klikne na řádek - `noborder {Boolean}` může deaktivovat hranice kolem sítě (předvolené: `false`) - `clusterize {Boolean}` může vypnout klastrované otáčení (podmínkou: `true`) - `contextmenu {String}` odkaz na `function(e, grid)` když uživatel zvyšuje kontext menu - `autoformat {Boolean}` umožňuje typy automatického formátu, jako je `email`, `phone` a `number` (předvolené: `true`) - `controls {Boolean}` umožňuje kontroly definované v `columns` (podmínkou: `true`) - `hfunc {String}` odkaz na metodu `function(el)`, je spuštěn, pokud uživatel klikne na ikonu přidanou do velmi prvního řádu hlavy. usefull integrovat jinou složku s DataGrid. např. j-filter - `hfuncicon {String}` hfunc ikona např. domácí, cog atd. - `pagination {Boolean}` aktivuje/neaktivuje stránku (podmínkou: `true`) - `config.exec` bude spuštěn, pokud je řádek na konci, a můžete použít jako surovou odpověď `array` řádků - `ovalue {String}` je výchozí klíč pro získání `value` z `column.options` (důvodní: `id`) - `otext {String}` je výchozí klíč pro získání `text` z `column.options` (důvodní: `name`) __Kolonové vlastnosti__: - `name {String}` - název pole v řádném objektu - `text {String}` sloupec, text s `.ti ti-home` bude zobrazovat Total ikonu - `title {String}` nástrojový tip sloupce (volitelné) - `width {Number}` Široká šířka sloupce (volitelná, výchozí) `config.colwidth`) - `filter {String/Boolean}` je místo pro filtr nebo `boolean` může vypnout filtr pro tento sloupec (volitelné) - `filtervalue {Object}` volitelně, předdefinovaná hodnota filtru (podle předvolby: `undefined`) - `filtertype {Number/String}`, `1` zabraňuje chytrému vyhledávání (podmínkou: `0` - znamená, že je aktivováno chytré vyhledání) - `align {String}` může být `center` nebo `right` (volitelné, výchozí: `left`) - `template {String}` může být šablona Tangular a model je celým předmětem řádku - `sorting {Boolean}` umožňuje srovnání (volitelné, předběžné: `true`) - `search {Boolean/String}` `true` bude filtrovat hodnotu podle výsledku `template` nebo `String` může být šablona Tangular, která bude použita jako hodnota pro vyhledávání - `format {String/Number}` lze použít pro datum a čísla (počet desítek) pole (volitelné), např. `dd.MM.yyyy` - `hide {Boolean}` ukrývá sloupec - `listcolumn {Boolean}` default:pravdivý, falešný pro odstranění sloupce ze seznamu sloupců - `hidden {String}` jako šířka funkce `column => true` -> sloupec bude skryta (například pro omezení uživatele) - `options {Object Array}` volitelný, přizpůsobený filtr například `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r odkaz na zdroj dat - `otext {String}` volitelný, klíč pro pole `text` v `options`, předvolený `config.otext` - `ovalue {String}` volitelný, klíč pro pole `value` v `options`, předvolený `config.ovalue` - `buttonapply {String}` volitelné, štítek pro tlačítko `Apply` v sloupcích, předběžně: `Apply` - `class {String}` volitelný, přizpůsobený název třídy - `empty {String/Boolean}` volitelně, může přepsat prázdnou hodnotu s hodnotou definovanou v prázdném poli (hodnota `true` používá hodnotu `---` jako předvolenou hodnotu) - `min {Number}` _editable pouze_ min. hodnota - `max {Number}` _editovatelný pouze_ max. číslo hodnoty - `required {Boolean}` - pouze editovatelný - `dirsearch {String/Boolean}` místo pro vyhledávání `j-Directory`, boolean s `false` bude vypnutý - `type {String}` volitelně, může obsahovat typ údajů (`string`, `boolean`, `date`, `number`, `email`, `phone` nebo `url`) pro pole - `editable {Boolean}` umožňuje úpravu - Název měny `currency {String}` (musí být definován v `DEF.currencies`) - `editable {String}` Cesta k úpravě `function(meta)`Důležité je: `meta.next(new_value)` nebo `meta.cancel()` - `colorize {Boolean}` umožňuje barevnost hodnoty - `monospace {Boolean}` umožňuje monospace typ písma - __NEW__ `raw {Boolean}` umožňuje/nemožňuje únik HTML ve sloupcích filtrov (podle předvolby: `false`) - __NEW__ `pair {Boolean}` umožňuje/vypustí automatickou hodnotu v kombinaci s konfigurací `options` (default: `false`) __Kontrolní řád (NEW)__: - Může být definován jako sloupec typu `controls` - musí definovat sloupec `template` (Tangular, `row` je model pro Tangular pro každý řádek) - Podívejte se na příklad - tlačítko `click` Událost je zachycena `config.button` __filtrování__: - `numbers`: (1) `number` vyhledává přesné číslo, (2) `number - number` je interval mezi čísly - `strings`: (1) `string` vyhledává přesný řádek, (2) `string1, string2, string3` je více vyhledávacím kritériem - `dates`(1) Roky `2017` Vyhledávání všech dat v letošním roce (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` je interval mezi daty, (3) `12-20 - 12-31` <--> `20.12 - 31.12` Rozdíl mezi daty v aktuálním roce a (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` nebo (5) `-5 days` <--> `-1 week` <--> `-10 years` __Metody__: - `component.redraw([reselect_again])` může znovu přehrávat řádky (pouze pro změny, pokud odstraníte některé řádek potřebujete aktualizovat celý model) - `component.resetfilter()` může nastavit filtr - `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])` může exportovat řádky s serverovým renderem - `component.appendrow(row_object, [scrolldown], [prepend])` přidává a řádí - `component.redrawrow(row_object, [new_object_row])` redraws řádek nebo __NEW__: nahrazuje +redraws `row_object` novým `new_object_row` - `component.clear()` vyčistí všechny změny - `component.select(row)` vybere `row` musí být stejný objekt jako v datovém zdroji - `component.editcolumn(row_index, col_index)` provádí `config.change` interně (pouze pro pokročilé použití) - `component.applyfilter(obj)` může použít přizpůsobený filtr `{ name: 'Peter', age: '20 - 50' }` - `component.resetcolumns()` opětovný kolumn - `component.readfilter()` vrátí aktuální filtr - `component.rebind(schemaname__or__columnsdeclaration)` - Metoda odráží schéma - `component.reload()` provádí `config.exec` s aktuálním filtrem a řadou - `component.empty()` všechny řádky - `component.redrawcolumns()` redraw sloupce bez jejich přestavby - __NEW__: `component.schema(name)` mění schématu a aktualizuje data __Vlastnosti__: - `component.meta` vrací interní meta informace o filtech, sloupcích a řádcích __Dobré vědět__: - `NULL('link.to.data')` Hodnocení `config.exec` - `SET('link.to.data', data, 'noscroll')` -> typ `noscroll` znemožňuje resetování __Jak rozšiřovat třídu řádku?__ - Podívejte se na `{{ if active }}` Způsob, jak rozšířit třídu řádku přidáním `dg-active-class` Pokud je `active` Bude platný ```javascript [ '{{ if active }} dg-active-class{{ fi }}', { name: 'name', text: 'Name', width: 200 }, // other columns ... ] ``` __Množství schémat__: ```html ``` Použijte ji s ``Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence. ```html example.html ```