读取数据库数据 生成ztree树 并提供增删改

 

首先   这几个主要的js和css要引入 其他静态文件可能少标  就自己调试吧

接下来 只要设置树就行了 

function createTree(){
	
	var setting = {
			edit: {
				enable : true,
				editNameSelectAll : true
				},
			async: {
		        enable: true,
		        autoParam: ["id"],
		        url: home_url+"/admin/datamaintenance/standardlaw/getTree",
		        dataFilter: filter
		    },
			view: {  
				expandSpeed: "",  
                addHoverDom: addHoverDom,  
                removeHoverDom: removeHoverDom,
		        dblClickExpand: false,
		        selectedMulti: false
		    }, 
			check: {
				enable: true,
				chkStyle: "radio",
			},
			data: {
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "pid"
				},
				key : {
	                name : "name",
	            }
			},
			callback:{
				beforeRemove: zTreeBeforeRemove,  //用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
				beforeRename: zTreeBeforeRename,  //用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
				onRemove: zTreeOnRemove,
				onRename: zTreeOnRename,
				onAsyncSuccess:zTreeOnAsyncSuccess
				
			},
		    showLine : true,//是否显示节点间的连线
			expandSpeed : "fast", //设置 zTree节点展开、折叠时的动画速度或取消动画(三种默认定义："slow", "normal", "fast")或 表示动画时长的毫秒数值(如：1000)
		};
	   function zTreeBeforeRemove(treeId, treeNode){
		   console.log(treeNode);
		   if (treeNode.id != "") {
			   if (treeNode.id == 0) {
				   if (treeNode.pid != 0) {
					   alertDiag("根节点不能删除!");
					   return false;
				   }
			   }
		   }
		   
	   }
	   
	   function zTreeBeforeRename(treeId, treeNode){
		  
	   }
	   
	   function zTreeOnRemove(event, treeId, treeNode) {
		   if (!(treeNode.id == 0 && treeNode.pid == 0)) {
			   removeNode(treeNode.id,treeNode.pid);
		   }
		  
		}
	   
	   function zTreeOnRename(event, treeId, treeNode, isCancel) {
			editNodeName(treeNode.id,treeNode.pid,treeNode.name);
		}
	   
	   function editNodeName(id,pid,name){
		   $.ajax({
			   url: home_url+"/admin/datamaintenance/standardlaw/ztree/editProjName",
			   data:{
				   id:id,
				   pid:pid,
				   name:name
			   },
			   type:'GET',
			   success:function(data){
				   if (data.state.value == 0) {
					   alertDiag("编辑成功!",function(){
						   $.fn.zTree.init($("#treeDemo"), setting);
					   });
				 }else{
					 alertDiag(data.content,function(){
						 $.fn.zTree.init($("#treeDemo"), setting);
					 });
				 }
			   }
		   })
	   }
	   function removeNode(id,pid){
		   $.ajax({
			   url: home_url+"/admin/datamaintenance/standardlaw/ztree/delProj",
			   type:'GET',
			   data:{
				   id:id,
				   pid:pid
				   },
			   success:function(data){
				   if (data.state.value == 0) {
					   alertDiag("删除成功!",function(){
						   $.fn.zTree.init($("#treeDemo"), setting);
					   });
				   }else{
					   alertDiag(data.content,function(){
						 
						   $.fn.zTree.init($("#treeDemo"), setting);
					   });
					   
				   }
			   }
		   })
	   }
	   
	   //ajax加载之后过滤
	   function filter(treeId, parentNode, childNodes) {
	   	if (!childNodes) return null;
	   	for (var i=0, l=childNodes.length; i<l; i++) {
	   	    childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
	   	}
	   	return childNodes;
	   }
	   //初始化树
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting);
		});
		
		//异步展开树
		function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		    if(treeNode==null){
			    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				nodes = zTree.getNodes();
				for (var i=0, l=nodes.length; i<l; i++) {
				    zTree.expandNode(nodes[i], true, false, false);
				}
				asyncNodes(zTree.getNodes());
				if (!goAsync) {
				    curStatus = "";
				}
			}
		};
			
		function asyncNodes(nodes) {
			if (!nodes) return;
			curStatus = "async";
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			for (var i=0, l=nodes.length; i<l; i++) {
			    if (nodes[i].isParent && nodes[i].zAsync) {
			        asyncNodes(nodes[i].children);
			    } else {
			        goAsync = true;
			        zTree.reAsyncChildNodes(nodes[i], "refresh", true);
			    }
			}
		}
		
		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 () {
            	
            	if (!treeNode.isParent) {
            		alertDiag("请在上一级目录上添加!");
            		return false;  
				}
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
                console.log(treeNode);
                console.log(newCount);
                zTree.addNodes(treeNode, { id: "", parentid: treeNode.id, name: "new node" + (treeNode.id) });  
                return false;  
            });  
        }; 
        
        function removeHoverDom(treeId, treeNode) {  
            $("#addBtn_" + treeNode.tId).unbind().remove();  
        }; 
}

 

我返回到页面的是一个model  大家也可以自定义

public class ZtreeModel {

	private Long id;
	private Long pid;
	private String name;
	private Byte type;
    private boolean open;
    private boolean isParent;
	
	@Override
	public String toString() {
		StringBuffer sb = new StringBuffer();
		sb.append("{id:\"").append(id)
		.append("\",pId:\"").append(pid)
		.append("\",name:\"").append(name)
		.append("\",type:\"").append(type)
		.append("\",open:\"")
        .append(open)
        .append("\"}");
		return sb.toString();
	}

...........................

这是一个比较完整的例子，只要有数据接口，这样显示是没问题的。接下来的回调函数大家自由发挥咯~