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);

最终页面效果：

6.easyui+ztree案例：zTree树相关推荐

zTree实现基本树
zTree实现基本树 1.实现源码 <!DOCTYPE html> <html> <head><title>zTree实现基本树</title&g ...
zTree实现删除树节点
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! zTre ...
easyui treegrid php,jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 | 菜鸟教程
jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格 jQuery EasyUI 插件扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid. ...
【原创】MVC+ZTree实现权限树的功能
2.html代码权限树: 3.JS代码 var setting = { async: { enable: true, url: '/RoleToPerssion/GetPerssionTree',/ ...
ztree 实现表格树
ztree节点固定显示用户自定义控件,转载的出处:http://www.jb51.net/article/124698.htm <!DOCTYPE HTML> <html>&l ...
不一样的ZTree，权限树.js插件
每一个有趣的创新,都源于苦逼的生活. 在最近的工作中,遇到一个做权限管理筛选的需求. 简单总结需求: 1展示一个组织中的组织结构 2通过点击组织结构中的任意一个节点可以向上向下查询对应的组织结构如果 ...
使用hessian+protocol buffer+easyUI综合案例--登陆
首先先简单介绍下hessian ,protocol buffer, easyUI框架 hessian: Hessian是一个轻量级的remoting on http工具,采用的是Binary RPC协 ...
【EasyUI篇】TreeGrid树表格组件
微信公众号:程序yuan 关注可获得更多干货哦!.问题或建议,请公众号留言; ------------------------------------------------ 关注小编微信公众号获取更 ...
Easy-UI入门案例
Easy-UI是封装了前台逻辑以及显示的基于Jquery技术的前端框架. Easy-UI特点 EasyUI支持两种渲染方式分别为javascript方式(如:$('#p').panel({-}))和h ...

6.easyui+ztree案例：zTree树

6.easyui+ztree案例：zTree树相关推荐

最新文章

热门文章