j-Tree

Configuratie:

• first {Boolean} selecteert het eerste hout item, standaard: true (optional)
• exec {String} verplicht: een link naar een functie, deze functie wordt uitgevoerd wanneer de knop is geselecteerd in de boom
• autoreset {Boolean} herstelt de status wanneer de gegevensbron wordt gewijzigd (optional, default: false)
• selected {String} geselecteerde klasse (optional, standaard: selected)
• checked {String} Optie, een weg naar function(arr, component) Of de weg naar property
• checkednested {Boolean} optioneel, controleert alle gebogen items (default: true)
• upload {String} optioneel, een route naar function(item, files) (mogelijk draag & drop bestanden)
• dragdrop {String} optioneel, een route naar function(item, target_item, itemel, targetel) (mogelijk dragen en drop items)
• options {String} optioneel, een route naar function(item, el) maakt een kleine knop mogelijk voor een inline contextmenu voor elk item
• rename {String} optioneel, een weg naar function(item, newname, fn_accept(true))
• unselectexpand {Boolean} optioneel, kan unselect geselecteerd item wanneer de gebruiker klikt op het uitbreidbare item (default: false)
• reselect {Boolean} optioneel, beoordeelt exec opnieuw als de boom is verfrissend (default: false)
• selectexpand {Boolean} optioneel, mogelijk het toevoegen van de selected klasse aan uitbreidbare items (default: false)
• iconoptions {String} icon naar opties (default: ti ti-ellipsis-h)
• expanded {Boolean} breidt alle kinderen uit (default: false)
• NEW: contextmenu {String} optioneel, een route naar function(item, el) maakt de muis contextmenu mogelijk
• NEW: key {String} een waarde kan worden gebruikt als index in de onderstaande methoden (default: path)

De gegevensstructuur:

• Objecten Array
• Het object moet name:String en children:[another similar object] of children:null bevatten (met geen kinderen)
• Object item kan ..., icon: 'home' } bevatten, het kan een bestand icon wijzigen
• Object item kan ..., classname: 'css_custom_class' } bevatten, het voegt een CSS-klasse toe aan het element "Label"
• Object item kan ..., html: 'RAW_HTML' {String} renders HTML tags in plaats van name veld bevatten

Methoden:

• component.expand([index]) - uitbreidt de index of all (met geen gedefinieerde index) noden
• component.collapse([index]) - collapses index of all (met geen gedefinieerd index) noden
• component.clear() - reinigt een cache om de bron te verfrisseren
• component.select(index) - selecteert de knop
• component.unselect() - Onverkiezingsnode
• component.rename(index) - toont input voor naamvernieuwing (dit werkt met config.rename)

Goed om te weten:

Setter breidt automatisch elk object door een .$pointer eigenschap toe met een boomindex.

Gebruik het met <ui-component name="tree">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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