不限层级树结构，点击某一节点复选框后，异步加载并递归展开节点直到没有子节点的功能实现（使用ztree）

最新推荐文章于 2022-04-18 14:51:52 发布

Yehea_22

最新推荐文章于 2022-04-18 14:51:52 发布

阅读量652

点赞数 3

分类专栏：插件使用文章标签： ztree 不限层级树异步加载完全展开子节点

本文链接：https://blog.csdn.net/Yehea_22/article/details/92657432

版权

插件使用专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1、先在页面上创建一个容器用来加载ztree

<body>
		<div>
		  	 <ul id="treeDemo" class="ztree"></ul>
		</div>
</body>

2、下面开始写脚本

<script type="text/javascript">
	var checkValue=true;//全局变量
	$(document).ready(function(){
		var zTreeObj;
		var mainID = $("#mainIdTd").html();
		//此处为ztree的基础配置
		var setting = {
				data: {	simpleData: { enable: true } },//使用简单数据格式
				view: {	showIcon: false },
				check: { 
					enable: true ,//使用复选框功能
					autoCheckTrigger: true,//自动关联勾选时触发oncheck等回调函数
					chkboxType: {"Y":"ps", "N":"s"}//勾选时影响父子节点，取消勾选时只影响子节点
				},
				async: {
					enable: true,
					//异步加载的url，查询指定节点的子节点集合
					url:"<%=basePath%>/queryDepNodesList.action",
					//当前节点即node.id作为url的参数，参数名为paDepId
					autoParam:["id=paDepId"],
					otherParam: ["mainId", mainID],
					dataFilter: dataFilter
				},
				callback: {
					onAsyncSuccess: zTreeOnAsyncSuccess,//异步加载完成调用
					onCheck: onCheck//复选框被点击时调用
				}
		}
		zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
	});
	//复选框点击回调，将选中节点的子/孙子……节点展开
	function onCheck(event, treeId, treeNode){
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		//给节点添加“被点击复选框”标记isOncheck=true
		treeNode.isOncheck=true;
		//获取节点的checked值，并保存到全局变量里
		checkValue=treeNode.checked;
		//展开节点，若子节点已经加载过则根据chkboxType: {"Y":"ps", "N":"s"}会自动展开子节点， 
		//若子节点还未加载，执行时会调用到异步加载的回调，在回调函数中进行展开
		zTree.expandNode(treeNode, true, false, false,false);
	};
	
	//异步加载回调,如果复选框被选中或者“被点击复选框”即isOncheck=true则默认展开节点
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg)  {
	    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
     	var nodes; 
	    if(null!=treeNode){
			nodes =treeNode.children;
	    }else{
	    	nodes = zTree.getNodes();
	    }
	    
    	if(null!=nodes){
	        for(var i=0;i<nodes.length;i++){
	        	//若节点被选中或者是因为被点击了复选框进来的，则展开节点
	        	if(nodes[i].checked||(null!=treeNode&&"isOncheck" in treeNode&&treeNode.isOncheck)){
	        		if(null!=treeNode&&"isOncheck" in treeNode&&treeNode.isOncheck){
	        			//将展开子节点的选中状态设置为与父节点一致
		        		zTree.checkNode(nodes[i],checkValue,false,false);
		        		//将子节点的isOncheck也设为true,则加载子节点的时候子节点也会被展开
			        	nodes[i].isOncheck=true;
	        		}
		            zTree.expandNode(nodes[i],true,false,false,false);//展开子节点
	        	}
	        }
    	}
    	//将父节点的isOncheck设为false
   	 	if(null!=treeNode){
	       	treeNode.isOncheck=false;
	    }
    }
	//将后台传来的数据转为ztree需要的简单数据结构
	function dataFilter(treeId, parentNode, json){
		var childNodeArr = new Array();
		var nodesStr= json.depNodesJson;
		var childNodeList = eval("("+nodesStr+")");
		for(var i =0;i<childNodeList.length;i++){
			if(null==childNodeList[i]){
				continue;
			}
			var idValue=childNodeList[i][0];
			var nameValue=childNodeList[i][1];
			var pIdValue=childNodeList[i][2]==null?0:childNodeList[i][2];
			var isParentValue=childNodeList[i][3]==null?false:true
			var checkedValue = childNodeList[i][4]==null?false:true;
			childNodeArr[i]={id:idValue,name:nameValue,pId:pIdValue,isParent:isParentValue,checked:checkedValue};
		}
		return childNodeArr;
	}

下面是效果图，页面加载的时候会把已勾选的节点完全展开（截图中已被折叠），然后人为点击某一节点也会将该节点完全展开
这是效果图，页面加载的时候会把已勾选的节点完全展开，然后认为点击某一节点也会将其完全展开

Yehea_22

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不限层级树结构，点击某一节点复选框后，异步加载并递归展开节点直到没有子节点的功能实现（使用ztree）

1、先在页面上创建一个容器用来加载ztree<body> <div> <ul id="treeDemo" class="ztree"></ul> </div></body>2、下面开始写脚本<script type="text/javascript"> var checkValue...
复制链接

扫一扫