j-TreeView

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

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.

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>