# j-DataGrid > Dieses Raster wurde für Einzelseitenanwendungen und Unternehmensanwendungen erstellt. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: de Content-SHA256: 5c7f1e979c25b342e3b7942adc4f2bfb6041298f8ed4d174f73bc458d12c7b9c Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Dieses Raster wurde für Einzelseitenanwendungen und Unternehmensanwendungen erstellt. - Benötigtes Gittersystem `bootstrap` - Sie können problemlos mehr als 30.000 Zeilen rendern - Unterstützt Drag&Drop-Spalten - unterstützt das Sortieren - Unterstützt die Größenänderung von Spalten - Unterstützt vertikales/horizontales Scrollen - unterstützt Filter - unterstützt Kontrollkästchen - Benutzerdefinierte Bildlaufleisten unabhängig vom Betriebssystem - reaktionsschnell - unterstützt den __Dark-Modus__ - Der Spaltenoptionsfilter __WICHTIG__ benötigt die Komponente `j-Directory` __TO-DO__: - Multisort - Größenänderung der Spalten für Touch-Geräte - Neuordnung der Spalten für Touch-Geräte __Datenquelle__ muss Folgendes enthalten: ```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 } ``` oder rohes `Array`, aber Sie können keine Paginierung und externe Filter verwenden: ```js [{ name: 'Row 1' }, { name: 'Row 2' }]; ``` __Konfiguration__: - `filterlabel {String}` ein Standardplatzhalter für alle Filter (optional) - `rememberfilter {Boolean}` mit echten es erinnert sich an Filter für jedes Schema (Default: `true`) - `schema {String}` ein Standardschema (Default: `default`) - `pluralizepages {String}` Pluralisierung für Seiten (optional, Standard: `# pages,# page,# pages,# pages`) - `pluralizeitems {String}` Pluralisierung für Elemente (optional, Standard: `# items,# item,# items,# items`) - `height {Number/String}` Höhen der Netz, unterstützte Werte: `auto` (Nach dem Stand) - Neues `fluid`, `parent` (oder `parent1`, `parent2`oder `NUMBER` als Höhe oder `selector` für jQuery.closest() - `minheight {Number}` Minimale Höhen des Netzes, mit `fluid` und `auto` höhen (Default: `200`) - `parent {String}`-Selektor für `auto`-Höhenoption (Standard: `window`) - `margin {Number}` ein oberer Rand für die Höhe (optional, Standard: `0`) - `boolean {String}` ein Wert für die Filterung von Booleanwerte (optional, Standard: `true|on|yes`) - `resize {Boolean}` ermöglicht die Wiedergabe von Spalten (optional, Standard: `true`) - `reorder {Boolean}` ermöglicht die Wiederverordnung von Spalten (optional, Standard: `true`) - `sorting {Boolean}` ermöglicht Sortierung (optional, Standard `true`) - `remember {Boolean}` erinnert sich an die wiederordnungs- und wiederordnungssteile (optional, standardmäßig `true`) - `checkbox {Boolean}` ermöglicht Checkboxes - `colwidth {Number}` eine Standardkolumnbreite in Pixeln (optional, Standard `150`) - `rowheight {Number}` ist eine Standard-Rennhöhe in Pixeln (optional, Standard: `24`) + es hängt von CSS ab - `alignheader {String/Number}` Align für Header `right` (oder `2`oder `center` (oder `1`(Optional und default) `left`) - `alignfilter {String/Number}` Anpassung zum Filter-Input `right` (oder `2`oder `center` (oder `1`(Optional und default) `left`) - `align {String/Number}` Anpassung für einen Kolumnwert `right` (oder `2`oder `center` (oder `1`(Optional und default) `left`) - `click {String}` eine Verbindung zu einem Pfad oder `function(row, grid, row_el)`, wird ein Aufzeichnung zugeordnet / ausgeführt, wenn der Benutzer auf eine Reihe klickt - `clickid {String}` ein Identifikator / Eigentumsname für die Rückverfolgung (für den vorherigen Rennen-Highlight), Standard: `id` - `highlight {Boolean}` wird in jeder ausgewählten Reihe (nach `click`) hervorgehoben (Default: `false`) - `unhighlight {Boolean}` ermöglicht `undo highlighting` der ausgewählten Reihe (Default: `true`) - `checked {String}` `path` zu einer Variable oder Pfad nach `function(rows, grid)` wird ausgeführt, wenn der Benutzer einige Zeilen ausgewählt / überprüft - `autoselect {Boolean}` ermöglicht die automatische Auswahl der ersten Reihe im Netzwerk, es erfüllt `EXEC(config.click)`, Standard: `false` - `limit {Number}` eine Klustergrenze, Standard: `80` - `numbering {Boolean}`, optionale Standardphase `false` - `allowtitles {Boolean}`, ermöglicht Titel für alle Zeilenwerte, optionale Standard `false` - `button {String}` eine Verbindung zu `function(btn_name, row, btn_element, event, name)` wird ausgeführt, wenn der Benutzer auf einen __button__ in der Reihe klickt - `exec {String}` eine Verbindung zu `function(type, filter, sort, page)` nur für Server-Seite-Bewegungen (es deaktiviert Client-Seiten-Sortierung und Filterung), unterstützte Typen: `refresh` oder `page` - `changed {String}` `path` zu einer Variable oder Pfad nach `function(rows, grid)` wird ausgeführt, wenn der Benutzer einige Zeilen ändert - `change {String/Boolean}` Boolean ermöglicht die interne Bearbeitung oder String muss eine `path` zu einer Variable enthalten oder der Weg nach `function(meta, next(meta))` ausgeführt wird, wenn der Benutzer doppelt auf eine Spalte klickt (`meta` kann `null` sein, wenn das Netz neu gemacht wird) + `next(null)` ersetzt erneut vorheriges Inhalt - `columns {String}` ist ein Weg zur Definition von `columns {Array}` - `dblclick {String}` eine Verbindung zu der Methode `function(row, grid, row_el)` wird ausgeführt, wenn der Benutzer doppelt klickt auf eine Reihe - `noborder {Boolean}` kann eine Grenze rund um das Netz deaktivieren (Default: `false`) - `clusterize {Boolean}` kann Cluster-Skrollung deaktivieren (Default: `true`) - `contextmenu {String}` eine Verbindung zu `function(e, grid)` wenn der Benutzer das Kontextmenü erhöht - `autoformat {Boolean}` ermöglicht Autoformate wie `email`, `phone` und `number` (Default: `true`) - `controls {Boolean}` ermöglicht die in `columns` definierten Steuerungen (Default: `true`) - `hfunc {String}` eine Verbindung zu der Methode `function(el)` wird ausgeführt, wenn der Benutzer auf die Ikon klickt, die an die erste Header-Reihe hinzugefügt wird. usefull, um andere Komponenten mit DataGrid einzuschließen. - `hfuncicon {String}` hfunc Ikon z.B. zu Hause, cog usw. - `pagination {Boolean}` ermöglicht/abschließt Pageing (Default: `true`) - `config.exec` wird ausgeführt, wenn die Spülbar am Ende ist, und Sie können als Raw-Reaktion `array` der Zeilen verwenden - `ovalue {String}` ist ein Standard-Schlüssel, um `value` von `column.options` zu erhalten (Default: `id`) - `otext {String}` ist ein Standard-Schlüssel, um `text` von `column.options` zu erhalten (Default: `name`) __Kolonne Eigenschaften__: - `name {String}` ein Feldnamen in der Reihe von Objekten - `text {String}` eine Spaltezeichen, Text mit `.ti ti-home` wird die Gesamt-Ikon - `title {String}` eine Spalte-Tooltype (optional) - `width {Number}` eine Spalteweite (optional, Standard `config.colwidth`) - `filter {String/Boolean}` ein Platzhalter für das Filter oder `boolean` kann Filter für diese Spalte deaktivieren (optional) - `filtervalue {Object}` optionale, ein vorgegebener Filterwert (Default: `undefined`) - `filtertype {Number/String}`, `1` deaktiviert Smart Search (Default: `0` - es bedeutet, dass Smart Search aktiviert wird) - `align {String}` kann `center` oder `right` sein (optional, Standard: `left`) - `template {String}` kann ein Tangular-Template sein und das Modell ist das ganze Objekt der Reihe - `sorting {Boolean}` ermöglicht die Sortierung (optional, Standard: `true`) - `search {Boolean/String}` `true` wird einen Wert nach dem `template` Ergebnis filtern oder `String` kann ein Tangular-Template sein, das als Wert für die Suche verwendet wird - `format {String/Number}` kann für Datum und Zahlen (Zahl von Decimalen) Feld (optional) verwendet werden, z. B. `dd.MM.yyyy` - `hide {Boolean}` versteckt eine Spalte - `listcolumn {Boolean}` Standard: wahr, falsch für die Entfernung der Spalte aus der Spaltenliste - `hidden {String}` als Fingerfunktion `column => true` --> wird die Spalte verborgen (z.B. für den begrenzten Benutzer) - `options {Object Array}` optionale, ein benutzerdefiniertes Filter zum Beispiel `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r Link zur Datenquelle - `otext {String}` optionale, ein Schlüssel für das `text` Feld in `options`, Standard `config.otext` - `ovalue {String}` optionale, ein Schlüssel für das `value` Feld in `options`, Standard `config.ovalue` - `buttonapply {String}` optionale, eine Etikette für die `Apply`-Schaltfläche in Spalten, Standard: `Apply` - `class {String}` optionale, ein angepaster Kolumnklasse - `empty {String/Boolean}` optionale, kann leer Wert mit dem im leeren Feld definierten Wert wiederschreiben (`true` Wert verwendet `---` als Standardwert) - `min {Number}` __editable nur__ eine min. - `max {Number}` __editable nur__ ein max. - `required {Boolean}` - nur redigierbar - `dirsearch {String/Boolean}` ist ein Plattform für die Suche nach `j-Directory`, Boolean mit `false` wird die Suche deaktivieren - `type {String}` optionale, kann eine Datenart enthalten (`string`, `boolean`, `date`, `number`, `email`, `phone` oder `url`) für das Feld - `editable {Boolean}` ermöglicht die Bearbeitung - `currency {String}` ein Währungsnamen (sie müssen in `DEF.currencies`) definiert werden - `editable {String}` Ein Weg zum anpassbaren `function(meta)`, wichtig: `meta.next(new_value)` oder `meta.cancel()` - `colorize {Boolean}` ermöglicht eine Farbung des Wertes - `monospace {Boolean}` ermöglicht monospace-Schriftart - __NEW__ `raw {Boolean}` ermöglicht / verhindert HTML-Flüchtungen in Kolumnenfiltern (Default: `false`) - __NEW__ `pair {Boolean}` ermöglicht/deaktiviert Auto-Wert in Verbindung mit der Konfiguration `options` (Default: `false`) __Röhrungskontrolle (NEW)__: - kann als Kolonne Typ `controls` definiert werden - muss die Spalte `template` definiert werden (Tangular, `row` ist ein Modell für Tangular für jede Reihe) - Schauen Sie sich zum Beispiel - Die `click`-Event-Button wird auf `config.button` festgenommen __Filterung__: - `numbers`: (1) `number` sucht eine genaue Zahl, (2) `number - number` ist ein Abschnitt zwischen den Zahlen - `strings`: (1) `string` sucht eine genaue Zeile, (2) `string1, string2, string3` ist ein mehrerer Suchkriterium - `dates`(1) Das Jahr `2017` Suche nach allen Daten in diesem Jahr, (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` Es gibt einen Abstand zwischen den Datensätzen (3) `12-20 - 12-31` <--> `20.12 - 31.12` Ein Abstand zwischen den Daten im aktuellen Jahr und (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` oder (5) `-5 days` <--> `-1 week` <--> `-10 years` __Methoden__: - `component.redraw([reselect_again])` kann nochmals Zeilen redrawern (nur für Änderungen, wenn Sie einige Zeilen entfernen müssen, um das ganze Modell zu aktualisieren) - `component.resetfilter()` kann ein Filter neu aufstellen - `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])` kann Zeilen mit Server-Side-Rendering exportieren - `component.appendrow(row_object, [scrolldown], [prepend])` Appends und Render - `component.redrawrow(row_object, [new_object_row])` redraws line oder __NEW__: ersetzt +redraws `row_object` mit einem neuen `new_object_row` - `component.clear()` klärt alle Veränderungen - `component.select(row)` wählt `row` muss das gleiche Objekt sein wie in der Datenquelle - `component.editcolumn(row_index, col_index)` führt `config.change` intern aus (nur für fortgeschrittene Verwendung) - `component.applyfilter(obj)` kann ein benutzerdefiniertes Filter `{ name: 'Peter', age: '20 - 50' }` anwenden - `component.resetcolumns()` wiederherstellbar - `component.readfilter()` gibt einen aktuellen Filter zurück - `component.rebind(schemaname__or__columnsdeclaration)` die Methode verwandelt das Schema - `component.reload()` führt `config.exec` mit dem aktuellen Filter und Sortierung aus - `component.empty()` empties alle Zeilen - `component.redrawcolumns()` Redraw Kolumne ohne Wiederherstellung - __NEW__: `component.schema(name)` ändert ein Schema und erfrischt Daten __Eigenschaften__: - `component.meta` gibt interne Meta-Informationen über Filter, Spalten und Zeilen zurück __Gut zu wissen__: - `NULL('link.to.data')` wertet `config.exec` aus - `SET('link.to.data', data, 'noscroll')` --> Typ `noscroll` verhindert die Wiederherstellung des Schraubens __Wie erweitert man eine Klasse?__ - Auf die `{{ if active }}`-Linie wird eine Klasse der Reihe erweitert, indem Sie `dg-active-class` hinzufügen, wenn die `active` gültig ist. ```javascript [ '{{ if active }} dg-active-class{{ fi }}', { name: 'name', text: 'Name', width: 200 }, // other columns ... ] ``` __Mehrere Schemata__: ```html ``` Verwenden Sie es mit ``. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz. ```html example.html ```