# j-TreeView

> Tento komponent je iba ukážkou beta verzie. Stále je vo výstavbe.

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

Tento komponent je iba ukážkou beta verzie. Stále je vo výstavbe.


__Konfigurácia__:

- `parent {String}` kontajner s pevnou výškou, môže byť `window`. Predvolená hodnota: Prvok `parent`.
- `visibleY {Boolean}` stále zobrazuje posúvač `Y` (predvolené: `true`)
- `movable {Boolean}` umožňuje presúvanie uzlov (predvolené: `true`)
- `cachexpand {Boolean}` si pamätá predchádzajúci stav (predvolené: `true`)
- `arrows {Boolean}` povoľuje šípky pre priečinky (predvolené: `true`)
- `expanded {Boolean}` rozbalí všetky uzly (predvolené: `false`)
- `autosort {Boolean}` triedi uzly podľa `item.sort` (ak existuje) alebo `item.name` (ak existuje), predvolené: `true`
- `margin {Number}` horný/dolný okraj spolu (predvolené: `0`)
- `marginxs {Number}` horný/dolný okraj spolu pre šírku obrazovky `xs`
- `marginsm` horný/dolný okraj spolu pre šírku obrazovky `sm`
- `marginmd` horný/dolný okraj spolu pre šírku obrazovky `md`
- `marginlg` horný/dolný okraj spolu pre šírku obrazovky `lg`
- `disabled {Boolean}` deaktivuje celý komponent
- Bude možné vybrať rodiča `parentselectable {Boolean}` (predvolené: `true`)

__Štruktúra údajov__:

- Pole objektov
- Objekt musí obsahovať `id:String`, čo je hlavné ID každej položky
- Objekt musí obsahovať `name:String` a `children:[another similar object]` alebo `children:null` (bez detí)
- Objekt musí obsahovať `html:String` sa vykreslí ako obsah (ak neexistuje, vykreslí sa `name`)
- Položka objektu môže obsahovať `..., classname: 'css_custom_class' }`, pridáva triedu CSS do prvku "label"
- Položka objektu podporuje vlastnosť `actions: { expand: true, drop: true, move: true }`

Použite ho so `<ui-component name="treeview">`. 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
<div style="width:300px;height:200px;border:1px solid #E0E0E0;margin:50px">
	<ui-component name="treeview" path="nodes" config="exec:fn_selected"></ui-component>
</div>

<script>
	var nodes = [];
	nodes.push({ id: '1', name: 'Item 1', html: '<b>Item 1</b>', children: null });
	nodes.push({ id: '2', name: 'Item 2', children: null });
	nodes.push({ id: '3', name: 'Item 3', children: [{ id: 'A', name: 'SubItem 3 / 1', children: [{ id: 'AA', name: 'SubItem 3 / 1 / 1', children: null }]}]});
	nodes.push({ id: '4', name: 'Item 4', children: null });
	nodes.push({ id: '5', name: 'Item 5', children: [{ id: 'B', name: 'Subitem 5 / 1', children: null }, { name: 'Subitem 5 / 2', children: [{ id: 'BB', name: 'Subitem 5 / 2 / 1', children: [{ id: 'BC', name: 'Subitem 5 / 2 / 1 / 1', children: null }]}] }, { id: 'BD', name: 'Subitem 5 / 3', children: null }]});

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

</script>
```