j-Tree

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

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