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  // 启动简单数据格式。}},//添加一个callbackcallback : {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  // 启动简单数据格式。}},//添加一个callbackcallback : {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);

最终页面效果：