j-TreeView

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Bei dieser Komponente handelt es sich lediglich um eine Beta-Vorschau. Es ist noch im Aufbau.

Konfiguration:

parent {String} ein Container mit fester Höhe, kann window sein. Standardwert: parent-Element.
visibleY {Boolean} zeigt weiterhin die Bildlaufleiste Y an (Standard: true)
movable {Boolean} ermöglicht die Bewegung von Knoten (Default: true)
cachexpand {Boolean} erinnert an den vorherigen Zustand (Default: true)
arrows {Boolean} ermöglicht Fächer für Ordner (Default: true)
expanded {Boolean} erweitert alle Knoten (Default: false)
autosort {Boolean}-Sorten Noten nach item.sort (wenn vorhanden) oder item.name (wenn bestehen), Standard: true
margin {Number} oberer/unterer Rand zusammen (Standard: 0)
marginxs {Number} oberer/unterer Rand zusammen für xs Bildschirmbreite
marginsm oberer/unterer Rand zusammen für sm Bildschirmbreite
marginmd oberer/unterer Rand zusammen für md Bildschirmbreite
marginlg oberer/unterer Rand zusammen für lg Bildschirmbreite
disabled {Boolean} deaktiviert die gesamte Komponente
parentselectable {Boolean} wird ausgewählbar sein (Default: true)

Datenstruktur:

Objekt Array
Das Objekt muss id:String enthalten, das die Haupt-ID jedes Elementes ist
Objekt muss name:String und children:[another similar object] oder children:null enthalten (mit keinem Kind)
Objekt muss html:String enthalten, wird als Inhalt renderiert (wenn es nicht existiert, dann wird name renderiert)
Das Objekt kann ..., classname: 'css_custom_class' } enthalten, es fügt einen CSS-Klasse auf das Element "Label" hinzu
Objekte unterstützen Eigentum actions: { expand: true, drop: true, move: true }

Verwenden Sie es mit <ui-component name="treeview">. 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.

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>