j-Tree

Configuración:

• first {Boolean} selecciona el primer elemento del árbol, predeterminado: true (opcional)
• exec {String} required: enlace a una función, esta función se ejecuta cuando se selecciona el nodo en el árbol
• autoreset {Boolean} restablece el estado cuando se cambia la fuente de datos (opcional, predeterminado: false)
• selected {String} clase seleccionada (opcional, predeterminado: selected)
• checked {String} opcional, una ruta a function(arr, component) o una ruta a property
• checkednested {Boolean} opcional, verifica todos los elementos anidados (predeterminado: true)
• upload {String} opcional, una ruta a function(item, files) (permite arrastrar y soltar archivos)
• dragdrop {String} opcional, una ruta a function(item, target_item, itemel, targetel) (permite arrastrar y soltar elementos)
• options {String} opcional, una ruta a function(item, el) habilita un pequeño botón para un menú contextual en línea para cada elemento
• rename {String} opcional, una ruta a function(item, newname, fn_accept(true))
• unselectexpand {Boolean} opcional, puede unselect seleccionar el elemento cuando el usuario hace clic en el elemento expandible (predeterminado: false)
• reselect {Boolean} opcional, evalúa exec nuevamente si se actualiza el árbol (predeterminado: false)
• selectexpand {Boolean} opcional, permite agregar la clase selected a elementos expandibles (predeterminado: false)
• Icono iconoptions {String} para opciones (predeterminado: ti ti-ellipsis-h)
• expanded {Boolean} expande todos los elementos secundarios (predeterminado: false)
• NUEVO: contextmenu {String} opcional, una ruta a function(item, el) habilita el menú contextual del mouse
• NUEVO: key {String} se puede utilizar un valor como index en los siguientes métodos (predeterminado: path)

Estructura de datos:

• Matriz de objetos
• El objeto debe contener name:String y children:[another similar object] o children:null (sin hijos)
• El elemento del objeto puede contener ..., icon: 'home' }, puede cambiar el icono de un archivo
• El elemento de objeto puede contener ..., classname: 'css_custom_class' }, agrega una clase CSS al elemento "etiqueta"
• El elemento de objeto puede contener ..., html: 'RAW_HTML' {String} representa etiquetas HTML en lugar del campo name

Métodos:

• component.expand([index]): expande los nodos index o all (sin index definido)
• component.collapse([index]): colapsa los nodos index o all (sin index definido)
• component.clear() - borra un caché para actualizar la fuente
• component.select(index) - selecciona el nodo
• component.unselect() - deselecciona el nodo
• component.rename(index) - muestra input para cambiar el nombre (funciona con config.rename)

Es bueno saberlo:

Setter extiende automáticamente cada objeto agregando la propiedad .$pointer con un índice de árbol.

Úselo con <ui-component name="tree">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

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