# j-TreeView

> Este componente é apenas uma pré-visão beta. ainda está em construção.

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

Este componente é apenas uma pré-visão beta. ainda está em construção.


__Configuração__:

- `parent {String}` Um recipiente com altura fixa pode ser `window`Valor defeituoso: `parent` O elemento.
- `visibleY {Boolean}` ainda mostra a barra de rolamento `Y` (default: `true`)
- `movable {Boolean}` permite o movimento dos nódulos (default: `true`)
- `cachexpand {Boolean}` lembra o estado anterior (default: `true`)
- `arrows {Boolean}` permite armadilhas para folhetos (default: `true`)
- `expanded {Boolean}` expande todos os nódulos (default: `false`)
- Node tipo `autosort {Boolean}` de acordo com `item.sort` (se existe) ou `item.name` (se existem), padrão: `true`
- Margem superior/baixo de `margin {Number}` (default: `0`)
- `marginxs {Number}` A margem superior/bottom para `xs` tela width
- `marginsm` A margem superior/bottom para `sm` tela width
- `marginmd` A margem superior/bottom para `md` tela width
- `marginlg` A margem superior/bottom para `lg` tela width
- `disabled {Boolean}` desabilita todo o componente
- `parentselectable {Boolean}` será selecionável (default: `true`)

__Estrutura de dados__:

- Objeto Array
- O objeto deve conter `id:String` que é o ID principal de cada item.
- Objeto deve conter `name:String` e `children:[another similar object]` ou `children:null` (sem crianças)
- Objeto deve conter `html:String` é renderizado como conteúdo (se não existe, então `name` é renderado)
- Objeto item pode conter `..., classname: 'css_custom_class' }`, ele adiciona uma classe CSS para o elemento "label"
- Objeto suporte propriedade `actions: { expand: true, drop: true, move: true }`

Use-o com `<ui-component name="treeview">`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
<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>
```