# j-Tree

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: bc576a38b8063470bdc48a251cab283947d59fc0aeb7404120fca7ab2e2cff44
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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

```html example.html
<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>
```