# j-Tree

> Setter automaticky rozšíri každý objekt pridaním vlastnosti .$pointer so stromovým indexom.

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

__Konfigurácia__:

- `first {Boolean}` vyberie prvú položku stromu, predvolená hodnota: `true` (voliteľné)
- `exec {String}` __required__: prepojenie na funkciu, táto funkcia sa vykoná, keď je v strome vybraný uzol
- `autoreset {Boolean}` resetuje stav pri zmene zdroja údajov (voliteľné, predvolené: `false`)
- `selected {String}` vybratá trieda (voliteľné, predvolené: `selected`)
- `checked {String}` voliteľné, cesta k `function(arr, component)` alebo cesta k `property`
- `checkednested {Boolean}` voliteľné, kontroluje všetky vnorené položky (predvolené: `true`)
- `upload {String}` voliteľné, cesta k `function(item, files)` (umožňuje drag & drop súbory)
- `dragdrop {String}` voliteľné, cesta k `function(item, target_item, itemel, targetel)` (umožňuje presúvať položky)
- `options {String}` voliteľné, cesta k `function(item, el)` umožňuje malé tlačidlo pre kontextové menu pre každú položku
- `rename {String}` voliteľné, cesta k `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` voliteľné, môže `unselect` vybratú položku, keď používateľ klikne na rozbaliteľnú položku (predvolené: `false`)
- `reselect {Boolean}` voliteľné, pri obnovení stromu sa znova vyhodnotí `exec` (predvolené: `false`)
- `selectexpand {Boolean}` voliteľné, umožňuje pridanie triedy `selected` k rozšíriteľným položkám (predvolené: `false`)
- Ikona `iconoptions {String}` na možnosti (predvolené: `ti ti-ellipsis-h`)
- `expanded {Boolean}` rozbalí všetky deti (predvolené: `false`)
- __NEW__: `contextmenu {String}` voliteľné, cesta k `function(item, el)` umožňuje kontextovú ponuku myši
- __NEW__: `key {String}` hodnotu možno použiť ako `index` v nižšie uvedených metódach (predvolené: `path`)

__Štruktúra údajov__:

- Pole objektov
- Objekt musí obsahovať `name:String` a `children:[another similar object]` alebo `children:null` (bez detí)
- Položka objektu môže obsahovať `..., icon: 'home' }`, môže zmeniť ikonu súboru
- Položka objektu môže obsahovať `..., classname: 'css_custom_class' }`, pridáva triedu CSS do prvku "label"
- Položka objektu môže obsahovať `..., html: 'RAW_HTML'` {String} vykresľuje značky HTML namiesto poľa `name`

__Metódy__:

- `component.expand([index])` - rozširuje uzly `index` alebo `all` (bez definovaného `index`)
- `component.collapse([index])` - zrúti uzly `index` alebo `all` (bez definovaného `index`)
- `component.clear()` - vymaže vyrovnávaciu pamäť pre obnovenie zdroja
- `component.select(index)` - vyberie uzol
- `component.unselect()` - zruší výber uzla
- `component.rename(index)` - zobrazuje `input` na premenovanie mena (funguje so `config.rename`)

__Je dobré vedieť__:

Setter automaticky rozšíri každý objekt pridaním vlastnosti `.$pointer` so stromovým indexom.

Použite ho so `<ui-component name="tree">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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>
```