j-TreeView

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

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

Configuração:

parent {String} Um recipiente com altura fixa pode ser windowValor 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.

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>