# j-DataGrid

> Această rețea a fost creată pentru aplicații de o singură pagină și aplicații corporative.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: ro
Content-SHA256: 0faa4674b79167c04ee878d637d3a4fca7476dad251e11597cbab9cb7fb026d6
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Această rețea a fost creată pentru aplicații de o singură pagină și aplicații corporative.

- Sistemul de rețea `bootstrap`
- Puteți face mai mult de 30.000 de rânduri fără probleme
- Cuvânt cheie: drag & drop columns
- susținerea sortării
- susține recidivarea coloanelor
- susține scrollarea verticală/orizontală
- susține filtrele
- Suport pentru checkboxes
- Scrollbars independente pe OS
- Răspunsuri
- Modul întunecat - Dark Mode
- __IMPORTANT__ opțiuni de column filtru necesită componentul `j-Directory`

__To-do__:

- Multisortul
- Columne pentru dispozitivele de contact
- Reordinează coloanele pentru dispozitivele de atingere

_sursă de date trebuie să conțină:

```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
}
```

sau `Array` crud, dar nu puteți folosi paginație și filtre externe:

```js
[{ name: 'Row 1' }, { name: 'Row 2' }];
```

__Configurarea__:

- `filterlabel {String}` este un locator standard pentru toate filtrele (opțional)
- `rememberfilter {Boolean}` cu adevărat se amintește de filtre pentru fiecare schemă (default: `true`)
- `schema {String}` este un schemă standard (default: `default`)
- Pluralizare `pluralizepages {String}` pentru pagini (opțional, standard: `# pages,# page,# pages,# pages`)
- Pluralizare `pluralizeitems {String}` pentru articole (opțional, standard: `# items,# item,# items,# items`)
- `height {Number/String}` Înălțimea rețelei, valorile susținute: `auto` (în mod implicit) - Noua `fluid`, `parent` sau `parent1`, `parent2`sau `NUMBER` Înălțimea sau `selector` pentru jQuery.closest()
- Înălțimea minimă a rețelei `minheight {Number}`, funcționează cu înălțimi `fluid` și `auto` (default: `200`)
- Selectorul `parent {String}` pentru opțiunea de înălțime `auto` (default: `window`)
- `margin {Number}` este o marjă de înălțime (opțional, standard: `0`)
- `boolean {String}` este o valoare pentru filtrarea valorilor boolean (opțional, standard: `true|on|yes`)
- `resize {Boolean}` permite redimensionarea coloanelor (opțional, standard: `true`)
- `reorder {Boolean}` permite reordinea coloanelor (opțional, standard: `true`)
- `sorting {Boolean}` permite sortarea (opțional, standard `true`)
- `remember {Boolean}` reamintește coloanele de reordine și reîncărcare (opțional, standard `true`)
- `checkbox {Boolean}` permite cutii de control
- `colwidth {Number}` o lățime de coloană implicită în pixeli (opțional, `150`)
- `rowheight {Number}` este o înălțime de rând standard în pixeli (opțional, standard: `24`) + depinde de CSS
- `alignheader {String/Number}` Align pentru titlu `right` sau `2`sau `center` sau `1`(în mod opțional și în mod default) `left`)
- `alignfilter {String/Number}` Align pentru filtrul de intrare `right` sau `2`sau `center` sau `1`(în mod opțional și în mod default) `left`)
- `align {String/Number}` Align pentru o valoare coloană `right` sau `2`sau `center` sau `1`(în mod opțional și în mod default) `left`)
- `click {String}` un link la o cale sau `function(row, grid, row_el)`, un record va fi atribuit/executat dacă utilizatorul face clic pe o rată
- `clickid {String}` un nume de identificator/proprietate pentru redragerea înapoi (pentru evidența din rândul anterior), standard: `id`
- `highlight {Boolean}` fiecare rând selectat (după `click`) va fi evidențiat (default: `false`)
- `unhighlight {Boolean}` permite `undo highlighting` din rândul selectat (default: `true`)
- `checked {String}` `path` la o variabilă sau drumul către `function(rows, grid)` este executat dacă utilizatorul a selectat/a verificat anumite rânduri
- `autoselect {Boolean}` permite selectarea automată a primei rânduri în rețea, funcționează `EXEC(config.click)`, standard: `false`
- `limit {Number}` o limită de cluster, standard: `80`
- `numbering {Boolean}`, standard de preferință `false`
- `allowtitles {Boolean}`, permite titlurile pentru toate valorile de rând, standardul opțional `false`
- `button {String}` un link la `function(btn_name, row, btn_element, event, name)` este executat dacă utilizatorul face clic pe un buton __ în rând
- `exec {String}` este un link la `function(type, filter, sort, page)` pentru operațiunile de server-side (acesta interzice sortarea și filtrarea client-side), tipuri susținute: `refresh` sau `page`
- `changed {String}` `path` la o variabilă sau calea către `function(rows, grid)` este executată dacă utilizatorul a schimbat anumite rânduri
- `change {String/Boolean}` boolean permite editarea internă sau string trebuie să conțină un `path` la o variabilă sau traseul către `function(meta, next(meta))` este executat dacă utilizatorul face dublu clic pe o coloană (`meta` poate fi `null` dacă rețeaua este refrescată) + `next(null)` înlocuiește din nou conținutul anterior
- `columns {String}` este o cale spre definiția `columns {Array}`
- `dblclick {String}` este un link la metoda `function(row, grid, row_el)`, se execută dacă utilizatorul face dublu clic pe o rîndă
- `noborder {Boolean}` poate dezactiva o graniță în jurul rețelei (default: `false`)
- `clusterize {Boolean}` poate dezactiva scrollarea clusterată (default: `true`)
- `contextmenu {String}` un link la `function(e, grid)` atunci când utilizatorul ridică meniul de context
- `autoformat {Boolean}` permite tipuri de formate auto, cum ar fi `email`, `phone` și `number` (default: `true`)
- `controls {Boolean}` permite controlurile definite în `columns` (default: `true`)
- `hfunc {String}` este un link la metoda `function(el)`, se execută dacă utilizatorul face clic pe pictura adăugată în prima linie de titlu. usefull pentru a integra un alt component cu DataGrid.
- `hfuncicon {String}` hfunc icon, cum ar fi acasă, cog etc.
- `pagination {Boolean}` permite/disabilizează paginarea (default: `true`)
	- `config.exec` va fi executat dacă scrollbarul este la capăt, și puteți folosi ca răspuns brut `array` de rânduri
