# j-DataGrid > Тази мрежа е създадена за еднократни приложения и корпоративни приложения. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: bg Content-SHA256: aa73ef8cb9fd68ef0905efb4bd147700b6ecd73e3bffd8cf1cc6d58643ba21e7 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Тази мрежа е създадена за еднократни приложения и корпоративни приложения. - Необходима е система за `bootstrap` - Можете да направите повече от 30 000 реда без никакви проблеми - Поддръжка на Drag & Drop Columns - Поддържат сортиране - Поддържа рециклирането на колони - Поддържа вертикално/хоризонтално скалиране - Поддържа филтрите - Подкрепа за проверка - Скриншоти за независимост на OS - Реакция - Поддържат тъмния режим - __ВЪЗМОЖНО__ колона опции филтърът изисква `j-Directory` компонент __До-до__: - Многообразие - Рециклиране на колони за допирни устройства - Реорганизиране на колони за допирни устройства __Data-Source__ трябва да съдържа: ```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 } ``` или суров `Array`, но не можете да използвате страници и външни филтри: ```js [{ name: 'Row 1' }, { name: 'Row 2' }]; ``` __Конфигуриране__: - `filterlabel {String}` е стандартно местоположение за всички филтри (опционално) - `rememberfilter {Boolean}` с истински той напомня филтри за всяка схема (предварително: `true`) - `schema {String}` е стандартна схема (дефолт: `default`) - Плурализация на `pluralizepages {String}` за страници (опционално, по подразбиране: `# pages,# page,# pages,# pages`) - Плурализация на `pluralizeitems {String}` за елементи (опционално, по подразбиране: `# items,# item,# items,# items`) - `height {Number/String}` Височина на мрежата, подкрепени стойности: `auto` (Предполага се, че е ново `fluid`, `parent` или `parent1`, `parent2`или `NUMBER` като височина или `selector` за jQuery.closest() - Минимална височина на мрежата `minheight {Number}`, работи с височина `fluid` и `auto` (предварително: `200`) - `parent {String}` селектор за опция за височина `auto` (предварително: `window`) - `margin {Number}` е най-високата маржа за височина (опционално, по подразбиране: `0`) - `boolean {String}` стойности за филтриране на булеанни стойности (опционално, по подразбиране: `true|on|yes`) - `resize {Boolean}` позволява рециклиране на колони (опционално, по подразбиране: `true`) - `reorder {Boolean}` позволява презареждане на колони (опционално, по подразбиране: `true`) - `sorting {Boolean}` позволява класиране (опционално, по подразбиране `true`) - `remember {Boolean}` напомня за реорганизиране и рециклиране на колони (опционално, по подразбиране `true`) - `checkbox {Boolean}` позволява проверка - `colwidth {Number}` е стандартна ширина на колоната в пиксели (опционално, стандартно `150`) - `rowheight {Number}` е стандартна височина на реда в пиксели (опционално: `24`) + зависи от CSS - `alignheader {String/Number}` Анализ на заглавието `right` или `2`или `center` или `1`(Опционално и дефолтно) `left`) - `alignfilter {String/Number}` Анализ на филтрирането `right` или `2`или `center` или `1`(Опционално и дефолтно) `left`) - `align {String/Number}` Анализ на стойността на колоната `right` или `2`или `center` или `1`(Опционално и дефолтно) `left`) - `click {String}` е връзка към пътят или `function(row, grid, row_el)`, записът ще бъде назначен/изпълнен, ако потребителят кликне върху реда - `clickid {String}` идентификатор/име на имота за обратно редуциране (за предишния ред), по подразбиране: `id` - `highlight {Boolean}` всяка избрана линия (след `click`) ще бъде подчертано (предварително: `false`) - `unhighlight {Boolean}` позволява `undo highlighting` от избрания ред (предварително: `true`) - `checked {String}` `path` към променлива или път към `function(rows, grid)` се изпълнява, ако потребителят е избрал/проверил някои редове - `autoselect {Boolean}` позволява автоматично избиране на първия ред в мрежата, той изпълнява `EXEC(config.click)`, по подразбиране: `false` - `limit {Number}` Ограничение на кластера, дефолт: `80` - `numbering {Boolean}`, опционален дефолт на `false` - `allowtitles {Boolean}`, позволява на заглавията за всички стойности на реда, опционален дефолт `false` - `button {String}` връзката към `function(btn_name, row, btn_element, event, name)` се изпълнява, ако потребителят щракне върху бутон ___ в реда - `exec {String}` е връзка към `function(type, filter, sort, page)` само за сървърни операции (отключва клавиатурата и филтрирането на клиента), поддържани типове: `refresh` или `page` - `changed {String}` `path` към променлива или път към `function(rows, grid)` се изпълнява, ако потребителят промени някои редове - `change {String/Boolean}` Boolean позволява вътрешно редактиране или лентата трябва да съдържа `path` към променлива или пътят към `function(meta, next(meta))` се изпълнява, ако потребителят двойно кликне върху колона (`meta` може да бъде `null` ако мрежата е освежена) + `next(null)` замества предишното съдържание отново - `columns {String}` Пътят към дефиницията на `columns {Array}` - `dblclick {String}` е връзка към метода на `function(row, grid, row_el)`, тя се изпълнява, ако потребителят щракне двойно върху реда - `noborder {Boolean}` може да деактивира границата около мрежата (предварително: `false`) - `clusterize {Boolean}` може да деактивира кластерирано скалиране (дефолт: `true`) - `contextmenu {String}` е връзка към `function(e, grid)` когато потребителят издига контекстното меню - `autoformat {Boolean}` позволява автоматично форматиране на типове като `email`, `phone` и `number` (предварително: `true`) - `controls {Boolean}` позволява контроли, определени в `columns` (предварително: `true`) - `hfunc {String}` е връзка към метода на `function(el)`, тя се изпълнява, ако потребителят кликне върху иконата, добавена към много първия ред на заглавието. usefull да интегрира друг компонент с DataGrid. например j-филтър - `hfuncicon {String}` hfunc икона, например къща, cog и т.н. - `pagination {Boolean}` активира/изключва странициране (предварително: `true`) - `config.exec` ще бъде изпълнен, ако скалбарът е в края, и можете да използвате като суров отговор `array` на редове - `ovalue {String}` е стандартна ключ за получаване на `value` от `column.options` (предварително: `id`) - `otext {String}` е стандартна ключ за получаване на `text` от `column.options` (предварително: `name`) __Колонни свойства__: - `name {String}` е името на полето в редица обекти - `text {String}` е колона, текстът с `.ti ti-home` ще направи икона Total - `title {String}` е колона инструмент (опционално) - `width {Number}` - ширина на колона (опционално, по подразбиране `config.colwidth`) - `filter {String/Boolean}` място за филтера или `boolean` може да деактивира филтра за тази колона (опционално) - `filtervalue {Object}` опция, предварително дефинирана стойност на филтра (предварително: `undefined`) - `filtertype {Number/String}`, `1` отключва интелигентното търсене (дефинирано: `0` - това означава, че е активиран интелигантен търсене) - `align {String}` може да бъде `center` или `right` (опционално, по подразбиране: `left`) - `template {String}` може да бъде шаблон на Tangular и моделът е целият предмет на реда - `sorting {Boolean}` позволява класиране (опционално, по подразбиране: `true`) - `search {Boolean/String}` `true` ще филтрира стойност в съответствие с резултата на `template` или `String` може да бъде шаблон за Tangular, който ще се използва като стойност за търсене - `format {String/Number}` може да се използва за дата и числа (брояване на десетилетия) поле (опционално), например `dd.MM.yyyy` - `hide {Boolean}` крие колона - `listcolumn {Boolean}`: истински, фалшиви за премахване на колони от списъка с колони - `hidden {String}` като стрела функция `column => true` -> колона ще бъде скрита (например за ограничаване на потребителя) - `options {Object Array}` опционален, персонализиран филтър например `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r връзка към източника на данни - `otext {String}` опция, ключ за полето `text` в `options`, по подразбиране `config.otext` - `ovalue {String}` опция, ключ за полето `value` в `options`, по подразбиране `config.ovalue` - `buttonapply {String}` опционално, етикет за бутона `Apply` в колони, по подразбиране: `Apply` - `class {String}` опция, персонализирано име на класа - `empty {String/Boolean}` опционално, може да се пренапише празна стойност с определената в празно поле стойност (`true` използва `---` като подразбираща стойност) - `min {Number}` __редактиран само__ минимална стойност - `max {Number}` __редактираме само__ максималната стойност на числото - `required {Boolean}` - само за редактиране - `dirsearch {String/Boolean}` място за търсене на `j-Directory`, boolean с `false` ще деактивира търсенето - `type {String}` опция, може да съдържа тип данни (`string`, `boolean`, `date`, `number`, `email`, `phone` или `url`) за полето - `editable {Boolean}` позволява редактиране - `currency {String}` е валутно име (може да бъде определено в `DEF.currencies`) - `editable {String}` Пътят към персонализираното редактиране на `function(meta)`, важен: `meta.next(new_value)` или `meta.cancel()` - `colorize {Boolean}` позволява цветна стойност - `monospace {Boolean}` позволява монопространствен шрифт - __NEW__ `raw {Boolean}` позволява/изключва изтичане на HTML в колони (предварително: `false`) - __NEW__ `pair {Boolean}` позволява/изключва автоматична стойност в комбинация с конфигурацията на `options` (предварително: `false`) __Контролът на релсите (NEW)__: - Може да се дефинира като колона тип `controls` - трябва да се определи колона `template` (Tangular, `row` е модел за Tangular за всеки ред) - Погледнете пример - бутон `click` събитие е записано в `config.button` __Филтриране__: - `numbers`: (1) `number` търси точен брой, (2) `number - number` е интервал между числата - `strings`: (1) `string` търси точна линия, (2) `string1, string2, string3` е многократен критерий за търсене - `dates`1 година `2017` Търсене на всички дати за тази година, (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` е интервал между датите, (3) `12-20 - 12-31` <--> `20.12 - 31.12` интервал между датите в текущата година и (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` или (5) `-5 days` <--> `-1 week` <--> `-10 years` __Методи__: - `component.redraw([reselect_again])` може да редуцира редовете отново (само за модификации, ако изтриете някои редове, които трябва да актуализирате целия модел) - `component.resetfilter()` може да презареди филтър - `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])` може да експортира редове с сървърно-странен rendering - `component.appendrow(row_object, [scrolldown], [prepend])` приготвя и ренде - `component.redrawrow(row_object, [new_object_row])` редуцира ред или __NEW__: замества + редуците на `row_object` с нов `new_object_row` - `component.clear()` разкрива всички промени - `component.select(row)` избира `row` трябва да бъде същият обект като в източника на данни - `component.editcolumn(row_index, col_index)` изпълнява `config.change` вътрешно (само за напреднала употреба) - `component.applyfilter(obj)` може да се прилага персонализиран филтър `{ name: 'Peter', age: '20 - 50' }` - `component.resetcolumns()` пренасочва колони - `component.readfilter()` връща текущия филтър - `component.rebind(schemaname__or__columnsdeclaration)` Методът премахва схемата - `component.reload()` изпълнява `config.exec` с текущия филтър и сортиране - `component.empty()` емпити всички редове - `component.redrawcolumns()` редуцира колони, без да ги пренарежда - __NEW__: `component.schema(name)` променя схемата и освежава данните __Собственост__: - `component.meta` връща вътрешна мета информация за филтри, колони и редове __Добре е да се знае__: - `NULL('link.to.data')` Оценка `config.exec` - `SET('link.to.data', data, 'noscroll')` -> тип `noscroll` прекъсва рестаурацията на скалпа __Как да разширим класа?__ - Погледнете линията `{{ if active }}`, тя разширява класа на реда, като добавяте `dg-active-class` ако `active` е валиден ```javascript [ '{{ if active }} dg-active-class{{ fi }}', { name: 'name', text: 'Name', width: 200 }, // other columns ... ] ``` __Многобройни схеми__: ```html ``` Използвайте го с ``Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT. ```html example.html ```