JQuery Tree插件——zTree v3.5.12 版发布

zTreeAPI

浏览: 345152 次
性别:
来自: 北京

最近访客更多访客>>

gyl868

jin361612388

zhang66893649

rocex

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

zTree

ztree jQuery tree 树 javascript

为了学习如何在 jQuery Plugin 发布，反复练习后（因为那个版本号只能升，不能降），这次只得把版本从 v3.5.02 直接升到 v3.5.12 了，请见谅。

jQuery Plugin：http://plugins.jquery.com/zTree.v3/

GitHub：https://github.com/zTree/zTree_v3

为了避免老用户升级时修改 css 的麻烦，所以这次升级的目标还是还是尽量之修改 js 的 bug ，不去修改 css 文件；因此这次升级无法彻底解决 zTree 与 WordPress 同时使用时的样式冲突问题，只是一旦遇到冲突可以比较方便的修改而已（详细请看：https://github.com/zTree/zTree_v3/issues/2）。

zTree 在线操作演示：http://www.ztree.me/v3/demo.php#_101

zTree 快速下载地址：http://code.google.com/p/jquerytree/downloads/list

下面是 v3.5.12 的修改记录：

* 【修改】由于 jquery 1.9 中移除 event.srcElement 导致的 js 报错的bug。

* 【修改】在异步加载模式下，使用 moveNode 方法，且 moveType != "inner" 时，也会导致 targetNode 自动加载子节点的 bug

* 【修改】对已经显示的节点(nochecked=true)使用 showNodes 或 showNode 方法后，导致勾选框出现的bug。

* 【修改】对已经隐藏的节点(nochecked=false)使用 hideNodes 或 hideNode 方法后，导致勾选框消失的bug。

* 【修改】getNodesByParamFuzzy 支持大小写模糊。

* 【修改】className 结构，提取 _consts.className.BUTTON / LEVEL / ICO_LOADING / SWITCH，便于快速修改 css 冲突。

例如：与 WordPress 产生冲突后，直接修改 core 中的 "button" 和 "level" 即可。 Issue: https://github.com/zTree/zTree_v3/issues/2

分享到：

JQuery Tree插件——zTree v3.5.13 版发 ... | JQuery Tree插件——zTree v3.5.02 版发 ...

2013-03-11 11:13
浏览 13229
评论(38)
分类:Web前端
查看更多

38 楼 zTreeAPI 2013-05-28

hellofz 写道

请问高手，有没有这样的API，我翻了下你的源码没有找到
tree.expandPath('node1/node2/node3/node4'), node1, node2, node3, node4都是不同节点的id，我想通过节点路径展开(所有的节点都是AJAX节点)。如果你有写过EXTJS tree，是有这个功能的。不过我更喜欢zTree，因为性能杠杠的。

非常感谢你的支持，不过很抱歉，目前的确没有专门制作这套功能，这个应该属于扩展的工具，等下一步抽空继续把 zTree 的框架完善之后，再来完善这些了。类似的demo 请看：http://www.ztree.me/v3/demo.php#_512

37 楼 hellofz 2013-05-27

36 楼 zTreeAPI 2013-05-26

zachary.guo 写道

继续问一个问题，selectNode 仅仅是将 node 选中，即节点背景色为橘红色，单并不触发该节点的点击事件，即我想通过 js 选中节点打开该节点的 url。

如果使用 href 的方式，即使模拟触发点击事件也无法打开url 的。对于这种情况，请直接在 selectNode 方法之后，用 js 根据节点数据操作页面跳转即可

35 楼 zachary.guo 2013-05-26

继续问一个问题，selectNode 仅仅是将 node 选中，即节点背景色为橘红色，单并不触发该节点的点击事件，即我想通过 js 选中节点打开该节点的 url。

34 楼 zTreeAPI 2013-05-23

zachary.guo 写道

请教一个问题，选择一个节点时，是通过鼠标点击。能否暴露一个接口，通过 js 去选择想要的节点，并且该节点的父节点都展开？

目前我没有发现有这样的接口。

selectNode 方法可以轻松实现你的功能。当然了，如果你不想让节点被选中，直接利用 expandNode 方法展开其父节点，那么所有的父节点都会被展开的了

33 楼 zachary.guo 2013-05-23

32 楼 zTreeAPI 2013-05-21

唯一602 写道

在麻烦一下请教个问题

我现在用edit，节点后面设置修改按钮，在这个树里面我写了两个方法，一个是点击节点的方法，一个是点修改按钮触发的方法（方法是自己写的），现在我点修改按钮的时候也触发了点击节点的方法。现在想问一下，如何在点修改按钮的时候不触发点击节点的方法，或者有什么其它办法能实现这样的效果

