# j-DataGrid > Ta sieć została stworzona dla aplikacji pojedynczej strony i aplikacji przedsiębiorstw. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: pl Content-SHA256: 20ca4a6fb721a0be27b733784a9448d4d660d2de09ff3aba79b583e6999a48a3 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Ta sieć została stworzona dla aplikacji pojedynczej strony i aplikacji przedsiębiorstw. - Potrzebny system `bootstrap` - Możesz zrealizować więcej niż 30 000 kolejek bez żadnych problemów - Wsparcie dla kolumny drag&drop - Wsparcie dla sortowania - wspiera odtwarzanie kolumn - wspiera pionowe / horyzontalne skręcanie - Wsparcie filtrów - Wsparcie dla checkboxes - Niezależne skrzyniarki na OS - Odpowiedź - Wsparcie - mody ciemne - __IMPORTANT__ Opcje kolumny filtry wymagają składnika `j-Directory` __To-do__: - Wielogodność - Odtwarzanie kolumn do urządzeń dotykowych - Znowocześnianie kolumn dla urządzeń dotykowych _Data-source_ musi zawierać: ```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 } ``` lub surowy `Array`, ale nie można używać stron i zewnętrznych filtrów: ```js [{ name: 'Row 1' }, { name: 'Row 2' }]; ``` __Konfiguracja__: - `filterlabel {String}` - domyślny pojemnik dla wszystkich filtrów (opcjonalny) - `rememberfilter {Boolean}` z prawdziwym przypomina filtry dla każdego schematu (default: `true`) - `schema {String}` standardowy schemat (default: `default`) - Pluralizacja `pluralizepages {String}` dla stron (opcjonalna, domyślna: `# pages,# page,# pages,# pages`) - Pluralizacja `pluralizeitems {String}` dla elementów (opcjonalna, domyślna: `# items,# item,# items,# items`) - `height {Number/String}` Wysokość sieci, wartości wspierane: `auto` (wstępnie) - Nowy `fluid`, `parent` lub `parent1`, `parent2`) lub `NUMBER` Wysokość lub `selector` dla jQuery.closest() - `minheight {Number}` minimalna wysokość siatki, praca z `fluid` i `auto` wysokość (default: `200`) - Wybór `parent {String}` dla opcji wysokości `auto` (default: `window`) - `margin {Number}` - najwyższa marża wysokości (opcjonalna, domyślna: `0`) - `boolean {String}` wartość do filtracji wartości boolean (opcjonalnie, wstępnie: `true|on|yes`) - `resize {Boolean}` umożliwia odtwarzanie kolumn (opcjonalne, domyślnie: `true`) - `reorder {Boolean}` umożliwia ponowne zamówienie kolumn (opcjonalne, domyślnie: `true`) - `sorting {Boolean}` umożliwia sortowanie (opcjonalne, standardowe `true`) - `remember {Boolean}` przypomina kolumny ponownego zamówienia i odtwarzania (opcjonalne, domyślne `true`) - `checkbox {Boolean}` umożliwia kontrolę - `colwidth {Number}` standardowy szerokość kolumny w pikselach (opcjonalny, standardowy `150`) - `rowheight {Number}` standardowy poziom wysokości w pikselach (opcjonalny, standardowy: `24`) + zależy od CSS - `alignheader {String/Number}` Align dla header `right` lub `2`) lub `center` lub `1`Opcjonalne i nieprawidłowe: `left`) - `alignfilter {String/Number}` Align dla filtra wejścia `right` lub `2`) lub `center` lub `1`Opcjonalne i nieprawidłowe: `left`) - `align {String/Number}` Align dla wartości kolumny `right` lub `2`) lub `center` lub `1`Opcjonalne i nieprawidłowe: `left`) - `click {String}` link do ścieżki lub `function(row, grid, row_el)`, rekord zostanie przypisany/wykonany, jeśli użytkownik kliknie na kolejkę - `clickid {String}` nazwa identyfikatorów/właściwości do odtwarzania wstecz (dla poprzedniego podniesienia kolejności), domyślnie: `id` - `highlight {Boolean}` w każdym wybranym rzędzie (po `click`) zostanie podkreślony (default: `false`) - `unhighlight {Boolean}` umożliwia `undo highlighting` z wybranego rzędu (default: `true`) - `checked {String}` `path` do zmiennej lub ścieżki do `function(rows, grid)` jest wykonany, jeśli użytkownik wybiera / sprawdza kilka kolejek - `autoselect {Boolean}` umożliwia automatyczne wybór pierwszej kolejności w sieci, wykonuje `EXEC(config.click)`, domyślnie: `false` - `limit {Number}` limit klastru, wstępne: `80` - `numbering {Boolean}`, opcjonalny standard `false` - `allowtitles {Boolean}`, umożliwia tytuły dla wszystkich wartości kolejnych, opcjonalny standard `false` - Połączenie `button {String}` do `function(btn_name, row, btn_element, event, name)` jest wykonane, jeśli użytkownik kliknie na przycisk __ w kolejce - `exec {String}` link do `function(type, filter, sort, page)` tylko dla operacji z serwera (nie umożliwia to sortowania i filtracji z klienta), wspierane typy: `refresh` lub `page` - `changed {String}` `path` do zmiennej lub ścieżki do `function(rows, grid)` jest wykonany, jeśli użytkownik zmieni niektóre rzędy - `change {String/Boolean}` boolean umożliwia wewnętrzne edycje lub strona musi zawierać `path` do zmiennej lub ścieżka do `function(meta, next(meta))` jest wykonywana, jeśli użytkownik dwukrotnie kliknie na kolumnę (`meta` może być `null` jeśli sieć jest odświeżona) + `next(null)` zastępuje poprzednią treść ponownie - `columns {String}` – droga do definicji `columns {Array}` - `dblclick {String}` jest linkem do metody `function(row, grid, row_el)`, wykonuje się, jeśli użytkownik kliknie dwukrotnie na kolejkę - `noborder {Boolean}` może wyłączyć granicę wokół sieci (default: `false`) - `clusterize {Boolean}` może wyłączyć skręcanie zbiorowe (default: `true`) - `contextmenu {String}` link do `function(e, grid)` kiedy użytkownik podnosi menu kontekstu - `autoformat {Boolean}` umożliwia automatyczne formaty, takie jak `email`, `phone` i `number` (default: `true`) - `controls {Boolean}` umożliwia kontrolę określoną w `columns` (default: `true`) - `hfunc {String}` jest linkem do metody `function(el)`, jest wykonywany, jeśli użytkownik kliknie ikonę dodaną do bardzo pierwszego rzędu nagłówków. usefull do integracji innego składnika z DataGrid. np. j-filter - Ikony `hfuncicon {String}` hfunc np. domowe, cog itp. - `pagination {Boolean}` umożliwia/nie umożliwia przeglądanie stron (default: `true`) - `config.exec` zostanie wykonany, jeśli pasek jest na końcu, a można go użyć jako surową odpowiedź `array` rzęs - `ovalue {String}` klucz domyślny do uzyskania `value` z `column.options` (domyślne: `id`) - `otext {String}` klucz domyślny do uzyskania `text` z `column.options` (domyślne: `name`) __Kolumna właściwości__: - `name {String}` - nazwa pola w kolejce obiektu - `text {String}` etykietę kolumny, tekst z `.ti ti-home` będzie wyświetlać ikonę Total - `title {String}` - typ narzędzi kolumny (opcjonalny) - `width {Number}` szerokość kolumny (opcjonalna, domyślna `config.colwidth`) - `filter {String/Boolean}` miejsce dla filtra lub `boolean` może wyłączyć filtr dla tej kolumny (opcjonalnie) - `filtervalue {Object}` opcjonalny, wartość wstępnie zdefiniowana (default: `undefined`) - `filtertype {Number/String}`, `1` zablokuje wyszukiwanie inteligentne (default: `0` - oznacza to, że wyszukiwarka inteligentna jest włączona) - `align {String}` może być `center` lub `right` (opcjonalnie, domyślnie: `left`) - `template {String}` może być szablonem Tangular i model jest całym obiektem kolejki - `sorting {Boolean}` umożliwia sortowanie (opcjonalne, domyślne: `true`) - `search {Boolean/String}` `true` filtruje wartość według wyniku `template` lub `String` może być szablonem Tangular, który będzie używany jako wartość do wyszukiwania - `format {String/Number}` może być używany do daty i liczby (liczba dziesięcioleci) pola (opcjonalne), na przykład `dd.MM.yyyy` - `hide {Boolean}` ukrywa kolumnę - `listcolumn {Boolean}`:prawdziwe, fałszywe do usuwania kolumny z listy kolumn - `hidden {String}` jako strzałka funkcja `column => true` -> kolumna będzie ukryta (np. dla ograniczenia użytkownika) - `options {Object Array}` opcjonalny, filtracja dostosowana np. `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r link do źródła danych - `otext {String}` opcjonalny, klucz do pola `text` w `options`, domyślnie `config.otext` - `ovalue {String}` opcjonalny, klucz do pola `value` w `options`, domyślnie `config.ovalue` - `buttonapply {String}` opcjonalny, etykieta dla przycisku `Apply` w kolumnach, domyślnie: `Apply` - `class {String}` opcjonalny, nazwa klasy kolumny - `empty {String/Boolean}` opcjonalny, może ponownie napisać pustą wartość z wartościami zdefiniowanymi w pustym polu (wartość `true` wykorzystuje `---` jako wartość domyślną) - `min {Number}` _ edytowane tylko_ min. wartość - `max {Number}` _odpowiedni tylko_ max. wartość - `required {Boolean}` - tylko edytowane - `dirsearch {String/Boolean}` miejsce do wyszukiwania `j-Directory`, boolean z `false` będzie wyłączyć wyszukiwanie - `type {String}` opcjonalny, może zawierać typ danych (`string`, `boolean`, `date`, `number`, `email`, `phone` lub `url`) dla pola - `editable {Boolean}` umożliwia edycję - `currency {String}` nazwa waluty (musi być zdefiniowana w `DEF.currencies`) - `editable {String}` Droga do dostępu do edycji `function(meta)`Ważne jest: `meta.next(new_value)` lub `meta.cancel()` - `colorize {Boolean}` umożliwia kolorowanie wartości - `monospace {Boolean}` umożliwia typ czcionki monospace - __NEW__ `raw {Boolean}` umożliwia/nie pozwala na ucieczkę HTML w filtrach kolumn (default: `false`) - __NEW__ `pair {Boolean}` umożliwia/zniesie wartość automatyczną w połączeniu z konfiguracją `options` (default: `false`) __Kontrola przepływu (NOW)__: - Można go zdefiniować jako typ kolumny `controls` - powinny być zdefiniowane kolumny `template` (Tangular, `row` jest modelem dla Tangular dla każdego rzędu) - Zobacz przykład - Przycisk wydarzenia `click` jest przechowywany do `config.button` __Filtrowanie__: - `numbers`: (1) `number` wyszukuje dokładną liczbę, (2) `number - number` jest odstępem między liczbami - `strings`: (1) `string` wyszukuje dokładną łańcuch, (2) `string1, string2, string3` jest wielokrotnym kryterium wyszukiwania - `dates`1) rok `2017` Wszelkie daty w tym roku (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` jest okres między datami, (3) `12-20 - 12-31` <--> `20.12 - 31.12` Rozkład między datami w bieżącym roku i (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` lub (5) `-5 days` <--> `-1 week` <--> `-10 years` __Metody__: - `component.redraw([reselect_again])` może odtwarzać kolejki ponownie (tylko w przypadku modyfikacji, jeśli usuniesz pewne kolejki, które musisz zaktualizować cały model) - `component.resetfilter()` może ustawić 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])` może eksportować linie z renderowaniem ze strony serwera - `component.appendrow(row_object, [scrolldown], [prepend])` wskazywa i rzuca - `component.redrawrow(row_object, [new_object_row])` redraws rzędu lub __NEW__: zastępuje +redraws `row_object` z nowym `new_object_row` - `component.clear()` oczyszcza wszystkie zmiany - `component.select(row)` wybiera `row` musi być tym samym przedmiotem jak w źródle danych - `component.editcolumn(row_index, col_index)` wykonuje `config.change` wewnętrznie (tylko do zaawansowanego użytku) - `component.applyfilter(obj)` może zastosować filtrację `{ name: 'Peter', age: '20 - 50' }` - `component.resetcolumns()` powtórza kolumny - `component.readfilter()` zwraca aktualny filtr - `component.rebind(schemaname__or__columnsdeclaration)` metodą odzwierciedla schemat - `component.reload()` wykonuje `config.exec` z bieżącym filtrem i sortowaniem - `component.empty()` Empty wszystkie rzędy - `component.redrawcolumns()` odświeża kolumny bez ich ponownego ustawienia - __NEW__: `component.schema(name)` zmienia schemat i odświeża dane __Właściwości__: - `component.meta` zwraca wewnętrzne informacje o filtrach, kolumnach i rzędach __Dobrze wiedzieć__: - `NULL('link.to.data')` oceny `config.exec` - `SET('link.to.data', data, 'noscroll')` -> typ `noscroll` zaburza ponownego ustawienia skręcania __Jak rozszerzyć klasę kolejności?__ - Spójrz na linię `{{ if active }}`, rozszerza klasę kolejności poprzez dodanie `dg-active-class`, jeśli `active` będzie ważny ```javascript [ '{{ if active }} dg-active-class{{ fi }}', { name: 'name', text: 'Name', width: 200 }, // other columns ... ] ``` __Wiele schematów__: ```html ``` Użyj go z ``Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT. ```html example.html ```