ztree实现异步树

心已赠人 2021-09-30 16:06 495阅读 0赞

先上效果图  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RoajE5OTE4MQ_size_16_color_FFFFFF_t_70][]  
数据库表设计，结构很简单，就不细说明每个字段的意思了，一眼就可以看出每个字段代表的意思

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;i<nodes.length;i++){
            	zTree.expandNode(nodes[i], true, false, false);//默认展开第一级节点
            }
        }
    }
           
    var filter = function(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;
    }
    
    var showRMenu = function(type, x, y) {
    	$("#rMenu ul").show();
        y += document.body.scrollTop;
        x += document.body.scrollLeft;
        rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
    }
    /**
     * 右键菜单
     */
    var OnRightClick = function(event, treeId, treeNode){
    	if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
    		zTree.cancelSelectedNode();
    		showRMenu("root", event.clientX, event.clientY);
    	} else if (treeNode && !treeNode.noR) {
    		zTree.selectNode(treeNode);
    		showRMenu("node", event.clientX, event.clientY);
    	}
    }
    
    /**
     * 隐藏右键菜单
     */
    var  hideRMenu = function() {
    	if (rMenu) rMenu.css({"visibility": "hidden"});
    }
    
    /**
     * 增加节点
     */
    var selectedNode;
    var addOrEdit = true;
    var addTreeNode = function() {
    	hideRMenu();
    	reset();
    	selectedNode = zTree.getSelectedNodes()[0];
    	$("#organize-add-or-update-modal").modal('show');
    	addOrEdit = true;
    }
    
    /**
     * 修改节点
     */
    var editTreeNode = function() {
    	hideRMenu();
    	reset();
    	selectedNode = zTree.getSelectedNodes()[0];
    	$("#organize-add-or-update-modal").modal('show');
    	$("#organize-form").setForm($.util.getNodeValue(zTree.getSelectedNodes()[0]));
    	addOrEdit = false;
    }
    
    /**
     * 移除节点
     */
    var removeTreeNode = function() {
    	hideRMenu();
    	var nodes = zTree.getSelectedNodes();
    	if (!nodes || nodes.length<=0) {
    		return $.util.alert('请选择一个节点!');
    	}
    	$.util.confirm('确认要删除？如果有子节点将一起删掉,请确认！',function(r){
    			if(r){
    				//后台数据移除
    				var params = {id:nodes[0].id};
    				$.util.ajaxReq('back/organize/deleteModel',params,function(success,result){
    					if(success && result.success){
    						//界面移除
    						zTree.removeNode(nodes[0]);
    					}else{
    						$.util.alert(result.message);
    					}
    				});
    			}
    	});
    }
    
    /**
     * 选中节点
     */
    var checkTreeNode = function(checked) {
    	var nodes = zTree.getSelectedNodes();
    	if (nodes && nodes.length>0) {
    		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<OrganizeModel> organizeAsyncTree(HttpServletRequest request,@RequestParam(name="id",defaultValue="0") Integer pId){
    		return organizeService.organizeAsyncTree(pId).getObj();
    	}

mybatis文件

<select id="listByPid" resultType="OrganizeModel" parameterType="java.lang.Integer" >
    	    select 
    	    <include refid="Base_Column_List" />
    	    from organize
    	    where 1=1
    	    and p_id =  #{pId,jdbcType=INTEGER}
      </select>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RoajE5OTE4MQ_size_16_color_FFFFFF_t_70]: /images/20210923/5ab33e5796f9483bbe9d2ba4ee2e98f2.png