Esta publicación fue editada por última vez por szxiaxiaojun el 11-7-2019 a las 23:20
En el desarrollo diario de proyectos web, a menudo nos encontramos con la visualización de datos de estructura de árbol, que se obtienen de la base de datos y se muestran en forma de árbol. Por comodidad, podemos escribir un control de árbol entre navegadores para JavaScript que pueda reutilizarse en el futuro. Esta sección comparte un plugin de árbol JS desarrollado por él mismo, que puede descargarse y usarse directamente para amigos que lo necesiten. Es necesario implementar un plugin de árbol (1) Organizar automáticamente los datos en relaciones subordinadas, de modo que no sea necesario organizar la relación entre superiores y subordinados añadiendo datos manualmente o obteniendo datos de la base de datos en el front-end (2) Soporte para carga personalizada de árbol de directorios, soporte para la carga de datos en formatos XML y JSON (3) Realizar la función de seleccionar nodos de árbol (selección única, selección múltiple [selección en cascada]). (4) Soporte para la carga única de big data 。。。。。。 Empecemos a compartir un plugin de Tree que he escrito: Este plugin está basado en Jquery y necesita referencias
Primero: El objeto JSON del parámetro de cada nodo del árbol en el plugin se muestra a continuación nodeItem: función () {
return {
código nodo: "", // código nodo
nodetext: "", // node text [node display text]
Nodetitle: "", // Node title [Texto del nodo para movimiento del ratón Visualización obsoleta]
supnodecode: "", // Código nodo superior [define el código nodo padre al que pertenece este nodo, y forma una relación subordinada a través de este código]
nodeurl: "", // URL del nodo representa la dirección de URL del enlace personalizada por el nodo actual
iconexpand: "", // Icono de expansión de nodo [Icono mostrado en el nodo del árbol de directorios en el estado expandido personalizado; si está vacío, se usa el icono por defecto]
iconcollapse: "" // Icono de reducción de nodo [Icono mostrado en el nodo del árbol de directorios en un estado de reducción personalizado, si está vacío, se usa el icono predeterminado]
}
} Segundo: Tres formas de cargar el árbol de directorios 1. loadJson(Json) Array de nodos del árbol de directorios de objetos JSON (completado en un momento dado) El formato JSON es un array de argumentos para cada elemento de un objeto nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. datos de nodo en formato de cadena XML loadXml(xml) (completación única)
Nota: Usa formato de cadena XML Ten en cuenta que no se permite cambiar el node tagName:nodecode, nodetext, etc., porque el programa se obtiene directamente usando este nombre
<root>
<item> // Cada nodo contiene múltiples valores de datos
<nodecode><![CDATA[valor de codificación de nodo]]></nodecode>
<nodetext><![CDATA[nombre del nodo texto ]]></nodetext>
<nodetitle><![CDATA[movimiento de nodo del ratón en el texto de la pantalla]></nodetitle>
<supnodecode><![CDATA[Codificación padre de nodo]]></supnodecode>
<nodeurl><![CDATA[Dirección de enlace asociada a nodo]></nodeurl>
<iconexpand><![CDATA[Mostrar ruta de icono cuando el nodo se expandió]]></iconexpand>
<iconcollapse><![CDATA[Mostrar ruta de icono cuando el nodo se reduce]]></iconcollapse>
</item> ... ...
</root>
3. Añadir manualmente los elementos del nodo uno a uno (dos pasos para completar) mediante el método addNodeItem(nodeItem) mediante el método de los objetos plug-in
Puedes crear un árbol llamando a este método manualmente a través del objeto del plugin makeTree().
Tercero: Método de eventos para reorganizar la relación entre subordinados y subordinados dentro del árbol de directorios. Mediante este método, podemos resolver el problema de que nuestro front-end ya no necesita distinguir según la relación entre subordinados y subordinados. Cuarto: Lo anterior es solo una breve introducción a los principales métodos de carga y reorganización de Tree. A continuación publicaremos el código completo del plugin JS con comentarios detallados en el código Funciones del complemento: comprobar, unir, expandir, plegar, mostrar/ocultar la conexión de nodos, soportar inserción de nodos, eliminar nodos, personalizar iconos de nodos, configurar la selección de nodos, obtener nodos de selección de árbol de directorios (soporte XML, JSON, etc.) Menú de clic derecho (no soportado por el momento, porque hay que usar la capa emergente, esta función está bloqueada y eliminada) Soporta el clic de nodos, doble clic, cambios de selección de nodos, etc. El efecto final de visualización Descarga de archivos adjuntos:
Tree_Demo.rar
(54.71 KB, Número de descargas: 1)
| 
Publicado en 11/7/2019 11:20:12
|
|
|
|
