Detailed examples of the use of zTree jQuery tree plug-in-JS Tutorial-php.cn

The project needs to display the data returned by the background in the form of a tree view; and implement clicking on the node to add the node information to the ul on the right; it will be obtained and used after subsequent submission; the zTree plug-in that can realize asynchronous loading of node information was selected, and the fact is that It proves that this plug-in is powerful enough to meet almost all needs; when I first came into contact with it, I read many people’s sharing, and combined with the official API documentation, finally realized the function. Now I will also share the summary of my learning. Effect introduction; In addition to the default effect of zTree ; Use the API to add some practical operations; including accordion effect; click on the parent node to expand the effect; click on the node text associated check box effect; first-level child node number display effect. This article brings you an article about the zTree jQuery tree plug-in Use (explanation with examples). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Externally introduced resources

Copy after login

html part of the code

已选择

Copy after login

css code

ul,li,body{ margin: 0; padding: 0; } .ztree li span.node_name { font-size: 16px; } .box{ width: 500px; margin:10px auto; border:3px solid #ccc; padding: 20px; border-bottom: none; } #treeDemo{ width: 200px; display: inline-block; background-color: #f1f1f1; min-height: 200px; } #ulright{ width: 200px; margin-left: 50px; min-height: 200px; border:1px solid #ccc; display: inline-block; vertical-align: top; background-color: #eeeee8; } #ulright li{ width: 100%; height: 30px; list-style: none; line-height: 30px; margin-bottom: 3px; background-color: #00b6ba; padding-left: 10px; box-sizing: border-box; } /**/ .ztree li a.curSelectedNode{ background-color: transparent; border:#00b6ba; } .ztree li span.node_name{ font-size: 18px; line-height: 18px; color: #000; } .ztree li a{ padding: 5px; vertical-align: middle; } .ztree li a:hover{ text-decoration: none; } .ztree li span.button.chk{ margin: 9px 3px; }

Copy after login

js code

//递归找到所有节点(非父节点) function getAllChildrenNodes(treeNode,result){ if (treeNode.isParent) { var childrenNodes = treeNode.children; if (childrenNodes) { for (var i = 0; i < childrenNodes.length; i++) { if(!childrenNodes[i].children){ result.push(childrenNodes[i].name); } result = getAllChildrenNodes(childrenNodes[i], result); } } } return result; } var parames = 3; //zTree的所有配置 var setting = { //zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。 treeId:"", //zTree 容器的 jQuery 对象，主要功能：便于操作,内部参数,不可修改 treeObj:null, //异步请求数据配置;当父节点没有子节点时;点击此父节点会触发请求 async:{ //打开此功能 enable: true, url:"./zTreeDemoV9.0SimpleFromV10.0.php", type:"post", //发送的父级id的字段定义;如修改,遵循格式autoParam: ["id=parentId"] autoParam: ["id"], //其他需要提交的参数["name","topic","key","ss"]转换后格式为name=topic&key=ss otherParam:["json",parames || 1,"test","2"], dataType:"json", contentType: "application/x-www-form-urlencoded", //ajax请求后的数据预处理函数 dataFilter: function(treeId,parentNode,responseData){ for(var i=0;i("+count+")"); }, //父节点展开时的事件 onExpand: function(event, treeId, treeNode){ //zTree对象 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取点击的id var nowId = treeNode.id; //获取所有节点 var allNodes = zTree.getNodes(); //获取点击节点的层级 var level = treeNode.level; //定义过滤函数;获取节点层级与点击节点层级相同并且为父节点的节点 function filter(node) { return (node.level == treeNode.level && node.isParent); } //获得点击节点同级的父节点的集合 var sameLevelNodes = zTree.getNodesByFilter(filter); //遍历同级节点集合 for(var i=0;i"); addLi.find("span").text(treeNode.name); addLi.animate({ width:"100%", height:"30" },400) addLi.appendTo($("#ulright")); //如果点击的节点存在connect字段;判断复选框状态加入到右侧ul或删除 if(treeNode.connect){ //遍历右侧li,如果选中的已经存在;return for(var i=0;i"); addLi.find("span").text(treeNode.connect); addLi.animate({ width:"100%", height:"30" },400) addLi.appendTo($("#ulright")); } //将被勾选的节点背景颜色更改 $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","#00b6ba"); //非选中状态,删除 }else{ //将右侧的次节点对应的li删除 $("#ulright").find("li[title="+treeNode.name+"]").animate({ width:"0%", height:"0" },400,function(){ $("#ulright").find("li[title="+treeNode.name+"]").remove(); }) //取消此节点的背景颜色 $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor",""); } //选中的是父节点;获取所有子节点(非父节点),判断复选框状态加入到右侧ul或删除 }else{ //调用递归函数;获取所有非父级子节点数组集合 var addNodesArray = getAllChildrenNodes(treeNode,[]); //是选中状态,加入到右侧ul if(treeNode.checked){ //定义存储右侧li的数组 var rightLiArray = []; $("#ulright li").each(function(i,v){ rightLiArray.push($(v).attr("title")) }) rightLiArray = rightLiArray.slice(1); //遍历勾选的数组集合 for(var i=0;i"+addNodesArray[i]+""); addLi.animate({ width:"100%", height:30 },400) addLi.appendTo($("#ulright")); } //将节点背景颜色修改 $("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","#00b6ba"); } //是非选中状态,删除 }else{ //遍历节点,执行删除操作 for(var i=0;i
        
         Copy after login

Backend php code; I am pure The front-end and back-end code will only be written simply;


        
         Copy after login

Most of the js code has comments; detailed APIs can be viewed on the zTree official website and the official API documentation must be entered. The code needs to be run in a server environment;

Final chestnut renderings

Related recommendations:

Detailed examples of jQuery using ztree to implement tree tables

ztree in jquery implements right-click collection function

Sharing the use of zTree tree plug-in in jQuery

The above is the detailed content of Detailed examples of the use of zTree jQuery tree plug-in. For more information, please follow other related articles on the PHP Chinese website!