j-Tree

Konfiguration:

• first {Boolean} wählt das erste Baum, Standard: true (optional)
• exec {String} bedarf: Link zu einer Funktion, diese Funktion wird ausgeführt, wenn die Node im Baum ausgewählt ist
• autoreset {Boolean} nimmt den Zustand zurück, wenn die Datenquelle geändert wird (optional, Standard: false)
• selected {String} ausgewählte Klasse (optional, Standard: selected)
• checked {String} optionale, eine Route nach function(arr, component) oder eine Rate nach property
• checkednested {Boolean} optionale, überprüft alle Nested Artikel (Default: true)
• upload {String} optionale, eine Route nach function(item, files) (erlaubt die Entfernung und Abfuhrdateien)
• dragdrop {String} optionale, eine Strecke nach function(item, target_item, itemel, targetel) (erlaubt Drachen und Abfällen)
• options {String} optionale, eine Route nach function(item, el) ermöglicht einen kleinen Button für ein Inline-Kontextmenü für jedes Element
• rename {String} optional, ein Pfad zu function(item, newname, fn_accept(true))
• unselectexpand {Boolean} optionale, kann unselect ausgewähltes Element, wenn der Benutzer auf das erweiterbare Element klickt (Default: false)
• reselect {Boolean} optionale, beurteilt exec erneut, wenn das Baum erfrischt wird (Default: false)
• selectexpand {Boolean} optionale, ermöglicht die Ergänzung der selected Klasse zu erweiterbaren Elementen (Default: false)
• iconoptions {String}-Ikon für Optionen (Default: ti ti-ellipsis-h)
• expanded {Boolean} erweitert alle Kinder (Default: false)
• NEW: contextmenu {String} optionale, eine Route zum function(item, el) ermöglicht den Kontextmenü
• NEW: key {String} kann als index in den folgenden Methoden verwendet werden (Default: path)

Datenstruktur:

• Objekt Array
• Objekt muss name:String und children:[another similar object] oder children:null enthalten (mit keinem Kind)
• Objekt kann ..., icon: 'home' } enthalten, es kann eine Datei-Ikon ändern
• Das Objekt kann ..., classname: 'css_custom_class' } enthalten, es fügt einen CSS-Klasse auf das Element "Label" hinzu
• Objekt kann ..., html: 'RAW_HTML' {String} Render HTML-Tags statt name Feld enthalten

Methoden:

• component.expand([index]) - erweitert index oder all (mit kein definierter index) Knoten
• component.collapse([index]) - Kollaps index oder all (mit kein definierter index) Knoten
• component.clear() - reinigt eine Cache für die Erfrischung der Quelle
• component.select(index) - Node auswählen
• component.unselect() - Unselekt Node
• component.rename(index) - zeigt input für den Namen (es funktioniert mit config.rename)

Gut zu wissen:

Setter erweitert automatisch jedes Objekt, indem es eine .$pointer Eigenschaft mit einem Baumindex hinzufügt.

Verwenden Sie es mit <ui-component name="tree">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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