# j-Tree

> Setter automaticky rozšiřuje každý objekt tím, že přidá .$pointer vlastnost s indexem stromu.

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

__Konfigurace__:

- `first {Boolean}` vybírá první stromový položka, dle předvolby: `true` (opční)
- `exec {String}` __potřebné__: odkaz na funkci, tato funkce se provádí, když je nůž vybrán v stromu
- `autoreset {Boolean}` obnovuje stav, když se zdroj údajů mění (volitelně: `false`)
- Vybraná třída `selected {String}` (volitelná, výchozí: `selected`)
- `checked {String}` Volitelně, cesta k `function(arr, component)` Nebo cesta k `property`
- `checkednested {Boolean}` volitelně, kontroluje všechny nektované položky (předvolené: `true`)
- `upload {String}` volitelně, cesta k `function(item, files)` (používejte přepínání a spuštění souborů)
- `dragdrop {String}` volitelně, cesta k `function(item, target_item, itemel, targetel)` (používejte drahý a drop položky)
- `options {String}` volitelně, cesta k `function(item, el)` umožňuje malý tlačítko pro vnitřní kontextový menu pro každý položku
- `rename {String}` volitelný, cesta k `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` je volitelný, může být položka `unselect` vybrána, když uživatel klikne na rozšířitelnou položku (default: `false`)
- `reselect {Boolean}` volitelně, hodnocení `exec` znovu, pokud je strom osvěžován (podmínkou: `false`)
- `selectexpand {Boolean}` volitelně, umožňuje přidání třídy `selected` k rozšířitelným položkám (podmínkou: `false`)
- `iconoptions {String}` ikona pro možnosti (předvolené: `ti ti-ellipsis-h`)
- `expanded {Boolean}` rozšiřuje všechny děti (předvolené: `false`)
- __NEW__: `contextmenu {String}` volitelný, cesta k `function(item, el)` umožňuje kontextový menu myši
- __NEW__: hodnotu `key {String}` lze použít jako `index` v následujících metodách (předvolený: `path`)

__Struktura dat__:

- Objektová aréna
- Objekt musí obsahovat `name:String` a `children:[another similar object]` nebo `children:null` (s dětmi)
- Objekt může obsahovat `..., icon: 'home' }`, může změnit souborovou ikonu
- Objekt může obsahovat `..., classname: 'css_custom_class' }`, přidává třídu CSS na prvek "label"
- Předmět může obsahovat `..., html: 'RAW_HTML'` {String} renderer HTML značky namísto pole `name`

__Metody__:

- `component.expand([index])` - rozšiřuje uzly `index` nebo `all` (s žádným definovaným uzlem `index`)
- `component.collapse([index])` - kolapsy `index` nebo `all` (s žádné definované `index`) uzly
- `component.clear()` - vyčistí cache pro osvěžení zdroje
- `component.select(index)` - vyberte nůž
- `component.unselect()` - nezvolený nůž
- `component.rename(index)` - zobrazuje `input` pro přejmenování jména (pracuje s `config.rename`)

__Dobré vědět__:

Setter automaticky rozšiřuje každý objekt přidáním vlastnosti `.$pointer` s indexem stromu.

Použijte ji s `<ui-component name="tree">`Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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