ztree异步加载时勾选父节点自动勾选全部子节点

最新推荐文章于 2024-03-21 19:15:08 发布

食人鱼999

最新推荐文章于 2024-03-21 19:15:08 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文章标签： ztree

本文链接：https://blog.youkuaiyun.com/weixin_42656571/article/details/90770497

学习专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用ZTree实现的异步加载样本模板树的案例，详细展示了配置设置，包括启用异步加载、自定义节点参数、检查功能及回调函数。通过定时器延时加载，避免了数据量大时的性能瓶颈，确保了子节点的高效加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键代码：

//选择样本模板树
   var model_sample_ztree, model_sample_zNode;
   var modelsample_setting = {
           async: {
               enable: true,
               url:"admin/sample/modelSampleList",
               autoParam:["id","level=lv"]
           },
           check:{
                enable:true,
                chkboxType: {"Y":"ps", "N":"ps"}
            },
            data:{
               simpleData : {
                        enable : true,
                        idKey : "id", //id编号命名默认
                        pIdKey : "pid",//父id编号命名默认
                        rootPId : 0 //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                    }
            },
           callback:{
               onAsyncSuccess:zTreeOnAsyncSuccess,//树加载成功时的回调函数
           }
   };

加载成功的回调函数

/**
	* 加载成功的回调函数 
	* 树第一次加载成功则强制异步加载子节点
	* 展开其下面的子节点
	*/
	function zTreeOnAsyncSuccess(){
		//防止数据量过大，延迟加载
		 setTimeout(function(){		
		    var treeObj =  $.fn.zTree.getZTreeObj("ztree_modelsample");
		    var rootNodes = treeObj.transformToArray(treeObj.getNodes());
		    //循环判断该节点是否已加载子节点，是则进入下一次循环，否则加载子节点，确保加载子节点只加载一次，若加载多次会影响效率
		    for(var i=0; i<rootNodes.length; i++){
		        if(rootNodes[i].zAsync == false)
		            treeObj.reAsyncChildNodes(rootNodes[i], "refresh",true);    
		        else continue;
		    }
		  },1000);
	}