# j-Tree

> O Setter estende automaticamente cada objeto, adicionando uma propriedade de .$pointer com um índice de árvore.

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

__Configuração__:

- `first {Boolean}` seleciona o primeiro item de árvore, padrão: `true` (opcional)
- `exec {String}` __required__: ligação a uma função, esta função é executada quando o nodo é selecionado na árvore
- `autoreset {Boolean}` retoma o estado quando a fonte de dados é alterada (opcional, padrão: `false`)
- Clase selecionada de `selected {String}` (opcional, padrão: `selected`)
- `checked {String}` Opcional, um caminho para `function(arr, component)` Ou o caminho para `property`
- `checkednested {Boolean}` opcional, verifica todos os itens nestos (default: `true`)
- `upload {String}` opcional, um caminho para `function(item, files)` (permite arquivos de retorno e desligamento)
- `dragdrop {String}` opcional, uma estrada para `function(item, target_item, itemel, targetel)` (autoriza os itens de tração e desligamento)
- `options {String}` opcional, um caminho para `function(item, el)` permite um pequeno botão para um menu de contexto inline para cada item
- `rename {String}` opcional, um caminho para `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` opcional, pode `unselect` item selecionado quando o usuário clique no item expandível (default: `false`)
- `reselect {Boolean}` opcional, avalia novamente o `exec` se a árvore for refrescada (default: `false`)
- `selectexpand {Boolean}` opcional, permite adicionar a classe `selected` aos itens expandíveis (default: `false`)
- Icon `iconoptions {String}` para opções (default: `ti ti-ellipsis-h`)
- `expanded {Boolean}` expande todas as crianças (default: `false`)
- __NEW__: `contextmenu {String}` opcional, um caminho para `function(item, el)` permite o menu de contexto do mouse
- __NEW__: `key {String}` um valor pode ser usado como `index` nos métodos abaixo (default: `path`)

__Estrutura de dados__:

- Objeto Array
- Objeto deve conter `name:String` e `children:[another similar object]` ou `children:null` (sem crianças)
- Objeto item pode conter `..., icon: 'home' }`, ele pode alterar um ícone de arquivo
- Objeto item pode conter `..., classname: 'css_custom_class' }`, ele adiciona uma classe CSS para o elemento "label"
- Objeto item pode conter `..., html: 'RAW_HTML'` {String} renderers tags HTML em vez de campo `name`

__Métodos__:

- `component.expand([index])` - Expansão `index` ou `all` (Não é definido `index`Os nodos
- `component.collapse([index])` - colapso de nódulos `index` ou `all` (sem `index`)
- `component.clear()` - limpa um cache para refrescar a fonte
- `component.select(index)` - seleção de nodo
- `component.unselect()` - Node não selecionado
- `component.rename(index)` - exibe `input` para renomeamento de nome (funciona com `config.rename`)

__Bom para saber__:

O Setter estende automaticamente cada objeto adicionando uma propriedade de `.$pointer` com um índice de árvore.

Use-o com `<ui-component name="tree">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>
```