您的位置：首页 > 产品设计 > UI/UE

ztree的菜单显示与easyUI动态选项卡

2013-12-02 12:25 309 查看
一、使用ztree完成树状菜单栏显示（开发准备ztree开发包下载）

介绍：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是zTree 最大优点。

（是jquery 插件 ，使用ztree 必须引入 jquery 的类库 ）

1、开发包目录结构：



api 使用文档说明

css 树样式文件

demo 使用案例

js 需要引入框架插件文件

2、开发引入

开发需引入：\JQuery zTree v3.5.15\js\jquery.ztree.all-3.5.js

以及：JQuery zTree v3.5.15\css\zTreeStyle\zTreeStyle.css



其中jquery-1.8.3.js为jquery的开发js，也是easyui需要的

在jsp文件中引入ztree

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 引入ztree -->
<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可结合ztree开发包中提供的demo来学习：JQuery zTree v3.5.15\demo\cn\index.html

标准数据树：

参考 demo/cn/core/standardData.htm

(1)在需要显示树的位置，提供<ul>节点

<!-- 折叠面板 -->
<div class="easyui-accordion" data-options="fit:true" > <!-- 本面板在本人博客的 easyUI的基本搭建与layout布局中有介绍 -->
<!-- 每个div都是一个面板 -->
<div data-options="title:'诸神',iconCls:'icon-help'" >
<!-- 制作标准数据树 -->
<ul class="ztree" id="basetree" ></ul>
</div>
(2)在js代码中提供setting

(3)提供节点数据

(4)初始化树

<script type="text/javascript">
$(function(){
//setting （ztree配置，标准数据树，不需要任何配置）
var setting = {};

//数据zNodes,json格式
var zNodes = [
{name : '宙斯',
children : [ //childern 表示子节点
{name : '希腊'},
{name : '诸神之王'}
]}, //每一个{}表示一个节点
{name : '阿波罗',
children:[
{name : '太阳神'}
]},
{name : '波塞冬'}
];
//初始化树
$.fn.zTree.init($('#basetree'),setting,zNodes);
});
</script>
效果：



简单数据树：

参考demo/cn/core/simpleData.html

(1)在需要显示树的位置，提供<ul>节点

<!-- 折叠面板 -->
<div class="easyui-accordion" data-options="fit:true" >
<!-- 每个div都是一个面板 -->
<div data-options="title:'诸国'" >
<!-- 制作简单数据树 -->
<ul class="ztree" id="simpletree" ></ul>
</div>
(2)在js代码中提供setting

(3)提供节点数据
(4)初始化树

<script type="text/javascript">
$(function(){
//setting设置
var setting = {
data : {
simpleData : {
enable : true //启用简单数据格式,其他参数可参照api自行设定（其实这样就行了）
}
}
};
//数据
var zNodes = [
{id:1, pId:0, name:'英国'},      //id唯一标识，pId父节点：0表示该节点为顶级结点
{id:11, pId:1, name:'伦敦'},
{id:111, pId:11, name:'奥运会'},
{id:2, pId:0, name:'冰岛'},
{id:3, pId:0, name:'法国'},
{id:31, pId:3, name:'法西斯'},
];
//初始化树
$.fn.zTree.init($('#simpletree'),setting,zNodes);
});
</script>
效果：



注意：这几个菜单点击后是无效果的...

4.ztree与easyUI结合完成点击菜单弹出动态选项卡

允许点击，点击后弹出新的选项卡（在setting中设置）

js中的代码：

<script type="text/javascript">
$(function(){
var setting = {
data : {
simpleData : {
enable : true //启用简单数据格式,其他参数可参照api自行设定（其实这样就行了）
}
},
callback : {
onClick : function(event,treeId,treeNode,clickFlag){  //treeNode代表节点数据，可参照ztree中的api
if(treeNode.click==false){   //click为false不可以进行点击
return ;
}
//在tabs选项卡添加一个新的选项卡
if($('#mytabs').tabs('exists',treeNode.name)){ //treeNode.name对应数据zNodes中的name
//如果存在选项卡，切换到该选项卡中
$('#mytabs').tabs('select',treeNode.name);
}else{
//如果不存在选项卡，添加新的选项卡
$('#mytabs').tabs('add',{
title : treeNode.name,
content : '<div style="width:100%;height:100%;overflow:hidden;">'
+ '<iframe src="'
+ treeNode.page
+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>', // 可以局部刷新tab选项卡
closable : true //提供关闭选项卡的按钮
});
}
}
}
};
//数据
var zNodes = [
{id:1, pId:0, name:'英国'},      //id唯一标识，pId父节点：0表示该节点为顶级结点
{id:11, pId:1, name:'伦敦'},
{id:111, pId:11, name:'回锅菜鸟的博客',page:'http://blog.csdn.net/u012814041'},
{id:2, pId:0, name:'冰岛',click:false},      //click:false 表示该选项卡不可以进行点击
{id:3, pId:0, name:'法国'},
{id:31, pId:3, name:'百度',page:'http://www.baidu.com'},
];
//初始化树
$.fn.zTree.init($('#simpletree'),setting,zNodes);
});
</script>
body中的代码

<body class="easyui-layout">
<div region="north" title="北国风光" style="height:100px;" >北部</div>
<div data-options="region:'south',title:'南海观音'" style="height: 80px;">南部</div>
<div data-options="region:'center'">
<!-- 这是一个选项卡布局 -->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<!-- 每一个div 就是一个选项卡 -->
<div data-options="title:'选项卡一',iconCls:'icon-ok'">内容一</div>
<div data-options="title:'选项卡二',closable:true">内容二</div>
<div data-options="title:'选项卡三'">内容三</div>
</div>
</div>
<div data-options="region:'west',title:'西方世界'" style="width:200px;" >
<!-- 折叠面板 -->
<div class="easyui-accordion" data-options="fit:true" >
<!-- 每个div都是一个面板 -->
<div data-options="title:'诸神',iconCls:'icon-help'" >
<!-- 制作标准数据树 -->
<ul class="ztree" id="basetree" ></ul>
</div>
<div data-options="title:'诸国'" >
<!-- 制作简单数据树 -->
<ul class="ztree" id="simpletree" ></ul>
</div>
<div data-options="title:'遗迹'" >金字塔</div>
</div>
</div>
</body>


效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航