ztree生成树结构插件的使用

官方文档：http://www.treejs.cn/v3/api.php
官方案例：http://www.treejs.cn/v3/demo.php#_101
官方案例代码下载地址：
这个地址是在官方案例界面右下角

官方有使用案例，这里就不多说了
接下来就是我自己的使用效果：

	<SCRIPT type="text/javascript">
		
		var setting = {
				data: {
					//true / false 分别表示 使用 / 不使用 简单数据模式 
					simpleData: {
						enable: true
					}
				},
				//从后台获取数据
			 	async: {
		            enable: true,
		            url:"modelStrucController/getData.do?version=${version}&modelCode=${modelCode}&type=${type}",
		            autoParam:["id"],//自动提交的参数（可提交多个）
//		            otherParam:{"otherParam":"zTreeAsyncTest"}
		            dataFilter: filter  //异步返回后经过Filter
		        },
 
				 //页面上的显示效果，节点的增删改按钮
			    view: {
			        addHoverDom: addHoverDom, //当鼠标移动到节点上时，显示用户自定义控件
			        removeHoverDom: removeHoverDom //离开节点时的操作
			      //  fontCss: getFontCss //个性化样式
			    },
			//设置开启编辑效果
			edit: {
				enable: true,//单独设置为true时，可加载修改、删除图标
				showRemoveBtn: true,
				showRenameBtn: true
			},
			//设置回调函数，每一个回调函数得加入这里才起效
			callback: {
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				onRename:onRename,
				onRemove:onRemove,
				onDrop:zTreeOnDrop,
				onDrag:zTreeOnDrag,
				onDblClick: zTreeOnDblClick, //双击
				beforeRemove: zTreeBeforeRemove
			}
		};
		//点击删除前触发
		function zTreeBeforeRemove(treeId, treeNode) {
			var root = treeNode.isRoot;
			if(root == true){
				console.log("根节点，不能删除！！")
				$.messager.alert('Warning','根节点，不能删除！！');
				//tip("根节点，不能删除！！")
				return false;
			}
			
		}
		//双击触发
		function zTreeOnDblClick(event, treeId, treeNode) {
		  //  alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
		//console.log($("#tree").val())
		var root = treeNode.isRoot;
		if(root == true){
			return
		}
		//var iframe = $("#myIframe")[0].contentWindow;
		//console.log(iframe.$("#indexName").val())
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		var nodes = treeObj.transformToArray(treeObj.getNodes());
		console.log(nodes)
			$.post("modelStrucController/getCode.do",{id:treeNode.id},function(result){
				//console.log(result)
				if(result != "null"&& result != ""){
					//console.log("sss")
					$("#myIframe").attr("src","indexModelController.do?goUpdate&indexCode="+result);
					
				}else{
					$("#myIframe").attr("src","");
				}
				//tip(result)
	    });
		};
		//刚拖住的时候触发
		function zTreeOnDrag(event, treeId, treeNodes) {
		    //alert(treeNodes.length);
		   // console.log(event)
		   // console.log(event)
		   console.log("OnDrag")
		    console.log(treeNodes)
		    
		};
		//拖拽松开鼠标触发  ， moveType 移动后的位置，prev前面，next下面，inner里面
		function zTreeOnDrop(event, tId, treeNodes, targetNode, moveType) {
			
			console.log("OnDrop")
			
			console.log(tId)
			console.log(treeNodes)
			console.log(targetNode)
			console.log(moveType)
			switch (moveType) {
			case "prev":
				//console.log("1")
				/* for(var index in treeNodes){
					$.post("modelStrucController/updateData.do",{id:treeNodes[index].id,name:treeNodes[index].name,pId:targetNode.pId},function(result){
						console.log(result)
						tip(result)
			    });
				}
				
				break; */
			case "next":
				//console.log("2")
				for(var index in treeNodes){
					$.post("modelStrucController/updateData.do",{id:treeNodes[index].id,name:treeNodes[index].name,pId:targetNode.pId},function(result){
					console.log(result)
					tip(result)
		    });
				}
				break;
			case "inner":
				//console.log("3")
				for(var index in treeNodes){
				$.post("modelStrucController/updateData.do",{id:treeNodes[index].id,name:treeNodes[index].name,pId:targetNode.id},function(result){
					console.log(result)
					tip(result)
		    });
				}
				break;
			default:
				console.log("4")
				break;
			}
		  //  alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
		};
		//重命名节点
		function onRename(e, treeId, treeNode){
			
			console.log("onRename")
			//console.log(treeId)
			//console.log(treeNode)
			$.post("modelStrucController/updateData.do?version=${version}&modelCode=${modelCode}&type=${type}",{id:treeNode.id,name:treeNode.name,
				indexName:treeNode.name,/* version:treeNode.version,type:treeNode.type,modelCode:treeNode.modelCode, */
				pId:treeNode.pId},function(result){
					//console.log(result)
					var json = JSON.parse(result)
					console.log(json.attributes.code)
				//	treeNode.code=json.attributes.code
			console.log(result)
			tip(json.msg)
    });
			//console.log(isCancel)
		}
		//删除节点
		function onRemove(e, treeId, treeNode) {
			
		    //需要对删除做判定或者其它操作，在这里写~~
		  console.log(treeNode)
		  $.post("modelStrucController.do?doDel&version=${version}",{id:treeNode.id,name:treeNode.name,pId:treeNode.pId},function(result){
				console.log(result)
				var json = JSON.parse(result)
				tip(json.msg)
	    });
		}

		
		
		/* 获取返回的数据，进行预操作，treeId是treeDemo,异步加载完之后走这个方法，responseData为后台返回数据  */
	    function filter(treeId, parentNode, responseData) {
//	        responseData = responseData.jsonArray;
			console.log("filter")
	        if (!responseData){
	            return null;
	        }
	        return responseData;
	    }

	    var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("tree");
                zTree.addNodes(treeNode, {id:guid().replaceAll("\\-",""), pId:treeNode.id, name:"new node" + (newCount++),
                	target:"myIframe",version:"${version}",type:"${type}"});
                return false;
            });
        };
        //生成uuid
        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                return v.toString(16);
            });
        }
        
      //replaceAll的另一种写法，其实都差不多
        String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {  
            if (!RegExp.prototype.isPrototypeOf(reallyDo)) {  
                return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith);  
            } else {  
                return this.replace(reallyDo, replaceWith);  
            }  
        } 

        
        function uuid(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [], i;
            radix = radix || chars.length;
         
            if (len) {
              // Compact form
              for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
            } else {
              // rfc4122, version 4 form
              var r;
         
              // rfc4122 requires these characters
              uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
              uuid[14] = '4';
         
              // Fill in random data.  At i==19 set the high bits of clock sequence as
              // per rfc4122, sec. 4.1.5
              for (i = 0; i < 36; i++) {
                if (!uuid[i]) {
                  r = 0 | Math.random()*16;
                  uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                }
              }
            }
         
            return uuid.join('');
        }
        
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };

		//实现树的数据结构，也就是后来把list数据封装成这样的结构即可展现树
		var zNodes =[
		 			{ id:1, pId:0, name:"zTree Home", url:"http://www.treejs.cn/", target:"_blank"},
					{ id:2, pId:0, name:"zTree in Google", url:"http://code.google.com/p/jquerytree/", target:"_blank"},
					{ id:3, pId:0, name:"zTree in Iteye", url:"http://ztreeapi.iteye.com/", target:"_blank"},
					{ id:4, pId:0, name:"Nothing...", url:"", target:"_blank", click:"alert('我是不会跳转的...');"}
				];

		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(){
		//设置树的初始化代码
			 zTree=$.fn.zTree.init($("#tree"), setting);
			/*  var node = zTree.getNodes();
			 var nodes = zTree.transformToArray(node);
			var tree = $.fn.zTree.getZTreeObj('tree');
			console.log(node)
			console.log(nodes)
			console.log(tree) */
		});
		
	</SCRIPT>


<div class="easyui-panel" >
	<div class=" left" >
		<ul id="tree" class="ztree" style="width:30%"></ul>
	</div>
	<div class="right " style="width:70%;height: 100%">
	<iframe name="myIframe"  id="myIframe" style="width:80%;height: 100%" frameBorder="0"></iframe> 
	</div>
</div>

效果：