查看demo中是如何实现的吧，一般来说组织事件冒泡即可

31 楼唯一602 2013-05-20

30 楼 zTreeAPI 2013-05-19

唯一602 写道

请教，我现在要修改某一个节点的name，但是不能在节点的编辑框编辑，而是直接在代码里给节点的name赋值，这个怎么实现啊？

updateNode(node,checkTypeFlag) 让我找的好苦。。。这问题提的脸丢大了。。。

呵呵，没啥丢脸的，只能说我的 API 文档还需要改进，入门教程不够完善

29 楼唯一602 2013-05-18

唯一602 写道

请教，我现在要修改某一个节点的name，但是不能在节点的编辑框编辑，而是直接在代码里给节点的name赋值，这个怎么实现啊？

updateNode(node,checkTypeFlag) 让我找的好苦。。。这问题提的脸丢大了。。。

28 楼唯一602 2013-05-18

请教，我现在要修改某一个节点的name，但是不能在节点的编辑框编辑，而是直接在代码里给节点的name赋值，这个怎么实现啊？

27 楼 zTreeAPI 2013-04-18

白浪滔天写道

反馈个问题，为什么调用 addNodes方法前后，树的节点长度没有变化呢？
添加node前执行 alert( $.fn.zTree.getZTreeObj("tree-1").getNodes())
,添加node成功后再次执行，两次显示的长度是一样的。
这个问题，尝试过在调用addNodes后，执行reAsyncChildNodes、updateNode,甚至refresh方法，都是没有作用的。
请问这是什么原因呢？

请看 API， getNodes 得到的是 zTree 内部的根节点数据，所有的子孙节点都在 children 属性下，需要递归查看。想省事儿的话请参考 transformToArray 方法。

所以如果你添加的不是根节点的话，那么 getNodes 得到的集合长度永远都是根节点的数量。

26 楼白浪滔天 2013-04-17

25 楼 zTreeAPI 2013-04-14

doocal 写道

个人觉得应该增加可以自定义取json字段的功能，例如：
{"data":[{"id":"","pId":"","name":""}],"status":1,"desc":""}

我想以data做为树的类型，目前除了改源码好像没有相关的接口。

你应该是使用异步加载模式吧,直接利用 dataFilter 作处理就是了

24 楼 doocal 2013-04-13

23 楼 zTreeAPI 2013-04-07

toney_kissinger 写道

楼主是实在是对不起，刚发的贴子有一点写错了。
调用的 tree.expandAll(true); 出的问题，重复节点显示
贴子可写成了 tree.expandNode(true);

非常感谢，你发现的这个应该是一个bug，因为鲜肉这个节点被隐藏了，但还设置为 open:true 导致的！我会尽快修正这个bug。

目前快速解决方案：可以在初始化时不要设置 open 属性即可，或者说如果父节点不展开的节点，就不要设置 open:true 了

22 楼 toney_kissinger 2013-04-03

楼主是实在是对不起，刚发的贴子有一点写错了。
调用的 tree.expandAll(true); 出的问题，重复节点显示
贴子可写成了 tree.expandNode(true);

21 楼 toney_kissinger 2013-04-03

反映一个使用过程中的BUG. 调用 tree.expandAll(true); 之后树中会出现重复节点显示，如果不全展开就没会出理重复数据的错误现象。操作上也会出问题，点多出来的节点上面的节点会联动。如有时间请帮助查下，一直在用 ztree 感觉挺好的，没想到出这问题，我该怎么解决它呢？这问题很是头痛。只列举了很少一部分数据：重复节点，【鲜猪肉、鲜鸡肉】。谢谢您能有时间查阅

代码如下：

<!DOCTYPE html>
<HTML>
<HEAD>
<base target="_self">
<title>产品品类</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="http://127.0.0.1:8080/Katrina/css/zTreeStyle/zTreeStyle.css" >
<script type="text/javascript" src="http://127.0.0.1:8080/Katrina/javascript/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/Katrina/javascript/jquery.ztree.all-3.5.js"></script>

<script type="text/javascript" >
var contextPath = "http://127.0.0.1:8080/Katrina";
var DIM_VS="";
var mcheck = "false";
var onlyCheclLeaf = true;

var exceptNos = [1,2,3,4,5,6,7,8,9,10,11,12,13];

