# j-Tree

> Setter automatycznie rozszerza każdy obiekt poprzez dodanie właściwości .$ pointer z indeksem drzewa.

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

__Konfiguracja__:

- `first {Boolean}` wybiera pierwszą pozycję drzewa, wstępnie: `true` (opcjonalnie)
- `exec {String}` __wymagany__: link do funkcji, ta funkcja jest wykonywana, gdy w drzewie jest wybrany przycisk
- Po zmianie źródła danych `autoreset {Boolean}` ponownie określa stan (opcjonalny, domyślny: `false`)
- Klasa wyboru `selected {String}` (opcjonalna, domyślna: `selected`)
- `checked {String}` opcjonalny, ścieżka do `function(arr, component)` lub ścieża do `property`
- `checkednested {Boolean}` opcjonalny, sprawdza wszystkie składniki (default: `true`)
- `upload {String}` opcjonalny, ścieżka do `function(item, files)` (można wyciągnąć i spuścić pliki)
- `dragdrop {String}` opcjonalny, ścieżka do `function(item, target_item, itemel, targetel)` (umożliwia wyciągnięcie i spadek elementów)
- `options {String}` opcjonalny, ścieżka do `function(item, el)` umożliwia mały przycisk dla menu kontekstu w linii dla każdego elementu
- `rename {String}` opcjonalny, droga do `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` opcjonalny, może `unselect` wybrane elementy, gdy użytkownik kliknie na rozszerzający się element (default: `false`)
- `reselect {Boolean}` opcjonalny, ocenia `exec` ponownie, jeśli drzewo jest odświeżone (default: `false`)
- Opcjonalny `selectexpand {Boolean}`, umożliwia dodanie klasy `selected` do elementów rozszerzających (default: `false`)
- Ikonę `iconoptions {String}` do opcji (default: `ti ti-ellipsis-h`)
- `expanded {Boolean}` rozszerza wszystkie dzieci (default: `false`)
- __NEW__: `contextmenu {String}` opcjonalny, droga do `function(item, el)` umożliwia menu kontekstu myszy
- __NEW__: wartość `key {String}` może być używana jako `index` w poniższych metodach (default: `path`)

__Struktura danych__:

- Obiekt Array
- Obiekt musi zawierać `name:String` i `children:[another similar object]` lub `children:null` (bez dzieci)
- Obiekt może zawierać `..., icon: 'home' }`, może zmienić ikonę pliku
- Element obiektu może zawierać `..., classname: 'css_custom_class' }`, dodaje klasę CSS do elementu "label"
- Obiekt może zawierać etykiety `..., html: 'RAW_HTML'` {String} HTML zamiast pola `name`

__Metody__:

- `component.expand([index])` - rozszerza węzły `index` lub `all` (bez definicji `index`)
- `component.collapse([index])` - kolapsy `index` lub `all` (z żadną definicją) `index`i nody
- `component.clear()` - oczyszcza cache do odświeżania źródła
- `component.select(index)` - wybieranie nodu
- `component.unselect()` - niewybrana węzła
- `component.rename(index)` - wyświetla `input` dla renamingów nazw (pracuje z `config.rename`)

__Dobrze wiedzieć__:

Setter automatycznie rozszerza każdy obiekt poprzez dodanie właściwości `.$pointer` z indeksem drzewa.

Użyj go z `<ui-component name="tree">`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
<style>
	.ui-tree { border: 1px solid #E0E0E0; }
	.ui-dark .ui-tree { border: 1px solid #404040; }
</style>

<div class="container">
	<div class="col-md-6">
		<div>Open Web Developer Console</div>
		<br />
		<ui-component name="tree" path="nodes" config="exec:fn_selected;checked:fn_checked"></ui-component>
	</div>
</div>

<script>
	var nodes = [];
	nodes.push({ name: 'Item 1', children: null });
	nodes.push({ name: 'Item 2', children: null });
	nodes.push({ name: 'Item 3', children: [{ name: 'SubItem 3 / 1', children: [{ name: 'SubItem 3 / 1 / 1', children: null }]}]});
	nodes.push({ name: 'Item 4', children: null });
	nodes.push({ name: 'Item 5', children: [{ name: 'Subitem 5 / 1', children: null }, { name: 'Subitem 5 / 2', children: [{ name: 'Subitem 5 / 2 / 1', children: [{ name: 'Subitem 5 / 2 / 1 / 1', children: null }]}] }, { name: 'Subitem 5 / 3', children: null }]});

	function fn_selected(node, isGroup, expanded) {
		console.log('SELECTED NODE:', node, isGroup, expanded);
	}

	function fn_checked(checked) {
		console.log('CHECKED', checked);
	}

</script>
```