Ztree的简单实例

来源：互联网发布：中国网络教育电视台编辑：程序博客网时间：2024/05/29 08:39

Ztree的官网地址Ztree是一个菜单树的JQuery的插件,用它我们更轻松的来构建一个自己的树形菜单,下面来一起构建一个吧! 吐舌头

主要代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>最简单的树--简单JSON数据</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" href="css/demo.css" type="text/css"><link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/jquery.ztree.core.js"></script>  </head>  <body>      <div class="content_wrap">    <div class="zTreeDemoBackground left">    <ul id="treeDemo" class="ztree"></ul></div></div>  </body></html><script type="text/javascript">   var setting={         view:{          showLine:false,          showIcon:true       },       callback:{          onClick:zTreeOnClick       },       data:{          simpleData:{             enable:true           }         }       };  var zNodes =[ { id:1, pId:0, name:"用户管理",iconOpen:"css/zTreeStyle/img/diy/1_open.png",iconClose:"css/zTreeStyle/img/diy/1_close.png"}, { id:11, pId:1, name:"注册管理",open:true,icon:"css/zTreeStyle/img/diy/2.png"}, { id:111, pId:11, name:"增加",url:"https://www.baidu.com",icon:"css/zTreeStyle/img/diy/2.png"},{ id:112, pId:11, name:"删除",url:"https://www.baidu.com"},{ id:113, pId:11, name:"修改",url:"https://www.baidu.com"},{ id:114, pId:11, name:"查询",url:"https://www.baidu.com"},{ id:12, pId:1, name:"充值管理"},{ id:121, pId:12, name:"增加",url:"https://www.baidu.com"},{ id:122, pId:12, name:"修改",url:"https://www.baidu.com"},{ id:123, pId:12, name:"删除",url:"https://www.baidu.com"},{ id:124, pId:12, name:"查询",url:"https://www.baidu.com"},{ id:13, pId:1, name:"账户管理", isParent:true},{ id:2, pId:0, name:"日志管理"},{ id:21, pId:2, name:"用户日志", open:true},{ id:211, pId:21, name:"注册日志",url:"https://www.baidu.com"},{ id:212, pId:21, name:"登录日志",url:"https://www.baidu.com"},{ id:213, pId:21, name:"充值日志",url:"https://www.baidu.com"},{ id:214, pId:21, name:"退出日志",url:"https://www.baidu.com"},{ id:22, pId:2, name:"系统日志"},{ id:221, pId:22, name:"错误日志",url:"https://www.baidu.com"},{ id:222, pId:22, name:"异常日志",url:"https://www.baidu.com"},{ id:223, pId:22, name:"权限日志",url:"https://www.baidu.com"},{ id:3, pId:0, name:"短信管理", isParent:true}    ];//获取节点的值function zTreeOnClick(event,treeId,treeNode){   alert(treeId+','+treeNode.id+','+treeNode.pId+','+treeNode.name);}$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);}); </script>

1.JSON数据格式不能改动

         var nodes = [       {id:1, pId:0, name: "父节点1"},       {id:11, pId:1, name: "子节点1"},      {id:12, pId:1, name: "子节点2"}         ];

2.onclick用于捕获节点被点击的事件

3.showIcon设置 zTree 是否显示节点的图标

4.showLine设置 zTree 是否显示节点之间的连线

注:如要使用,别忘了引入脚本文件,想要了解更多,请到Ztree官网查看

阅读全文

0 0