var zNodes =[{"id":"2","pid":"","name":"农副食品及动植物油","desc":"农副食品及动植物油","dataRowIndex":0,"isParent":true,"open":true,"children":[{"id":"27","pid":"2","name":"畜禽肉、油脂及食用杂碎","desc":"畜禽肉、油脂及食用杂碎","dataRowIndex":1,"isParent":true,"open":false,"children":[{"id":"104","pid":"27","name":"鲜肉","desc":"鲜肉","dataRowIndex":2,"isParent":true,"open":true,"children":[{"id":"255","pid":"104","name":"鲜猪肉","desc":"鲜猪肉","dataRowIndex":4,"isParent":true,"open":false,"children":[{"id":"385","pid":"255","name":"混合","desc":"混合","dataRowIndex":6,"children":[],"leaf":1}],"leaf":0},{"id":"256","pid":"104","name":"鲜鸡肉","desc":"鲜鸡肉","dataRowIndex":5,"isParent":true,"open":false,"children":[{"id":"393","pid":"256","name":"内脏类","desc":"内脏类","dataRowIndex":7,"children":[],"leaf":1}],"leaf":0}],"leaf":0},{"id":"105","pid":"27","name":"冻肉","desc":"冻肉","dataRowIndex":3,"children":[],"leaf":1}],"leaf":0}],"leaf":0}]
var nodeList = [], lastIndex=0;

function onClick(event, treeId, treeNode, clickFlag) {
var zTree = $.fn.zTree.getZTreeObj("treeBox");
var id = treeNode["id"];
var tempID = parseInt(id);

if($.inArray(tempID,exceptNos)>=0){
return null;
}
if(onlyCheclLeaf == true && treeNode["children"] && treeNode["children"].length>0){
return null;
}
var name = treeNode["name"];
if(mcheck!="true"){
window.returnValue=[id,name]
window.close();
}

}
$(function(){
var treeConfig = {
check: {
enable: false,
chkboxType: { "Y": "s", "N": "s" }
},

callback: {
'onClick': onClick
}
};
var tree = $.fn.zTree.init($("#treeBox"), treeConfig , zNodes);
tree.expandNode(true);

if(DIM_VS!="" && DIM_VS!="null"){
var node = tree.getNodeByParam("id", DIM_VS, null);
if(node){
tree.selectNode(node);
}
}

ebInitSearch('txt-search','btn-search','btn-search-next');
if(mcheck=="true"){
$("#btn-ok").show();
$("#btn-cancle").show();
}
if(mcheck == "true"){
$("#txt-search").css("width",100);
}
});
//获取ID==value的节点
function ebGetTreeNodeByID(value){
var zTree = $.fn.zTree.getZTreeObj("treeBox");
var node = zTree.getNodeByParam("id", value, null);
if(!node){
return null;
}
return node;
}
function ebGetCheckedNodes(){
var zTree = $.fn.zTree.getZTreeObj("treeBox");
var nodes = zTree.getChangeCheckedNodes();
return nodes;
}
//选中ID==value的节点
function ebCheckTreeNodeByID(value,changeChild){
if(changeChild==undefined){
changeChild = true;
}
var zTree = $.fn.zTree.getZTreeObj("treeBox");
var node = zTree.getNodeByParam("id", value, null);
if(node){
zTree.checkNode(node, true, changeChild);
}
}

function ebInitSearch(inputID,btnSearch,btnNext){
var obj = $("#"+inputID);
obj.keydown(function(e){
var keycode = e.keyCode;
if(keycode==13){
doSearchItem(inputID);
e.preventDefault();
}
});
if(btnSearch){
$("#"+btnSearch).click(function(){
doSearchItem(inputID);
});
}
if(btnNext){
$("#"+btnNext).click(function(){
doGoNextItem();
});
}

}
function doSearchItem(inputID){
var key = $("#"+inputID);
var v = key.val();
doUpdateNodes(false);
var zTree = $.fn.zTree.getZTreeObj("treeBox");
nodeList = zTree.getNodesByParamFuzzy("name", v);
if(nodeList.length>0){
doUpdateNodes(true);

zTree.selectNode(nodeList[0]);
lastIndex=0;
}else{
alert("没有符合条件的数据!");
}

}

function doUpdateNodes(highlight) {
var zTree = $.fn.zTree.getZTreeObj("treeBox");
for( var i=0, l=nodeList.length; i<l; i++) {
nodeList[i].highlight = highlight;
zTree.updateNode(nodeList[i]);
}
}
function doGoNextItem(){
if(nodeList.length >0){
var zTree = $.fn.zTree.getZTreeObj("treeBox");
if(lastIndex<nodeList.length){
zTree.selectNode(nodeList[++lastIndex]);
}else{
zTree.selectNode(nodeList[0]);
lastIndex=0;
}
}
}
function doOK(btn){
var nodes = ebGetCheckedNodes();
if(mcheck=="true"){
var names = [];
for(var i = 0;i<nodes.length;i++){
var t = nodes[i]["name"];
names[names.length]=t;
}
window.returnValue=names.join(",");
window.close();
}
}
</script>
</HEAD>
<BODY>

