关于zTree.addNodes(parentNode, newNode) 树无反应

viviandew 发布于 2012/08/27 12:26
阅读 5K+
收藏 0

@zTree 你好,想跟你请教个问题:

做zTree 增删改基本功能demo时,用zTree.addNodes 方法 添加节点,树没有反应。

仔细检查了各个地方仍然无法解决,请赐教。

 

<!DOCTYPE html>
<HTML>
<HEAD>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../js/ztree/css/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="../js/ztree/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../js/ztree/js/jquery.ztree.core-3.3.js"></script>
	<script type="text/javascript" src="../js/ztree/js/jquery.ztree.excheck-3.3.js"></script>
	<script type="text/javascript" src="../js/ztree/js/jquery.ztree.exedit-3.3.js"></script>
	<SCRIPT type="text/javascript">
		<!--
	$(document).ready(function() {
	var zTreeObj;
	var zNodeTemp;
		
	var houseIcon = "../js/ztree/css/img/diy/1_open.png";
	var roleIcon = "../js/ztree/css/img/diy/role.png";
	var mainMenu = "../js/ztree/css/img/diy/main.png";
		
	var setting = {
	
			view: {
				selectedMulti: false
			},
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false
			},
		     check: {
                enable: true,
				chkStyle: "radio",
				radioType: "all"
             },
             data: {
                keep: {
					parent:true,
					leaf:true
				},
				simpleData: {
					enable: true
				}
             },
             callback: {  
           		onCheck: onCheck
   			 }  
             
	};

		
	function NodeRadio(id, pId, name, isParent,open,icon,nocheck){  
	    this.id = id;    
	    this.pId = pId;    
	    this.name = name;  
	    this.isParent = isParent; 
	    this.open =  open;
	    this.icon = icon;
	    this.nocheck = nocheck;
	};  
	

	function onCheck(event, treeId, treeNode, clickFlag) {}	

	//初始化角色
	loadRole();
	
	function loadRole(){
		var zNodes = new Array;
	$.ajax( {
			type : 'Get',
			url : '../**/getroles',
			cache:false,
			dataType : 'json',
			global : false,
			async : false,
			success : function(list) {
				 ***
			},
			error : function() {
				alert("***");
			}
		});
		zTreeObj = $.fn.zTree.init($("#treeRole"), setting, zNodes);
	}	
		
	//添加
	$("#add").bind("click", {isParent:false}, addNode);

		
	function addNode(e){
			var zTree = $.fn.zTree.getZTreeObj("treeRole");
			var parentNode = zNodeTemp[0];
			var newNodeId = parseInt(zNodeTemp[zNodeTemp.length-1].id)+1;
			var newNode = new NodeRadio("12", "0", "角色名称", false,true,roleIcon,false);
			treeNode = zTree.addNodes(parentNode, newNode);
			if (treeNode) {
				zTree.editName(treeNode[0]);
			} else {
				alert("叶子节点被锁定,无法增加子节点");
			}
			zNodeTemp.push(newNode);
	}
	
	
	//end
	});
	
	//-->
</SCRIPT>
	
	<style>
<--
-->
</style>
</HEAD>
<body>
<ul id="treeRole" class="ztree"></ul>
</body>
</HTML>

 

 

加载中
0
zTree
zTree
请检查你的  newNode  是否正常?
v
viviandew
新增的节点newNode 是没问题的啊
0
zTree
zTree

那你的问题不是 addNodes 呀,是 loadRole 的问题, 执行了 ajax,你是不是想在 success 里面给 zNodes 赋值? 如果是的话,那么你就应该吧init zTree 的代码也放在 success 里面!

具体原因请参考我的文章《这些年我们爱犯的弱智错误(菜鸟必看)》http://ztreeapi.iteye.com/blog/1423986  其中的No10 和 No11两点请着重看一下

v
viviandew
非常感谢
0
v
viviandew

引用来自“zTree”的答案

那你的问题不是 addNodes 呀,是 loadRole 的问题, 执行了 ajax,你是不是想在 success 里面给 zNodes 赋值? 如果是的话,那么你就应该吧init zTree 的代码也放在 success 里面!

具体原因请参考我的文章《这些年我们爱犯的弱智错误(菜鸟必看)》http://ztreeapi.iteye.com/blog/1423986  其中的No10 和 No11两点请着重看一下

可能是没有引入edit包的原因也可能是缓存的原因,已经可以添加了 ,我做了三棵树 左中右各一棵,左右都正常 唯有中间的 根节点和叶子节点都左对齐显示,不知道是不是css设置的原因还是什么,

.left {
 float: left;
 width: 30%;
 height: 600px;
 background: #ADD8E6;
 text-align: center;
}

.rhght {
 float: right;
 width: 30%;
 height: 600px;
 background: #B0E0E6;
}

.center {
 float: center;
 height: 600px;
 background: #cff;
}

0
zTree
zTree

引用来自“viviandew”的答案

引用来自“zTree”的答案

那你的问题不是 addNodes 呀,是 loadRole 的问题, 执行了 ajax,你是不是想在 success 里面给 zNodes 赋值? 如果是的话,那么你就应该吧init zTree 的代码也放在 success 里面!

具体原因请参考我的文章《这些年我们爱犯的弱智错误(菜鸟必看)》http://ztreeapi.iteye.com/blog/1423986  其中的No10 和 No11两点请着重看一下

可能是没有引入edit包的原因也可能是缓存的原因,已经可以添加了 ,我做了三棵树 左中右各一棵,左右都正常 唯有中间的 根节点和叶子节点都左对齐显示,不知道是不是css设置的原因还是什么,

.left {
 float: left;
 width: 30%;
 height: 600px;
 background: #ADD8E6;
 text-align: center;
}

.rhght {
 float: right;
 width: 30%;
 height: 600px;
 background: #B0E0E6;
}

.center {
 float: center;
 height: 600px;
 background: #cff;
}

利用 chrome 右键 审查元素,看看调试工具中的样式吧, css 干扰的情况很多,很难这里一下子都讲清楚。可以尝试着把部分css 屏蔽,然后逐个进行比较找到原因。
0
v
viviandew

引用来自“zTree”的答案

引用来自“viviandew”的答案

引用来自“zTree”的答案

那你的问题不是 addNodes 呀,是 loadRole 的问题, 执行了 ajax,你是不是想在 success 里面给 zNodes 赋值? 如果是的话,那么你就应该吧init zTree 的代码也放在 success 里面!

具体原因请参考我的文章《这些年我们爱犯的弱智错误(菜鸟必看)》http://ztreeapi.iteye.com/blog/1423986  其中的No10 和 No11两点请着重看一下

可能是没有引入edit包的原因也可能是缓存的原因,已经可以添加了 ,我做了三棵树 左中右各一棵,左右都正常 唯有中间的 根节点和叶子节点都左对齐显示,不知道是不是css设置的原因还是什么,

.left {
 float: left;
 width: 30%;
 height: 600px;
 background: #ADD8E6;
 text-align: center;
}

.rhght {
 float: right;
 width: 30%;
 height: 600px;
 background: #B0E0E6;
}

.center {
 float: center;
 height: 600px;
 background: #cff;
}

利用 chrome 右键 审查元素,看看调试工具中的样式吧, css 干扰的情况很多,很难这里一下子都讲清楚。可以尝试着把部分css 屏蔽,然后逐个进行比较找到原因。

thanks

返回顶部
顶部