English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Agregar id y pid a cada nodo, donde id representa el número del nodo actual y pid representa el número del nodo padre
Paso 1: En la ubicación de visualización del menú en la página, agregar ul y establecer class="ztree"
Paso 2: Activar el soporte de formato de datos simple
Paso 3: Escribir los datos del menú de árbol
Paso 4: Generar el menú de árbol
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Uso del menú de árbol ztree</title>
<!-- Importar la biblioteca de clases nucleares de jquery -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- Importar la biblioteca de clases easyui -->
<link id="easyuiTheme" rel="stylesheet" type="text}}/css" href="../js/easyui/temas/default/easyui.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="../js/easyui/temas/icon.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!--Incluir ztree-->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" rel="external nofollow" />
<script type="text/javascript">
//Ejecutar después de que se cargue la página
$(function() {
//1.realizar configuración de menú jerárquico ztree, habilitar soporte para JSON simple
var setting = {
datos:{
simpleData:{
habilitar:true//Habilitar soporte para formato de datos JSON simple
}
}
};
//2.proporciona datos de menú jerárquico ztree
var zNodes = [
{id:1,pId:0,nombre:"Nodo padre uno"},
{id:2,pId:0,nombre:"Nodo padre dos"},
{id:11,pId:1,nombre:"Nodo hijo uno"},
{id:12,pId:1,nombre:"Nodo hijo dos"},
{id:13,pId:2,nombre:"Nodo hijo tres"},
{id:14,pId:2,nombre:"Nodo hijo cuatro"}
];
//3.generar menú jerárquico
$.fn.zTree.init($("#baseMenu"),setting,zNodes);
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'Aprendizaje de tú, mí, él-¡Buen blog para aprender Java!'" style="alto:100px"></div>
<div data-options="region:'west',title:'Navegación de menú'" style="ancho:200px">
<!--Panel plegable-->
<div class="easyui-acordión" data-opciones="ajustar:true">
<div data-opciones="título:'Menú básico'">
<!--Crear un menú de árbol utilizando el complemento ztree-->
<ul id="baseMenu" class="ztree"></ul>
</div>
<div data-opciones="título:'Menú de sistema'">Tú, yo, él, lugar de estudio</div>
</div>
</div>
<div data-opciones="region:'center',título:'región central'">
<!--Pestaña de panel-->
<div id="mytabs" class="easyui-tabs" data-opciones="ajustar:true">
<div data-opciones="título:'Blog de CSDN',cerrable:true">Pestaña de panel uno</div>
<div data-opciones="título:'Bosque de Blog',cerrable:true">Pestaña de panel dos</div>
</div>
</div>
<div data-opciones="region:'east',título:'región oriental'" estilo="ancho:":100px"></div>
<div data-opciones="region:'south',título:'región sur'" estilo="alto:":100px"></div>
</body>
</html>
La instancia de uso del menú de árbol zTree que se muestra a continuación es todo lo que el editor comparte con ustedes, espero que les sea útil como referencia y que todos apoyen y griten教程.
Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente y no asume responsabilidad alguna por las leyes de derechos de autor. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.