<center>
<table style="border:0px;margin-top:10px;" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" size="20" id="txt-search"> </td>
<td>
<input type="button" id='btn-search' value="查找" class="ButtonStyle30" style="width:80px;">
<input type="button" id='btn-search-next' value="下一个" class="ButtonStyle30" style="width:80px;">
<input type="button" id='btn-ok' value="确定" class="ButtonStyle30" onclick="doOK(this);" style="width:80px;display:none;">
</td>
</tr>
</table>
<div style="height:430px;width:400px;text-align:center;overflow:auto;overflow-x:auto;overflow-y:auto;"><ul id="treeBox" class="ztree"></ul></div>
</center>
</BODY>
</HTML>

20 楼 toney_kissinger 2013-04-03

楼主呀。反映一个使用过程中的BUG.
调用 tree.expandAll(true); 之后树中会出现重复节点显示，操作上也会出问题。如有时间请帮助查下，怎么解决？这问题很是头痛。
代码如下：

<!DOCTYPE html>
<HTML>
<HEAD>
<base target="_self">
<title>产品品类</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="http://127.0.0.1:8080/Katrina/css/zTreeStyle/zTreeStyle.css" >
<script type="text/javascript" src="http://127.0.0.1:8080/Katrina/javascript/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/Katrina/javascript/jquery.ztree.all-3.5.min.js"></script>

<script type="text/javascript" >
var contextPath = "http://127.0.0.1:8080/Katrina";
var DIM_VS="";
var mcheck = "false";
var onlyCheclLeaf = true;

var exceptNos = [1,2,3,4,5,6,7,8,9,10,11,12,13];

var zNodes =[{"id":"2","pid":"","name":"农副食品及动植物油","desc":"农副食品及动植物油","dataRowIndex":0,"isParent":true,"open":true,"children":[{"id":"27","pid":"2","name":"畜禽肉、油脂及食用杂碎","desc":"畜禽肉、油脂及食用杂碎","dataRowIndex":1,"isParent":true,"open":false,"children":[{"id":"104","pid":"27","name":"鲜肉","desc":"鲜肉","dataRowIndex":2,"isParent":true,"open":true,"children":[{"id":"255","pid":"104","name":"鲜猪肉","desc":"鲜猪肉","dataRowIndex":4,"isParent":true,"open":false,"children":[{"id":"385","pid":"255","name":"混合","desc":"混合","dataRowIndex":6,"children":[],"leaf":1}],"leaf":0},{"id":"256","pid":"104","name":"鲜鸡肉","desc":"鲜鸡肉","dataRowIndex":5,"isParent":true,"open":false,"children":[{"id":"393","pid":"256","name":"内脏类","desc":"内脏类","dataRowIndex":7,"children":[],"leaf":1}],"leaf":0}],"leaf":0},{"id":"105","pid":"27","name":"冻肉","desc":"冻肉","dataRowIndex":3,"children":[],"leaf":1}],"leaf":0}],"leaf":0}]
var nodeList = [], lastIndex=0;

function onClick(event, treeId, treeNode, clickFlag) {
var zTree = $.fn.zTree.getZTreeObj("treeBox");
var id = treeNode["id"];
var tempID = parseInt(id);

if($.inArray(tempID,exceptNos)>=0){
return null;
}

if(onlyCheclLeaf == true && treeNode["children"] && treeNode["children"].length>0){
return null;
}

var name = treeNode["name"];

if(mcheck!="true"){
window.returnValue=[id,name]
window.close();
}

}
$(function(){

var treeConfig = {
check: {
enable: false,
chkboxType: { "Y": "s", "N": "s" }

},

callback: {
'onClick': onClick
}
};
var tree = $.fn.zTree.init($("#treeBox"), treeConfig , zNodes);
tree.expandAll(true);

if(DIM_VS!="" && DIM_VS!="null"){
var node = tree.getNodeByParam("id", DIM_VS, null);
if(node){
tree.selectNode(node);
}
}

ebInitSearch('txt-search','btn-search','btn-search-next');
if(mcheck=="true"){
$("#btn-ok").show();
$("#btn-cancle").show();
}
if(mcheck == "true"){
$("#txt-search").css("width",100);
}
});
//获取ID==value的节点
function ebGetTreeNodeByID(value){
var zTree = $.fn.zTree.getZTreeObj("treeBox");
var node = zTree.getNodeByParam("id", value, null);
if(!node){
return null;
}
return node;
}
function ebGetCheckedNodes(){
var zTree = $.fn.zTree.getZTreeObj("treeBox");
var nodes = zTree.getChangeCheckedNodes();
return nodes;
}
//选中ID==value的节点
function ebCheckTreeNodeByID(value,changeChild){
if(changeChild==undefined){
changeChild = true;
}
var zTree = $.fn.zTree.getZTreeObj("treeBox");
var node = zTree.getNodeByParam("id", value, null);
if(node){
zTree.checkNode(node, true, changeChild);
}
}

