6.easyui+ztree案例：zTree树

做的就是西部区域面板中的树形导航图。
Easyui中也有树，但是这个树不够强大。



zTree性能非常好，功能强大。

介绍：

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

既然它是jQuery插件，就必须引入jQuery库。

l 下载zTree
http://www.ztree.me/v3/main.php#_zTreeInfo
点击下载即可。



这里使用的是3.5.02版本。
官网上还有一些演示和文档，不过这些东西在下载下来的包中都已经有了，所以直接下载即可。

l 解压包的目录结构：



Api : 使用文档说明
Css : 树样式文件
Demo : 使用案例
Js : 需要引入的文件

打开js目录，发现有很多js，导入一个即可：



zTree是由一个核心js和三个外围扩展js组成的，core就是核心，下面的三个以ex开头的就是扩展的。
Excheck是勾选效果。
Exedit是可编辑效果。
Exhide是节点隐藏效果。
所以说，all.js = core.js + check.js +edit.js + hide.js
开发者只需要导入all.js就可以使用zTree的所有功能。
l 此外，开发者还需要导入\JQueryzTree v3.5.02\css\zTreeStyle下的zTreeStyle.css文件。

1，在工程中新建一个目录，结构如下：



这里导入的是JQuery zTree v3.5.02\js下的all.js和JQuery zTree v3.5.02\css\zTreeStyle下的所有文件。
2，在页面中引入zTree
如果没有引入jQuery要先引入jQuery。
在页面中：

<!-- 引入zTree，要先引入jQuery -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/zTree/zTreeStyle.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/zTree/jquery.ztree.all-3.5.js"></script>

3，开发zTree案例
学习zTree最快的方式，是使用Demo。
JQuery zTree v3.5.02\demo\cn下的index.html。



以JQuery zTree v3.5.02\demo\cn\core下的两个例子为例学习。



在刚才的西部区域中的菜单一里制作一个标准菜单树。

<div data-options="title:'面板一',iconCls:'icon-edit'">
菜单一
</div>

第一步：在显示树的位置提供一个ul节点。

<div data-options="title:'面板一',iconCls:'icon-edit'">
<!-- 在面板一中制作一个标准数据树，首先要提供一个ul节点，
这个ul节点的class属性必须是zTree -->
<ul class="zTree" id="myTree"></ul>
</div>

第二步：在js代码提供一个setting。
第三步：定义数据节点zNodes。
第四步：初始化树。

<!-- zTree生成 -->
<script type="text/javascript">
$(function(){
//setting(这是zTree的配置，当前建立的是标准数据树，
不需要任何配置，但是这个setting必须要有)
var setting = {};
//定义数据节点，里面只有name属性是必须的。
var zNodes = [
{name : '节点1'},
{name : '节点2'}
];

//初始化树,根据ul的id，找到要添加树的节点，生成树。
$.fn.zTree.init($("#myTree"), setting, zNodes);
});
</script>

效果：



l 添加子节点：

var zNodes = [
{name : '节点1', children : [
{name : '子节点一'},
{name : '子节点二'}
]},
{name : '节点2'}
];

效果：



标准数据树可以做简单的树，如果树的层次很深，用这种方式就太麻烦了。
可以通过简单数据树创造树。
3，开发简单数据树
可以参考JQuery zTree v3.5.02\demo\cn\core下的simpleData.html。
原理是引入了id和pid。
在菜单二中制作简单数据树。
Setting的写法可以看API。



将enable设置成true，表示使用简单数据类型。
根据idKey和pIdKey区别父子关系。
步骤与之前一样：
第一步：在显示树的位置提供一个ul节点。

<div data-options="title:'面板二'">
<!-- 在面板二种制作一个简单数据树，也要先提供一个ul节点， -->
<ul class="zTree" id="simpleTree"></ul>
</div>

第二步：在js代码提供一个setting。

//设置简单数据树。
var setting = {
data : {
simpleData : {
enable : true  // 启动简单数据格式。
}
}
};

第三步：定义数据节点zNodes。

//设置数据zNodes，与上面的数据格式不一样了。
var zNodes = [
{id:1, pId:0, name:'节点一'},
{id:2, pId:0, name:'节点二'}
];

第四步：初始化树。

//初始化树。
$.fn.zTree.init($("#simpleTree"), setting, zNodes);

效果：



l 添加子节点

//设置数据zNodes，与上面的数据格式不一样了。
var zNodes = [
{id:1, pId:0, name:'节点一'},
{id:2, pId:0, name:'节点二'},
{id:11, pId:1, name:'子节点一'},
{id:12, pId:1, name:'子节点二'},
{id:21, pId:2, name:'子节点一'},
{id:22, pId:2, name:'子节点二'}
];

