Ztree树形菜单使用入门

Ztree属性菜单使用入门

ztree简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现灵活多变的功能

二、ztree引入

http://www.treejs.cn/v3/main.php#_zTreeInfo
以上为官网链接，免费使用。
注意：使用这个要依赖JQuery，版本要大于等于下载下来的JQuery版本。
步骤 1、文件准备
将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录，并且保证相对路径正确
步骤 2、编写 html 页面
按照以下代码，制作 html 页面，访问试试看吧，注意：
1) “” 是必需的！
2) zTree 的容器 className 别忘了设置为 “ztree”

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {};
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = [
   {name:"test1", open:true, children:[
      {name:"test1_1"}, {name:"test1_2"}]},
   {name:"test2", open:true, children:[
      {name:"test2_1"}, {name:"test2_2"}]}
   ];
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
  </SCRIPT>
 </HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

json对象与json字符串的区别

1）JSON 对象是满足 JSON 数据格式的 JS 对象
例如： {name:”abc”}
最正规的 JSON 数据是连属性名称都要被包括起来的
例如： {“name”:”abc”}

（2）JSON 格式的字符串的关键问题– 它仅仅是一个字符串，只不过满足了 JSON 的数据格式
例如：’{“name”:”abc”}’

看到两个例子的对比了吗？显而易见，关键问题就出在外面这两个单引号上。

关于异步加载
关于异步加载
1、什么是异步加载？
这个问题与 zTree 无关，但必须要解释一下，因为很多初学者都在这个问题上犯糊涂。
准确的说应该是：“什么是 AJAX ?”– AJAX 即“Asynchronous JavaScript and XML”（异步JavaScript和XML)；AJAX 是一种技术，可以在不影响当前页面的情况下与后台服务端进行通讯，获取相应的数据。更多的解释大家可以去网上搜索一下。
2、异步加载的特性
请注意最前面的两个字 “异步”，与他类似还有一个词 “同步”，顾名思义“同步”就是前面的语句不执行完就不会执行后面的语句，“异步”就不一样了，发起异步请求后，不管是否得到结果，都不影响当前代码的后续执行。
经常有朋友问：“异步加载模式下，初始化 zTree 以后为什么无法得到全部节点数据？”、“异步加载模式下，初始化 zTree 以后为什么无法使用 expandAll 方法将全部节点展开？”等等类似的问题，看了前面的解释，应该明白了吧？当你发起异步请求后，代码会立刻去执行 getNodes 方法或 expandAll 方法，这时候异步加载的数据还未收到，当然操作就失效了。所以你会发现当你先 alert 一下，会发现又一切正常了– 就是这个原因。
所以，对于异步加载模式下，需要在获取节点后处理的事情，尽量利用 onAsyncSuccess / onAsyncError 事件回调函数去处理，这样才能保证异步加载正常完毕后执行你需要的操作。

利用 setTimeout 举个异步的例子，对照着执行看看吧：
//No.1
var a = 1;
a++;
var b = a;
alert(b);

//No.2
var a = 1;
setTimeout(function(){a++;}, 500);
var b = a;
alert(b);


2.页面中引入在tree
<script type="text/javascript" src="../js/ztree/jquery.ztree.all.min.js" ></script>
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />
3.通过ztree制作属性菜单
 两种数据格式：
1）
• 标准的 JSON 数据需要嵌套表示节点的父子包含关系
例如：
var nodes = [
    {name: "父节点1", children: [
        {name: "子节点1"},
        {name: "子节点2"}
    ]}
];
• 默认展开的节点，请设置 treeNode.open 属性
• 无子节点的父节点，请设置 treeNode.isParent 属性
• 其他属性说明请参考 API 文档中 "treeNode 节点数据详解"
2）简单的json数据

在每个节点添加id 和pid，id表示当前节点编号，pid表示父节点编号

第一步：在页面需要显示菜单的位置，需要添加<ul>设置class为ztree

第二步：在script脚本中设置 、数据和生成
  开启简单数据格式的支持 enable：true

第三步：编写ztree属性菜单数据
zNodes是个数组。

pId为0则表示第一层。

第四部：生成树形菜单