function ebInitSearch(inputID,btnSearch,btnNext){
var obj = $("#"+inputID);

obj.keydown(function(e){
var keycode = e.keyCode;
if(keycode==13){
doSearchItem(inputID);
e.preventDefault();
}
});
if(btnSearch){
$("#"+btnSearch).click(function(){
doSearchItem(inputID);
});
}
if(btnNext){
$("#"+btnNext).click(function(){
doGoNextItem();
});
}

}
function doSearchItem(inputID){
var key = $("#"+inputID);
var v = key.val();
doUpdateNodes(false);
var zTree = $.fn.zTree.getZTreeObj("treeBox");

nodeList = zTree.getNodesByParamFuzzy("name", v);
if(nodeList.length>0){
doUpdateNodes(true);

zTree.selectNode(nodeList[0]);
lastIndex=0;
}else{
alert("没有符合条件的数据!");
}

}

function doUpdateNodes(highlight) {
var zTree = $.fn.zTree.getZTreeObj("treeBox");
for( var i=0, l=nodeList.length; i<l; i++) {
nodeList[i].highlight = highlight;
zTree.updateNode(nodeList[i]);
}
}
function doGoNextItem(){
if(nodeList.length >0){
var zTree = $.fn.zTree.getZTreeObj("treeBox");
if(lastIndex<nodeList.length){
zTree.selectNode(nodeList[++lastIndex]);
}else{
zTree.selectNode(nodeList[0]);
lastIndex=0;
}
}

}
function doOK(btn){
var nodes = ebGetCheckedNodes();
if(mcheck=="true"){
var names = [];
for(var i = 0;i<nodes.length;i++){
var t = nodes[i]["name"];
names[names.length]=t;
}

//if(window.opener && window.opener.window.doSetMReferenceValue){
// window.opener.window.doSetMReferenceValue(names.join(",")) ;
// window.close();
//}
window.returnValue=names.join(",");
window.close();
}
}
</script>
</HEAD>
<BODY>

<center>
<table style="border:0px;margin-top:10px;" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" size="20" id="txt-search"> </td>
<td>
<input type="button" id='btn-search' value="查找" class="ButtonStyle30" style="width:80px;">
<input type="button" id='btn-search-next' value="下一个" class="ButtonStyle30" style="width:80px;">
<input type="button" id='btn-ok' value="确定" class="ButtonStyle30" onclick="doOK(this);" style="width:80px;display:none;">
</td>
</tr>
</table>
<div style="height:430px;width:400px;text-align:center;overflow:auto;overflow-x:auto;overflow-y:auto;"><ul id="treeBox" class="ztree"></ul></div>
</center>
</BODY>
</HTML>

19 楼 zTreeAPI 2013-03-29

batwayne 写道

zTreeAPI 写道

batwayne 写道

请教一个问题，今天一下午都没弄好。树t1，把里面符合条件的叶子节点加到空树t2里面，被加进去的叶子节点的父节点也需要加入新树t2里面。可是当我把父节点加进去以后，树t1中父节点下的所有叶节点都跟着进到新树t2里面了，怎么解决这个问题呢？

因为父节点的数据中有 children 属性，这里面包含着全部的子孙节点数据。。看你的需求也是需要那些叶子节点的。。。所以你只需要做的是。。直接把父节点的数据深度 clone 出来，然后把你要复制的这个子节点的相邻节点全部删除掉，就 OK 了。（建议你看看 zTree 的 clone 方法，拿出来改造一下，在深度复制的过程中就可以实现过滤相邻节点的功能了）

折腾了很久，ztree的node的clone函数还是没写出来，没有实现clone功能，请指教

var clone = function (obj){
	if (obj === null) return null;
	var o = obj.constructor === Array ? [] : {};
	for(var i in obj){
		if(i != "children") {
			o[i] = (obj[i] instanceof Date) ? new Date(obj[i].getTime()) : (typeof obj[i] === "object" ? arguments.callee(obj[i]) : obj[i]);
		}
	}
	return o;
}

直接加个 if 就是了，这个代码我没测试，你试试看吧

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论