j-TreeView

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Este componente es sólo una vista previa beta. Todavía está en construcción.

Configuración:

parent {String} un contenedor con altura fija, puede ser window. Valor predeterminado: elemento parent.
visibleY {Boolean} todavía muestra la barra de desplazamiento Y (predeterminado: true)
movable {Boolean} permite el movimiento de nodos (predeterminado: true)
cachexpand {Boolean} recuerda el estado anterior (predeterminado: true)
arrows {Boolean} habilita flechas para carpetas (predeterminado: true)
expanded {Boolean} expande todos los nodos (predeterminado: false)
autosort {Boolean} ordena los nodos según item.sort (si existe) o item.name (si existe), predeterminado: true
margin {Number} margen superior/inferior juntos (predeterminado: 0)
marginxs {Number} margen superior/inferior juntos para el ancho de pantalla xs
marginsm margen superior/inferior juntos para el ancho de pantalla sm
marginmd margen superior/inferior juntos para el ancho de pantalla md
marginlg margen superior/inferior juntos para el ancho de pantalla lg
disabled {Boolean} desactiva todo el componente
Se podrá seleccionar el padre parentselectable {Boolean} (predeterminado: true)

Estructura de datos:

Matriz de objetos
El objeto debe contener id:String, que es el ID principal de cada elemento.
El objeto debe contener name:String y children:[another similar object] o children:null (sin hijos)
El objeto debe contener html:String y se representa como contenido (si no existe, se representa name)
El elemento de objeto puede contener ..., classname: 'css_custom_class' }, agrega una clase CSS al elemento "etiqueta"
El elemento del objeto admite la propiedad actions: { expand: true, drop: true, move: true }

Úselo con <ui-component name="treeview">. 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.

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>