- `ovalue {String}` este o cheie standard pentru a obține `value` de la `column.options` (default: `id`)
- `otext {String}` este o cheie standard pentru a obține `text` de la `column.options` (default: `name`)

__Proprietăți coloană__:

- `name {String}` - un nume de câmp în obiectul de rând
- `text {String}` este o etichetă coloană, textul cu `.ti ti-home` va reprezenta iconul Total
- `title {String}` un tip de instrumente coloană (opțional)
- `width {Number}` o lățime de coloană (opțional, standard `config.colwidth`)
- `filter {String/Boolean}` este un depozitar pentru filtrul sau `boolean` poate dezactiva filtrul pentru această coloană (opțional)
- `filtervalue {Object}` opțional, o valoare de filtrat predefinită (default: `undefined`)
- `filtertype {Number/String}`, `1` dezactivează căutarea inteligentă (default: `0` - înseamnă că este activată căutările inteligente)
- `align {String}` poate fi `center` sau `right` (opțional, standard: `left`)
- `template {String}` poate fi un șablon Tangular, iar modelul este întregul obiect al rândului
- `sorting {Boolean}` permite sortarea (opțional, standard: `true`)
- `search {Boolean/String}` `true` va filtra o valoare în funcție de rezultatul `template` sau `String` poate fi un șablon Tangular care va fi folosit ca valoare pentru căutare
- `format {String/Number}` poate fi utilizat pentru date și numere (numărul de decimale) câmp (opțional), de exemplu, `dd.MM.yyyy`
- `hide {Boolean}` ascunde o coloană
- `listcolumn {Boolean}`: adevărat, fals pentru îndepărtarea coloanei din lista coloanelor
- `hidden {String}` ca o funcție de stea `column => true` -> coloana va fi ascunsă (de exemplu, pentru restricționarea utilizatorului)
- `options {Object Array}` opțional, un filtr personalizat de exemplu `[{ text: 'yes', value: true }, { text: 'no', value: false }]` o {String}r link la sursa de date
- `otext {String}` opțional, o cheie pentru câmpul `text` în `options`, standard `config.otext`
- `ovalue {String}` opțional, o cheie pentru câmpul `value` în `options`, standard `config.ovalue`
- `buttonapply {String}` opțional, etichetă pentru butonul `Apply` în coloane, standard: `Apply`
- `class {String}` opțional, un nume de clasă personalizat
- `empty {String/Boolean}` În cazul în care este posibilă redeschiderea valorii goale cu valoarea definită în câmpul gol (`true` Valoarea utilizării `---` ca o valoare defectuoasă)
- `min {Number}` __editabil numai__ un număr min.
- `max {Number}` __editabil numai__ o valoare max.
- `required {Boolean}` - numai editabil
- `dirsearch {String/Boolean}` este un locator pentru căutarea `j-Directory`, boolean cu `false` va dezactiva căutările
- `type {String}` opțional, poate conține un tip de date (`string`, `boolean`, `date`, `number`, `email`, `phone` sau `url`) pentru câmpul
- `editable {Boolean}` permite editarea
- `currency {String}` este un nume de monedă (trebuie să fie definit în `DEF.currencies`)
- `editable {String}` Un drum către `function(meta)`, important: `meta.next(new_value)` sau `meta.cancel()`
- `colorize {Boolean}` permite o colorare a valorii
- `monospace {Boolean}` permite tipul de font monospace
- __NEW__ `raw {Boolean}` permite/disabilizează scăderea HTML în filtre de coloană (default: `false`)
- __NEW__ `pair {Boolean}` permite/disabilizează valoarea automată în combinație cu configurația `options` (default: `false`)

