j-Tree

Konfigurera:

• first {Boolean} väljer första trädet, standard: true (alternativ)
• exec {String} required: länk till en funktion, denna funktion utförs när noden är markerad i trädet
• autoreset {Boolean} återställer tillståndet när datakällan ändras (alternativt, standard: false)
• selected {String} valda klass (alternativ, standard: selected)
• checked {String} är valfritt, en väg till function(arr, component) eller vägen till property
• checkednested {Boolean} är valfritt, kontrollerar alla nycklade objekt (default: true)
• upload {String} valfritt, en väg till function(item, files) (tillåter drag & drop filer)
• dragdrop {String} valfritt, en väg till function(item, target_item, itemel, targetel) (tillåter drag & drop objekt)
• options {String} valfritt, en väg till function(item, el) möjliggör en liten knapp för en inline-kontextmeny för varje objekt
• rename {String} alternativ, en väg till function(item, newname, fn_accept(true))
• unselectexpand {Boolean} är valfritt, kan unselect markeras när användaren klickar på det expanderbara objektet (default: false)
• reselect {Boolean} är valfritt, utvärderar exec igen om trädet är uppfrisknat (default: false)
• selectexpand {Boolean} alternativ, möjliggör tillägg av selected klass till utvidgningsbara objekt (default: false)
• iconoptions {String}-ikon till alternativ (default: ti ti-ellipsis-h)
• expanded {Boolean} expanderar alla barn (default: false)
• NEW: contextmenu {String} valfritt, en väg till function(item, el) möjliggör muskontextmenyn
• NEW: key {String} ett värde kan användas som index i nedanstående metoder (default: path)

Datastruktur:

• Objekt Array
• Objektet måste innehålla name:String och children:[another similar object] eller children:null (med inga barn)
• Objektet kan innehålla ..., icon: 'home' }, det kan ändra en filikon
• Objektet kan innehålla ..., classname: 'css_custom_class' }, det lägger till en CSS-klass på elementet "label"
• Objekt objekt kan innehålla ..., html: 'RAW_HTML' {String} renderer HTML-taggar istället för name fält

Metoder:

• component.expand([index]) - expanderar index eller all (med ingen definierad index) noder
• component.collapse([index]) - kollapsar index eller all (med ingen definierad index) noder
• component.clear() - rengör en cache för att uppfriska källan
• component.select(index) - Välj nötter
• component.unselect() - Oselekt noder
• component.rename(index) - visar input för namnrenamn (det fungerar med config.rename)

Bra att veta:

Setter utvidgar automatiskt varje objekt genom att lägga till .$pointer-egenskapen med en trädindex.

Använd den med <ui-component name="tree">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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