最近,在项目中需要用树形菜单,所以就研究了一波zTree的使用,不得不说Z树是真的强大,自己也学到了很多。小生就此来分享一下心得,请大神们多多指教:
1)使用 zTree 实现不同树之间的拖动
这个应该是很简单的了,直接上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Tree</title>
<link rel="stylesheet" type="text/css" href="css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var mainSetting = {
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
drag: {
autoExpandTrigger: false,
isCopy: true,
isMove: true,
prev: false,
next: true,
inner: false
}
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeDrop: beforeDrop
}
};
var objSetting = {
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
drag: {
autoExpandTrigger: false,
isCopy: true,
isMove: false,
prev: false,
next: false,
inner: false
}
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeDrop: beforeDrop
}
};
var mainNodes =[
{ id:1, pId:0, name:"父节点 1", open:true},
{ id:11, pId:1, name:"叶子节点 1-1"},
{ id:12, pId:1, name:"叶子节点 1-2"},
{ id:13, pId:1, name:"叶子节点 1-3"},
{ id:2, pId:0, name:"父节点 2", open:false},
{ id:21, pId:2, name:"叶子节点 2-1"},
{ id:22, pId:2, name:"叶子节点 2-2"},
{ id:23, pId:2, name:"叶子节点 2-3"},
{ id:3, pId:0, name:"父节点 3", open:false},
{ id:31, pId:3, name:"叶子节点 3-1"},
{ id:32, pId:3, name:"叶子节点 3-2"},
{ id:33, pId:3, name:"叶子节点 3-3"}
];
var objNodes =[
{ id:1, pId:0, name:"#32770_设置 Windows Internet Explorer", options:"156465",open:true,drag:false},
{ id:11, pId:1, name:"DirectUIHWND_稍后询问", options:"156465"},
{ id:2, pId:0, name:"IEFrame_360导航_新一代安全上网导航 - Windows Internet Explorer", open:false,drag:false},
{ id:21, pId:2, name:"IEFrame_关闭_2"},
{ id:3, pId:0, name:"IEFrame_360影视-更新更全更受欢迎的影视网站-在线观看 - Windows Internet Explorer", open:false,drag:false},
{ id:31, pId:3, name:"IEFrame_关闭"},
{ id:4, pId:0, name:"SWT_Window0_Java EE - TestLab/WebContent/index.html - Eclipse", open:false,drag:false},
{ id:41, pId:4, name:"SysTreeView32"},
{ id:5, pId:0, name:"Shell_TrayWnd", open:false,drag:false},
{ id:51, pId:5, name:"MSTaskListWClass_Intenret Explorer"}
];
function beforeDrag(treeId, treeNodes) {
for (var i=0,l=treeNodes.length; i<l; i++) {
if (treeNodes[i].drag === false) {
return false;
}
}
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
return targetNode ? targetNode.drop !== false : true;
}
$(document).ready(function(){
$.fn.zTree.init($("#mainTree"), mainSetting, mainNodes);
$.fn.zTree.init($("#objTree"), objSetting,objNodes);
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'west',split:true" style="width:50%; ">
<div class="zTreeDemoBackground left">
<ul id="mainTree" class="ztree"></ul>
</div>
</div>
<div data-options="region:'center',split:true">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#objLibrary">对象库</a></li>
<li><a data-toggle="tab" href="#builtFun">内置函数</a></li>
<li><a data-toggle="tab" href="#scrState">脚本语句</a></li>
<li><a data-toggle="tab" href="#customFun">自定义函数</a></li>
</ul>
<div class="tab-content" style="height:96%;">
<div id="objLibrary" class="tab-pane fade in active" style="height:100%;">
<div id="cc" class="easyui-layout" data-options="fit:true">
<div class="right">
<ul id="objTree" class="ztree"></ul>
</div>
</div>
</div>
<div id="builtFun" class="tab-pane fade">
<ul class="easyui-tree">
<li>
<span>脚本函数</span>
<ul>
<li>
<span>激活窗口(String)</span>
</li>
<li>
<span>调用脚本(String)</span>
</li>
<li>
<span>启动外部程序(String)</span>
</li>
<li>
<span>开始时间(String)</span>
</li>
<li>
<span>结束时间(String)</span>
</li>
</ul>
</li>
<li>
<span>截屏函数</span>
<ul>
<li>
<span>截屏()</span>
</li>
</ul>
</li>
<li>
<span>校验函数</span>
<ul>
<li>
<span>校验数据库(String,String,String,String,String,String)</span>
</li>
<li>
<span>校验数据库(String,String,String,String,String,String[])</span>
</li>
<li>
<span>校验数据库(String,String,String,String,String,String[][])</span>
</li>
<li>
<span>校验数据库(String,String,String,String,String,String)</span>
</li>
<li>
<span>校验表格列(String,int,String[])</span>
</li>
<li>
<span>校验表格行(String,int,String[])</span>
</li>
</ul>
</li>
<li>
<span>鼠标屏幕函数</span>
<ul>
<li>
<span>点击屏幕(int,int)</span>
</li>
<li>
<span>点击屏幕(int,int,int)</span>
</li>
<li>
<span>点击屏qe幕(int,int)</span>
</li>
<li>
<span>点击eqe屏幕(int,int)</span>
</li>
</ul>
</li>
<li>
<span>键盘屏幕函数</span>
<ul>
<li>
<span>模拟键盘(String)</span>
</li>
<li>
<span>模拟键dasd盘(String)</span>
</li>
</ul>
</li>
<li>
<span>AR设置函数</span>
<ul>
<li>
<span>关闭日志()</span>
</li>
<li>
<span>关闭da日志()</span>
</li>
<li>
<span>dasd关闭日志()</span>
</li>
<li>
<span>asd关闭日志()</span>
</li>
</ul>
</li>
<li>
<span>获取信息函数</span>
<ul>
<li>
<span>获取文本值(String,String,int,int,int)</span>
</li>
<li>
<span>获取文本值(String,String,int,int,int)</span>
</li>
</ul>
</li>
</ul>
</div>
<div id="scrState" class="tab-pane fade">
<ul class="easyui-tree">
<li>
<span>脚本函数</span>
<ul>
<li>
<span>激活窗口(String)</span>
</li>
<li>
<span>调用脚本(String)</span>
</li>
<li>
<span>启动外部程序(String)</span>
</li>
<li>
<span>开始时间(String)</span>
</li>
<li>
<span>结束时间(String)</span>
</li>
</ul>
</li>
<li>
<span>键盘屏幕函数</span>
<ul>
<li>
<span>模拟键盘(String)</span>
</li>
<li>
<span>模拟键dasd盘(String)</span>
</li>
</ul>
</li>
<li>
<span>获取信息函数</span>
<ul>
<li>
<span>获取文本值(String,String,int,int,int)</span>
</li>
<li>
<span>获取文本值(String,String,int,int,int)</span>
</li>
</ul>
</li>
</ul>
</div>
<div id="customFun" class="tab-pane fade">
<ul class="easyui-tree">
<li>
<span>函数</span>
<ul>
<li>
<span>函数1(String,int,int,String)</span>
</li>
<li>
<span>函数2(String,int)</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
2)使用 zTree 实现不同树之间拖动复制不同节点名称的操作
在 zTree 中可以自定义节点名称的名称属性,我们可以采用这种方式,来实现此功能。
var mainSetting = {
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
drag: {
autoExpandTrigger: false,
isCopy: true,
isMove: true,
prev: false,
next: true,
inner: true
}
},
data: {
simpleData: {
enable: true
},
key :{
name : "name"
}
}
};
var objSetting = {
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
drag: {
autoExpandTrigger: false,
isCopy: true,
isMove: false,
prev: false,
next: false,
inner: false
}
},
data: {
simpleData: {
enable: true
},
key :{
name : "itemName",
}
}
};
最好左右树之间节点的属性名称设为一致。
3)使用 zTree 实现冻结/隐藏子节点的操作
这个功能在 zTree 的 Demo 中就有。
<SCRIPT type="text/javascript">
var setting = {
view: {
dblClickExpand: dblClickExpand
},
data: {
simpleData: {
enable: true
}
}
};
function dblClickExpand(treeId, treeNode) {//zTree的
return treeNode.level > 0;
}
</SCRIPT>
<style type="text/css">
.ztree li span.button.switch.level0 {visibility:hidden; width:1px;}
.ztree li ul.level0 {padding:0; background:none;}
</style>
4)使用 zTree 实现节点的置灰/禁用操作
zTree 中提供了 zTreeObj.setChkDisabled 方法来置灰/禁用当前节点,但这种禁用方法是通过节点的复选框 / 单选框被禁用方式实现的,在项目中没有单选/复选框的话,可以使用定义一个数组的形式,禁用时添加节点的 id,取消禁用时删除节点的 id。
//右键禁用
$scope.disabledTreeNode = function(){
hideRMenu();//隐藏弹出框
if($scope.ztreeNode){
$scope.list.push($scope.ztreeNode.tId);//往list中添加节点的Id
$scope.ztreeNode.iconSkin = "diy01";//更改节点的图标
$scope.zTree.updateNode($scope.ztreeNode);
}
if($scope.ztreeNode.children){
angular.forEach($scope.ztreeNode.children, function(each){
$scope.list.push(each.tId);
each.iconSkin = "diy01";
$scope.zTree.updateNode(each);
});
}
};
//右键取消禁用
$scope.cancelDisabledTreeNode = function(){
hideRMenu();
if($scope.ztreeNode){
$scope.list.splice(getIndex($scope.ztreeNode.tId),1);//先获得index,然后删除list中的节点Id
$scope.ztreeNode.iconSkin = "";//重置节点的图标
$scope.zTree.updateNode($scope.ztreeNode);
}
if($scope.ztreeNode.children){
angular.forEach($scope.ztreeNode.children, function(each){
$scope.list.splice(getIndex(each.tId),1);
each.iconSkin = "";
$scope.zTree.updateNode(each);
});
}
};
在此会发现,功能实现了,效果没有实现,我们的图标还是没有任何变化,这时我们需要在 zTreeStyle.css 文件中增加如下内容:
.ztree li span.button.diy01_ico_open{margin-right:2px; background-position:2px -41px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.diy01_ico_close{margin-right:2px; background-position:2px -41px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.diy01_ico_docu{margin-right:2px; background-position:2px -41px; vertical-align:top; *vertical-align:middle}
5)使用 zTree 实现复杂树形网络操作
这个功能之前不了解,看了网上的资料后,发现复杂树形网络这一功能还是可以实现的。
这是通过 excheck 扩展功能来实现的,例子如下:
var setting = {
view: {
showLine: false,
addDiyDom: addDiyDom,
},
data: {
simpleData: {
enable: true
}
}
};
//自定义DOM节点
function addDiyDom(treeId, treeNode) {
}