j-Tree

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.

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