# j-DataTable

> BETA: Ten element jest ukierunkowany na listę SPA i serwera.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pl
Content-SHA256: 709d0c588e7d09ad5c44be48967c7cbca585316b576ccd5c9e9cfd6d5853bca8
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__BETA__: Ten element jest ukierunkowany na SPA i listę stron serwera.

- Wsparcie strony
- Potrzebny system `bootstrap`
- Wsparcie dla sortowania
- wspiera pionowe / horyzontalne skręcanie
- Odpowiedź
- Wsparcie - mody ciemne

_Data-source_ musi zawierać:

```js
{
	cols: [{ name: 'id', ... }], // optional, can be defined inline in HTML
    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
}
```

__Konfiguracja__:

- 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 `NUMBER` Wysokość lub `selector` dla jQuery.closest()
- __NEW__ `minheight {Number}` minimalna wysokość siatki, działa z wysokością `fluid` i `auto` (default: `300`)
- __NEW__ wybór `parent {String}` dla opcji wysokości `auto` (default: `window`)
- `margin {Number}` - najwyższa marża wysokości (opcjonalna, domyślna: `0`)
- `click {String}` link do `function(row, grid, row_el)`, jest wykonywany, jeśli użytkownik kliknie kolejkę
- `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`
- `exec {String}` link do `function(type, page, sort)` 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
- `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`)
- `colwidth {Number}` wstępna szerokość dla kolumn (wstępna: `150`)
- `editable {String}` link do `function(opt)` kiedy użytkownik wykonuje edycję
- `contextmenu {String}` link do `function(e, grid)` kiedy użytkownik podnosi menu kontekstu

__Kolumna właściwości__:

- `name {String}` - nazwa pola w kolejce obiektu
- `text {String}` etykietę kolumny, tekst z `.fa fa-home` będzie FontAwesome ikona
- `width {Number}` szerokość kolumny (opcjonalna, domyślna `config.colwidth`)
- `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
- `sort {Boolean}` umożliwia sortowanie (opcjonalne, domyślne: `false`)
- `format {String/Number}` może być używany do daty i liczby (liczba dziesięcioleci) pola (opcjonalne), na przykład `dd.MM.yyyy`
- `currency {String}` formatera waluty, po prostu dodać walutę
- `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ą)
- `type {String}` opcjonalny, może zawierać typ danych (`boolean`, `date` lub `number`) dla pola
- `editable {Boolean}` umożliwia edycję

__Metody__:

- `component.redrawrow(row_object/index)` 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.rebind(columnsdeclaration)` metodą odzwierciedla schemat
- __NEW__: `component.reload()` wykonuje `config.exec` z bieżącym filtrem i sortowaniem
- __NEW__: `component.empty()` empties wszystkie rzędy

__Dobrze wiedzieć__:

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

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

Użyj go z `<ui-component name="datatable">`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
<div style="width:500px;height:400px">
	<ui-component name="datatable" path="data" config="highlight:1;exec:paginate;editable:editable;checked:checked;margin:22">
		<script type="text/html">
			[
				{ name: 'name', text: 'Opportunity name', width: 200, sort: 1, editable: 1 },
				{ name: 'value', text: 'Value', width: 100, sort: 1, type: 'number', format: 2 },
				{ name: 'status', text: 'Status', width: 100, editable: 1 },
				{ name: 'owner', text: 'Owner', width: 200 },
				{ name: 'newsletter', text: 'Newsletter', width: 100, type: 'boolean' },
				{ name: 'date', text: 'Date', width: 200, sort: 1, type: 'date', format: 'yyyy-MM-dd' }
			]
		</script>
	</ui-component>
</div>

<script>

	function checked(rows) {
		console.log(rows);
	}

	function editable(opt) {
		// opt.row
		// opt.col
		// opt.value
		// opt.next(NEW_VALUE);
		opt.next(opt.value + ' (modified)');
	}

	function paginate(type, page, sort) {
		console.log('Page:', page, 'sort:', sort);
	}

		var data = {};

		data.items = [];
		data.pages = 53;
		data.page = 3;

		// data.cols.push({ name: 'name', text: 'Opportunity name', width: 200, sort: true });
		// data.cols.push({ name: 'value', text: 'Value', width: 100, sort: true });
		// data.cols.push({ name: 'status', text: 'Status', width: 100 });
		// data.cols.push({ name: 'owner', text: 'Owner', width: 200 });
		// data.cols.push({ name: 'date', text: 'Date', width: 200, sort: true });

		for (var i = 0; i < 50; i++)
			data.items.push({ name: GUID(20), value: Math.random() * 1000 >> 0, status: GUID(10), owner: 'Peter Širka', newsletter: i % 3 === 0, date: NOW });
</script>
```