j-TreeView

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Tato složka je pouze beta předpověď. je stále v stavbě.

Konfigurace:

parent {String} Kontejner s pevnou výškou může být windowPodmínkou hodnoty: parent a prvků.
visibleY {Boolean} Stále ukazuje Y Skládací bar (default) true)
movable {Boolean} umožňuje pohyb uzlin (předvolené: true)
cachexpand {Boolean} připomíná předchozí stav (předvolený: true)
arrows {Boolean} umožňuje šípky pro složky (default: true)
expanded {Boolean} rozšiřuje všechny uzly (předvolené: false)
autosort {Boolean} Druhy uzlin podle item.sort (pokud existuje) nebo item.name (pokud existuje) v případě, že se true
margin {Number} horní / dolní marže spolu (default: 0)
marginxs {Number} top/bottom margin pro šířku obrazovky xs
marginsm top/bottom margin pro šířku obrazovky sm
marginmd top/bottom margin pro šířku obrazovky md
marginlg top/bottom margin pro šířku obrazovky lg
disabled {Boolean} znemožňuje celou složku
Rodiče parentselectable {Boolean} budou volitelné (předvolené: true)

Struktura dat:

Objektová aréna
Objekt musí obsahovat id:String, což je hlavní ID každého položky
Objekt musí obsahovat name:String a children:[another similar object] nebo children:null (s dětmi)
Objekt musí obsahovat html:String je renderován jako obsah (pokud neexistuje, pak je renderovaný name)
Objekt může obsahovat ..., classname: 'css_custom_class' }, přidává třídu CSS na prvek "label"
Předmět podporuje vlastnictví actions: { expand: true, drop: true, move: true }

Použijte ji s <ui-component name="treeview">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.

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>