效果：



简单数据树是在开发中更常用的。

4，给菜单添加点击跳转效果
在左面点击一个菜单，会在右面的中部区域打开一个选项卡。
在data中有一个url，但这不是我们想要的。



例如：
{id:23, pId:2, name:'百度',url:'http://www.baidu.com'}
这会导致新弹出一个页面，而我们需要的是在右面打开一个选项卡。
l 设置点击效果
在setting中添加一个callback，里面定义一个onClick事件，



点击的时候触发一个函数，这个函数有四个参数。
Event,treeId,treeNode,clickFlag
最重要的是treeNode，它代表节点数据
在tabs选项卡中添加一个新的选项卡。

l 首先，给tabs添加一个id属性：

<!-- 定义一个div,表示一个选项卡布局 -->
<div id="myTabs" class="easyui-tabs" data-options="fit:true">
<!-- 里面的每一个div就是一个选项卡 -->
<!-- 如果让选项卡可以关闭，加上closable:true即可 -->
<!-- 如果要加图标，加上iconCls:CSS类名 即可 -->
<div data-options="title:'选项卡1',closable:true,iconCls:'icon-edit'">内容1</div>
<div data-options="title:'选项卡2',closable:true,iconCls:'icon-ok'">内容2</div>
<div data-options="title:'选项卡3',closable:true">内容3</div>
</div>

l 通过tabs的add方法添加一个选项卡。

//设置简单数据树。
var setting = {
data : {
simpleData : {
enable : true  // 启动简单数据格式。
}
},
//添加一个callback
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
$("#myTabs").tabs('add',{
//定义新选项卡的标题
title : treeNode.name,
//将这个节点的page属性的值定义为这个选项卡连接到的页面
//可以局部刷新tab选项卡<iframe>
content : '<div style="width:100%;height:100%;overflow:hidden;">'
+'<iframe src="'
+treeNode.page
+'" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>'
});
}
}
};

l 添加一个节点：
{id:24, pId:2, name:'我的选项卡',page:'http://www.baidu.com'}
页面点击这个节点，右面就可以打开选项卡。



但是如果这样的话每次点击都会弹出新的选项卡，我们想要的效果是：如果这个选项卡已经打开，就不再新打开选项卡。
那么在add这个选项卡的时候就要先判断这个选项卡是否存在，判断是否存在使用的是tabs的exists属性：



如果存在，就切换到这个页面，使用select属性：



通过在节点上添加click:false，将这个节点设置成不能点的。

{id:1, pId:0, name:'节点一', click:false},
{id:2, pId:0, name:'节点二', click:false},

在点击事件开始的时候，判断这个节点的click属性，如果是false，就直接return。
通过在添加选项卡方法add添加closable:true属性，将新选项卡设置为可以关闭的。
整个简单数据树的代码如下：

		//设置简单数据树。
var setting = {
data : {
simpleData : {
enable : true  // 启动简单数据格式。
}
},
//添加一个callback
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
//判断是否可以点击，通过判断节点的click属性。
if(treeNode.click == false) {
return;
}
//判断选项卡是否存在(exists)，如果存在这个选项卡，就切换到当前选项卡,使用select方法。
//如果不存在，就添加(add)一个新的选项卡。
if($("#myTabs").tabs('exists',treeNode.name)) {
//如果存在，切换。
$("#myTabs").tabs('select',treeNode.name);
} else {
//新添加一个选项卡
$("#myTabs").tabs('add',{
//定义新选项卡的标题
title : treeNode.name,
//将这个节点的page属性的值定义为这个选项卡连接到的页面
//可以局部刷新tab选项卡<iframe>
content : '<div style="width:100%;height:100%;overflow:hidden;">'
+'<iframe src="'
+treeNode.page
+'" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>',
//设置新添加的选项卡可以关闭
closable : true
});
}
}
}
};

//设置数据zNodes，与上面的数据格式不一样了。
//通过click:false，将本节点设置成不能点的。
var zNodes = [
{id:1, pId:0, name:'节点一', click:false},
{id:2, pId:0, name:'节点二', click:false},{id:11, pId:1, name:'子节点一'},
{id:12, pId:1, name:'子节点二'},
{id:21, pId:2, name:'子节点一'},
{id:22, pId:2, name:'子节点二'},
{id:23, pId:2, name:'谷歌', page:'http://www.google.com.cn'},
{id:24, pId:2, name:'百度', page:'http://www.baidu.com'}
];

//初始化树。
$.fn.zTree.init($("#simpleTree"), setting, zNodes);

最终页面效果：