Este post foi editado pela última vez por szxiaxiaojun em 2019-7-11 às 23:20
No desenvolvimento diário de projetos web, frequentemente encontramos a exibição de dados de estrutura em árvore, que são obtidos do banco de dados e exibidos em formato de árvore. Para conveniência, podemos escrever um controle de árvore entre navegadores para JavaScript que poderá ser reutilizado no futuro. Esta seção compartilha um plugin de árvore JS desenvolvido por ele mesmo, que pode ser baixado e usado diretamente para amigos que precisam. O plugin de árvore precisa ser implementado (1) Organizar automaticamente os dados em relações subordinadas, para que não precisemos organizar a relação entre superiores e subordinados adicionando dados manualmente ou obtendo dados do banco de dados na interface (2) Suporte a carregamento personalizado de diretórios em árvore de suporte ao carregamento de dados em formatos XML e JSON (3) Compreender a função de selecionar nós da árvore (seleção única, seleção múltipla [seleção em cascata]). (4) Suporte ao carregamento único de big data 。。。。。。 Vamos começar a compartilhar um plugin de Árvore que escrevi: Este plugin é baseado em Jquery e precisa de referências
Primeiro: O objeto JSON do parâmetro de cada nó de árvore no plugin é mostrado abaixo nodeItem: function () {
return {
código de nó: "", // código de nó
Texto do nó: "", // Texto do nó [Texto do Nó Exibir]
nodetitle: "", // node title [texto do nó para movimento do mouse visualização obsoleta]
supnodecode: "", // Código de nó superior [defina o código de nó pai ao qual esse nó pertence, e forme uma relação subordinada por meio desse código]
nodeurl: "", // URL do nó representa o endereço URL do link personalizado pelo nó atual
iconexpand: "", // Ícone de Expansão de Nó [Ícone exibido no nó da árvore de diretórios no estado expandido personalizado, se vazio, o ícone padrão é usado]
iconcollapse: "" // Ícone de Encolhimento de Nó [Ícone exibido no nó da árvore de diretórios em estado de redução personalizado, se vazio, o ícone padrão é usado]
}
} Segundo: Três maneiras de carregar a árvore de diretórios 1. loadJson(Json) JSON JSON object directory tree node node (concluído em um momento) O formato JSON é um array de argumentos para cada item de um objeto nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) formato XML string dados do nó (conclusão única)
Nota: Use formato de string XML Note que a tag do nóNome:nodecode, texto do nó, etc., não podem ser alterados, pois o programa é obtido diretamente usando esse nome
<root>
<item> // Cada nó contém múltiplos valores de dados
<nodecode><![CDATA[valor de codificação de nó]></nodecode>
<nodetext><![CDATA[nome do nó texto]]]></nodetext>
<nodetitle><![CDATA[movimento do mouse de nó no texto de prompt de exibição]]></nodetitle>
<supnodecode><![CDATA[Codificação do pai do nó]></supnodecode>
<nodeurl><![CDATA[Endereço de Link Associado ao Nó]></nodeurl>
<iconexpand><![CDATA[Mostrar caminho do ícone quando o nó expandiu]]></iconexpand>
<iconcollapse><![CDATA[Mostrar caminho de ícone quando o nó encolhe]></iconcollapse>
</item> ... ...
</root>
3. Adicionar manualmente os itens dos nós um a um (dois passos para completar) pelo método addNodeItem(nodeItem) pelo método dos objetos plug-in
Você pode criar uma árvore chamando esse método manualmente através do objeto plugin makeTree().
Terceiro: Método de eventos para reorganizar a relação entre subordinados e subordinados dentro da árvore de diretórios Por meio desse método, podemos resolver o problema de que nosso front-end não precisa mais distinguir de acordo com a relação entre subordinados e subordinados. Quarto: O acima é apenas uma breve introdução aos principais métodos de carregamento e reorganização do Tree. Abaixo, publicaremos o código completo do plugin JS com comentários detalhados no código Funções do plug-in: verificar, single, expandir, fold, mostrar/ocultar conexão de nós, suportar inserção de nós, excluir nós, customizar ícones de nós, definir seleção de nós, obter nós de seleção de árvore de diretórios (suporte a XML, JSON, etc.) Menu de clique direito (não suportado por enquanto, pois a camada pop-up precisa ser usada, essa função é bloqueada e removida) Suporta cliques de nós, duplos cliques, eventos de mudança de seleção de nós, etc O efeito final de exibição Anexo para download:
Tree_Demo.rar
(54.71 KB, Número de downloads: 1)
| 
Publicado em 11/07/2019 11:20:12
|
|
|
|
