# j-DataGrid
> Detta nätverk skapades för enskilda sidor och företagsprogram.
Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sv
Content-SHA256: 353a057abf70a057666baaa22627a9bbe7c6a3b4a09aa1b7d24da29bf0f26824
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded
Detta nätverk skapades för enskilda sidor och företagsprogram.
- nödvändigt `bootstrap`-system
- Du kan göra mer än 30 000 rader utan problem
- Stöd för drag & drop kolumner
- Stöd för sortering
- Stöd för att återställa kolumner
- stödjer vertikal/horisontell skruvning
- Stöd för filter
- Stöd för checkboxes
- Custom scrollbars oberoende på OS
- Svarande
- Stöd för _dark mode_
- __IMPORTANT__ kolumnalternativ filter behöver `j-Directory` komponent
__Totala__:
- multisort
- återställande kolumner för beröringsanordningar
- Återbeställa kolumner för berörda enheter
__data-källa__ måste innehålla:
```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
}
```
eller rå `Array`, men du kan inte använda sidningar och externa filter:
```js
[{ name: 'Row 1' }, { name: 'Row 2' }];
```
__Konfigurera__:
- `filterlabel {String}` en standardplatsbehållare för alla filter (valfritt)
- `rememberfilter {Boolean}` med sant det påminner om filter för varje schema (default: `true`)
- `schema {String}` en standard schema (default: `default`)
- `pluralizepages {String}` pluralisering för sidor (alternativt, standard: `# pages,# page,# pages,# pages`)
- `pluralizeitems {String}` pluralisering för objekt (alternativt, standard: `# items,# item,# items,# items`)
- `height {Number/String}` Höjd av nät, stödda värden: `auto` (Föregående inlägg) _NEW `fluid`, `parent` eller `parent1`, `parent2`) eller `NUMBER` som höjd eller `selector` för jQuery.closest()
- Minimalt `minheight {Number}`-höghet, arbetar med `fluid` och `auto`-högheten (default: `200`)
- `parent {String}`-selektor för `auto` höjdalternativ (default: `window`)
- `margin {Number}` en toppmarginal för höjd (alternativ, standard: `0`)
- `boolean {String}` ett värde för filtrering av booleanvärden (alternativt, standard: `true|on|yes`)
- `resize {Boolean}` gör det möjligt att återställa kolumner (alternativt, standard: `true`)
- `reorder {Boolean}` möjliggör ombeställning av kolumner (alternativt, standard: `true`)
- `sorting {Boolean}` möjliggör sortering (alternativ, standard `true`)
- `remember {Boolean}` påminner om att ordna om och återställa kolumner (alternativt, standard `true`)
- `checkbox {Boolean}` möjliggör checkboxar
- `colwidth {Number}` en standardkolumn bredd i pixlar (alternativt, standard `150`)
- `rowheight {Number}` en standard radhöjd i pixlar (alternativt, standard: `24`) + det beror på CSS
- `alignheader {String/Number}` Align för header `right` eller `2`) eller `center` eller `1`(Förutsatt och standard) `left`)
- `alignfilter {String/Number}` Anpassning för filter `right` eller `2`) eller `center` eller `1`(Förutsatt och standard) `left`)
- `align {String/Number}` Anpassning för ett kolumnvärde `right` eller `2`) eller `center` eller `1`(Förutsatt och standard) `left`)
- `click {String}` en länk till en väg eller `function(row, grid, row_el)`, ett register kommer att tilldelas/exekveras om användaren klickar på en rad
- `clickid {String}` ett identifierings- och egendomsnamn för bakåtvisning (för föregående radhögtalare), standard: `id`
- `highlight {Boolean}` varje utvalda rad (efter `click`) kommer att betonas (default: `false`)
- `unhighlight {Boolean}` möjliggör `undo highlighting` av den valda raden (default: `true`)
- `checked {String}` `path` till en variabel eller väg till `function(rows, grid)` körs om användaren har valt/kontrollerat vissa rader
- `autoselect {Boolean}` möjliggör självval av första raden i nätverket, det utför `EXEC(config.click)`, standard: `false`
- `limit {Number}` en klustergräns, standard: `80`
- `numbering {Boolean}`, standard för valfri `false`
- `allowtitles {Boolean}`, möjliggör titlar för alla radvärden, standard `false`
- `button {String}` en länk till `function(btn_name, row, btn_element, event, name)` körs om användaren klickar på en __button__ i raden
- `exec {String}` en länk till `function(type, filter, sort, page)` för server-sidor (det inaktiverar klient-sidors sortering och filtrering), stödda typer: `refresh` eller `page`
- `changed {String}` `path` till en variabel eller väg till `function(rows, grid)` körs om användaren ändrar vissa rader
- `change {String/Boolean}` boolean möjliggör intern redigering eller sträng måste innehålla en `path` till en variabel eller väg till `function(meta, next(meta))` körs om användaren dubbelklickar på en kolumn (`meta` kan vara `null` om nätverket är uppfrisknat) + `next(null)` ersätter tidigare innehåll igen
- `columns {String}` en väg till definition av `columns {Array}`
- `dblclick {String}` en länk till `function(row, grid, row_el)`-metoden, det körs om användaren dubbelklickar på en rad
- `noborder {Boolean}` kan inaktivera en gräns runt nätverket (default: `false`)
- `clusterize {Boolean}` kan inaktivera klusterad snurrning (default: `true`)
- `contextmenu {String}` en länk till `function(e, grid)` när användaren lyfter sammanhangsmenyn
- `autoformat {Boolean}` möjliggör automatiska typer som `email`, `phone` och `number` (default: `true`)
- `controls {Boolean}` möjliggör kontroller definierade i `columns` (default: `true`)
- `hfunc {String}` en länk till `function(el)` metod, det körs om användaren klickar på ikonen som läggs till den första header raden. usefull att integrera andra komponenter med DataGrid. t.ex. j-filter
- `hfuncicon {String}` hfunc ikon t.ex. hem, cog, etc.
- `pagination {Boolean}` aktiverar/avaktiverar sidan (default: `true`)
- `config.exec` kommer att utföras om skruvfältet är i slutet, och du kan använda som råvaror av `array` rader
- `ovalue {String}` en standardnyckel för att få `value` från `column.options` (default: `id`)
- `otext {String}` en standardnyckel för att få `text` från `column.options` (default: `name`)
__Kolumner egenskaper__:
- `name {String}` ett fältnamn i raden objekt
- `text {String}` en kolumn etikett, text med `.ti ti-home` kommer att göra Total ikon
- `title {String}` en kolumn verktygstyp (alternativ)
- `width {Number}` en kolumn bredd (alternativt, standard `config.colwidth`)
- `filter {String/Boolean}` en platsinnehavare för filtret eller `boolean` kan inaktivera filter för denna kolumn (alternativt)
- `filtervalue {Object}` valfritt, ett fördefinierat filtervärde (vanligt: `undefined`)
- `filtertype {Number/String}`, `1` inaktiverar smart sökning (default: `0` - det innebär att smart sökningen är aktiverad)
- `align {String}` kan vara `center` eller `right` (alternativt, standard: `left`)
- `template {String}` kan vara en Tangular mall och modellen är hela objektet i raden
- `sorting {Boolean}` möjliggör sortering (alternativ, standard: `true`)
- `search {Boolean/String}` `true` kommer att filtrera ett värde enligt `template` resultat eller `String` kan vara en Tangular mall som kommer att användas som ett värd för sökning
- `format {String/Number}` kan användas för datum och siffror (antal decimaler) fält (alternativ), t.ex. `dd.MM.yyyy`
- `hide {Boolean}` döljer en kolumn
- `listcolumn {Boolean}` standard: sanna, falska för att ta bort kolumner från kolumnen lista
- `hidden {String}` som en pil funktion `column => true` --> kolumnen kommer att döljas (t.ex. för begränsande användare)
- `options {Object Array}` valfritt, en anpassad filter till exempel `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r länk till datakälla
- `otext {String}` valfritt, en nyckel för `text` fält i `options`, standard `config.otext`
- `ovalue {String}` valfritt, en nyckel för `value` fält i `options`, standard `config.ovalue`
- `buttonapply {String}` valfritt, en etikett för `Apply` knappen i kolumner, standard: `Apply`
- `class {String}` valfritt, en anpassad kolumn klassnamn
- `empty {String/Boolean}` är valfritt, kan skriva om tomt värde med det värde som definieras i ett tomt fält (`true` värde använder `---` som standardvärde)
- `min {Number}` _ redigerbar endast__ ett min. antal värde
- `max {Number}` _ redigerbar endast__ ett max. nummervärde
- `required {Boolean}` - endast redigerbar
- `dirsearch {String/Boolean}` en platsinnehavare för `j-Directory` sökning, boolean med `false` kommer att inaktivera sökningen
- `type {String}` är valfritt, kan innehålla en datatyp (`string`, `boolean`, `date`, `number`, `email`, `phone` eller `url`) för fältet
- `editable {Boolean}` möjliggör redigering
- `currency {String}` ett valutanamn (kan definieras i `DEF.currencies`)
- `editable {String}` En väg till anpassad redigerbar `function(meta)`, viktig: `meta.next(new_value)` eller `meta.cancel()`
- `colorize {Boolean}` möjliggör färgning av värdet
- `monospace {Boolean}` möjliggör monospace font typ
- __NEW__ `raw {Boolean}` möjliggör/aktiverar HTML-flykt i kolumner (default: `false`)
- __NEW__ `pair {Boolean}` aktiverar/deaktiverar automatisk värde i kombination med `options`-konfigurationen (default: `false`)
__Råkontroll (NEW)__:
- kan definieras som kolumntyp `controls`
- måste definiera kolumnen `template` (Tangular, `row` är en modell för Tangular för varje rad)
- Se till exempel
- knappen `click` händelse fångas till `config.button`
__Filtrera__:
- `numbers`: (1) `number` söker ett exakt nummer, (2) `number - number` är ett intervall mellan siffrorna
- `strings`: (1) `string` söker en exakt sträng, (2) `string1, string2, string3` är ett flera sökkriterium
- `dates`(1) år `2017` Sök alla datum i år, (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` är ett intervall mellan datum, (3) `12-20 - 12-31` <--> `20.12 - 31.12` ett intervall mellan datum i det aktuella året (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` eller (5) `-5 days` <--> `-1 week` <--> `-10 years`
__Metoder__:
- `component.redraw([reselect_again])` kan återskapa rader (endast för ändringar, om du tar bort några rader som du behöver för att uppdatera hela modellen)
- `component.resetfilter()` kan återställa ett filter
- `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 exportera rader med server-side rendering
- `component.appendrow(row_object, [scrolldown], [prepend])` appends och renderar
- `component.redrawrow(row_object, [new_object_row])` redraws rad eller __NEW__: ersätter+redraws `row_object` med en ny `new_object_row`
- `component.clear()` klarar alla förändringar
- `component.select(row)` väljer `row` måste vara samma objekt som i datakälla
- `component.editcolumn(row_index, col_index)` utför `config.change` internt (endast för avancerad användning)
- `component.applyfilter(obj)` kan tillämpa en anpassad filter `{ name: 'Peter', age: '20 - 50' }`
- `component.resetcolumns()` återställer kolumner
- `component.readfilter()` returnerar ett aktuellt filter
- `component.rebind(schemaname__or__columnsdeclaration)`-metoden återställer schemat
- `component.reload()` utför `config.exec` med den aktuella filter och sortering
- `component.empty()` empties alla rader
- `component.redrawcolumns()` redraw kolumner utan att ställa in dem
- __NEW__: `component.schema(name)` ändrar en schema och förnyar data
__ägodelar__:
- `component.meta` returnerar interna meta-information om filter, kolumner och rader
__Bra att veta__:
- `NULL('link.to.data')` utvärderar `config.exec`
- `SET('link.to.data', data, 'noscroll')` --> typ `noscroll` inaktiverar återställning av skruv
__Hur man utökar en klass av rad?__
- Se på `{{ if active }}`-linjen, förlänger den en klass av rad genom att lägga till `dg-active-class` om `active` är giltig
```javascript
[
'{{ if active }} dg-active-class{{ fi }}',
{ name: 'name', text: 'Name', width: 200 },
// other columns ...
]
```
__Flera scheman__:
```html
```
Använd den med ``När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.
```html example.html
```