ztree实现异步树

先上效果图

数据库表设计，结构很简单，就不细说明每个字段的意思了，一眼就可以看出每个字段代表的意思

CREATE TABLE `organize` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `NAME` varchar(255) DEFAULT NULL,
  `DESCRIPTION` varchar(500) DEFAULT NULL,
  `P_ID` int(11) DEFAULT NULL,
  `IS_PARENT` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`ID`)
)

前端代码部分，需要引入zTreeStyle.css和jquery.ztree.all-3.5.min.js文件

		

			
增加节点
			
修改节点
			
删除节点
			
选中节点
			
取消节点
			
刷新
		
	

js代码

var orgId;
var onClick = function(e, treeId, treeNode) {
    var nodes = zTree.getSelectedNodes();//
    if (nodes.length > 0 && nodes[0]) {
    	zTree.reAsyncChildNodes(nodes[0], "refresh");// 刷新节点
    }
    //点击选中
    zTree.checkNode(nodes[0], true, true);
    zTree.updateNode(nodes[0]);
    orgId =  treeNode.id;
    refresh();
};

var zTreeOnAsyncSuccess = function(event, treeId, treeNode, msg){
    	var nodes = zTree.getNodes();
       if (nodes.length>0) {
        for(var i=0;i0) {
		zTree.checkNode(nodes[0], checked, true);
	}
	hideRMenu();
}

var setting = {
		check : {
			enable : true
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",//节点id
				pIdKey : "pId",//父节点id
				rootPId: 0
			}
		},
		async : {
	            enable : true,
	            url : "back/organize/organizeAsyncTree",
	            autoParam : [ "id"],
	            dataFilter: filter
	        },
		callback : {
			onClick : onClick,
			onRightClick: OnRightClick
		}
};

var buildTree = function(pId){
	var zNodes = {};
	var params = {pId:pId};
	$.util.ajaxReq('back/organize/organizeAsyncTree',params,function(success,result){
		if(success){
			 zNodes = result;
		}else{
			$.util.alert(result.message);
		}
	});
	return zNodes;
};

//新增界面重置
var reset = function(){
	$("#organize-form")[0].reset();
};

var initTree = function(){
	zTree = $.fn.zTree.init($("#orgTree"), setting,buildTree(0));
	var rootNode_0 = zTree.getNodeByParam('pId',0,null);
	zTree.expandNode(rootNode_0, true, false, false, false);
}

/**
 * 刷新树
 */
var resetTree = function() {
	hideRMenu();
	initTree();
}

var zTree, rMenu;
$(function(){
	initTree();
	rMenu = $("#rMenu");
});

后端代码

	/**
	 * 异步加载树
	 */
	@RequestMapping("/organizeAsyncTree")
	@ResponseBody
	public List organizeAsyncTree(HttpServletRequest request,@RequestParam(name="id",defaultValue="0") Integer pId){
		return organizeService.organizeAsyncTree(pId).getObj();
	}

mybatis文件

    
	    select 
	    
	    from organize
	    where 1=1
	    and p_id =  #{pId,jdbcType=INTEGER}