j-Tree

Configurarea:

• first {Boolean} selectează primul element din lemn, în mod implicit: true (opțional)
• exec {String} required: legătura cu o funcție, această funcție este executată atunci când nodul este selectat în copac
• autoreset {Boolean} reîntoarce starea atunci când sursa de date este schimbată (opțional, standard: false)
• Clasa selectată selected {String} (opțional, standard: selected)
• checked {String} opțional, o cale la function(arr, component) sau o cale spre property
• checkednested {Boolean} opțional, verifică toate elementele nestate (default: true)
• upload {String} opțional, o cale la function(item, files) (permiteți să vă retrageți și să aruncați fișiere)
• dragdrop {String} opțional, o cale către function(item, target_item, itemel, targetel) (permite obiecte de retragere și descărcare)
• options {String} opțional, o cale la function(item, el) permite un mic buton pentru un meni de context inline pentru fiecare element
• rename {String} opțional, o cale către function(item, newname, fn_accept(true))
• unselectexpand {Boolean} opțional, poate fi selectat elementul unselect atunci când utilizatorul face clic pe elementul extins (default: false)
• reselect {Boolean} opțional, evaluează din nou exec dacă copacul este refrescat (default: false)
• selectexpand {Boolean} opțional, permite adăugarea clasei selected la elemente extinse (default: false)
• Iconul iconoptions {String} la opțiuni (default: ti ti-ellipsis-h)
• expanded {Boolean} extinde toate copiii (default: false)
• NEW: contextmenu {String} opțional, o cale la function(item, el) permite meniul de context al mouse-ului
• NEW: key {String} o valoare poate fi utilizată ca index în metodele de mai jos (default: path)

Structura datelor:

• Obiectivul Array
• Obiectul trebuie să conțină name:String și children:[another similar object] sau children:null (cu copii)
• Obiectul poate conține ..., icon: 'home' }, poate schimba un icon de fișier
• Obiectul poate conține ..., classname: 'css_custom_class' }, adăuga o clasă CSS la elementul "label"
• Obiectul poate conține ..., html: 'RAW_HTML' {String} render HTML tags în loc de name câmpuri

Metode:

• component.expand([index]) - extindere index sau all (cu nici o definiţie indexnoduri
• component.collapse([index]) - colapsuri index sau all (cu nici o definiţie indexnoduri
• component.clear() - curăță un cache pentru refrescă sursă
• component.select(index) - selectați nodul
• component.unselect() - nodul neîndeplinit
• component.rename(index) - afișează input pentru renumirea numelui (funcționează cu config.rename)

bine să știi:

Setter extinde automat fiecare obiect prin adăugarea proprietății .$pointer cu un index al copacului.

Utilizați-l cu <ui-component name="tree">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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