__Războiul de control (NEW)__:

- poate fi definită ca tip de coloană `controls`
- trebuie definită coloana `template` (Tangular, `row` este un model pentru Tangular pentru fiecare rând)
- Vezi exemplul
- butonul de eveniment `click` este capturat la `config.button`

__Filtrarea__:

- `numbers`: (1) `number` caută un număr exact, (2) `number - number` este un interval între cifre
- `strings`: (1) `string` caută o linie exactă, (2) `string1, string2, string3` este un criteriu de căutare multiplă
- `dates`• 1 an `2017` Caută toate datele din acest an (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` este un interval între date, (3) `12-20 - 12-31` <--> `20.12 - 31.12` intervalul dintre datele din anul curent și (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` sau (5) `-5 days` <--> `-1 week` <--> `-10 years`

__Metode__:

- `component.redraw([reselect_again])` poate redrage din nou rândurile (numai pentru modificări, dacă veți elimina unele rânduri trebuie să actualizați întregul model)
- `component.resetfilter()` poate fi reîncărcat un filtru
- `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])` poate exporta rânduri cu rendering server-side
- `component.appendrow(row_object, [scrolldown], [prepend])` se încadrează și se înregistrează
- `component.redrawrow(row_object, [new_object_row])` redrage rând sau __NEW__: înlocuiește + redrage `row_object` cu un nou `new_object_row`
- `component.clear()` clarifică toate modificările
- `component.select(row)` selectează `row` trebuie să fie același obiect ca și în sursa de date
- `component.editcolumn(row_index, col_index)` execută intern `config.change` (numai pentru utilizare avansată)
- `component.applyfilter(obj)` poate aplica un filtr personalizat `{ name: 'Peter', age: '20 - 50' }`
- `component.resetcolumns()` columnă
- `component.readfilter()` întoarce un filtru curent
- `component.rebind(schemaname__or__columnsdeclaration)` - Metoda reflectă schema
- `component.reload()` execută `config.exec` cu filtrul curent și sortarea
- `component.empty()` Emptite toate rândurile
- `component.redrawcolumns()` redraw coloane fără a le reinstala
- __NEW__: `component.schema(name)` modifică un schemă și refrescă datele

__Proprietăți__:

- `component.meta` returnează informații interne despre filtre, coloane și rânduri

__bine să știi__:

- `NULL('link.to.data')` Evaluarea `config.exec`
- `SET('link.to.data', data, 'noscroll')` -> tipul `noscroll` interzice reinstalarea de scrolling

__Cum să extindă o clasă de rând?__

- Uitaţi-vă la `{{ if active }}` Linea, extinde o clasă de rând prin adăugarea `dg-active-class` În cazul în care `active` Va fi valabilă

```javascript
[
	'{{ if active }} dg-active-class{{ fi }}',
	{ name: 'name', text: 'Name', width: 200 },
	// other columns ...
]
```

__Scheme multiple__:

```html
<ui-component name="datagrid" path="obj">

	<script type="text/plain" data-id="SCHEMA_A">
		[
			{ name: 'name', text: 'Name', width: 200 },
			// ...
		]
	</script>

	<script type="text/plain" data-id="SCHEMA_B">
		[
			{ name: 'price', text: 'Price', width: 100 },
			// ...
		]
	</script>

</ui-component>

<script>
	// Usage
	var obj = {};
	obj.schema = 'SCHEMA_A';
	obj.items = [];

	// Changing of schema
	setTimeout(function() {
		obj.schema = 'SCHEMA_B';
		obj.items = [];
		UPD('obj');
	}, 5000);
</script>
```

Utilizați-l cu `<ui-component name="datagrid">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

```html example.html
<ui-component name="LAZY directory"></ui-component>
<ui-component name="datagrid" path="items" config="margin:22;button:clicked">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', width: 200 },
			{ name: 'price', text: 'Price', align: 1, alignfilter: 1 },
			{ name: 'published', text: 'Public', align: 1, options: [{ name: 'yes', id: true }, { name: 'no', id: false }], type: 'boolean' },
			{ name: 'description', text: 'Description', filter: 'Search in description' },
			{ name: 'created', text: 'Created', template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignfilter: 2, alignheader: 2 },
			{ type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }
		]
	</script>
</ui-component>

<script>

	var items = [];
	for (var i = 1; i < 90; i++)
		items.push({ name: '{0} Lorem ipsum dolor'.format(i), published: i % 5 !== 0, description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: i + 100, created: new Date().add('-5 days') });

	function clicked(btnname, row, button, e) {
		console.log(btnname, row);
	}

</script>
```