O componente permite visualizar os dados em formato hierárquico de uma tabela com autorrelacionamento de um para muitos, por exemplo um chefe-funcionário ou capitão-tripulante. Além da visualização, ele também permite filtrar ao selecionar um ramo dessa árvore, obter a chave ou objeto do item selecionado para realizar alguma ação e carregar somente quando o mesmo for expandido.
Animação 1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome
Propriedade
Função
Configuração
options
Abre uma janela para personalização do componente.
Valor
ng-model
Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.
Identificador
id
Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
Exibir
ng-show
Propriedade AngularJS usada para exibir ou oculta o componente.
Repetir
crn-repeat
Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança
cronapp-security
Abre a janela de seleção dos grupos com permissões para visualização ou edição.
Classes CSS
class
Adiciona classes CSS que já foram criadas.
Configuração
Através da janela Configuração é possível personalizar o componente Árvore (Figura 2).
Figura 2 - Janela de configuração do componente
Fonte de dados: seleciona ou cria uma fonte de dados para alimentar o componente;
"+": adiciona uma fonte de dados.
"...": configura a fonte de dados selecionada.
Campo de texto: seleciona o campo da fonte de dados que será exibido no componente para o usuário;
Campo de auto relacionamento: seleciona o campo da fonte de dados que define o autorrelacionamento da entidade;
Obter valor do campo como: define como o valor será retornado, podendo ser:
Chave: essa opção faz com que somente o ID seja retornado;
Objeto: essa opção faz com que os dados do objeto sejam retornados.