Detailed examples of the use of zTree jQuery tree plug-in

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

<link>
<script></script>
<script></script>

html part of the code

<p>
    </p>

    

      
• 已选择
    

  

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;
  }

js code

//递归找到所有节点(非父节点)
function getAllChildrenNodes(treeNode,result){
   if (treeNode.isParent) {
    var childrenNodes = treeNode.children;
    if (childrenNodes) {
      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<samelevelnodes.length><span></span>");
          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<rightli.length><span></span>");
              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.length><span>"+addNodesArray[i]+"</span>");
              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<addnodesarray.length var><p>Backend php code; I am pure The front-end and back-end code will only be written simply;</p>
<pre class="brush:php;toolbar:false"><?php $pId = $_POST[&#39;id&#39;];

if($pId == 4){
  $array = array(&#39;{"name":"数据表_一","id":"1_1","pid":"0"}&#39;,&#39;{"name":"数据表_二","id":"1_2","pid":"0"}&#39;,&#39;{"name":"数据表_三","id":"1_3","pid":"0"}&#39;,&#39;{"name":"数据表_四","id":"1_4","pid":"0"}&#39;,&#39;{"name":"数据表_五","id":"1_5","pid":"0"}&#39;);
}else if($pId == 1){
  $array = array(&#39;{"name":"测试表_一","id":"2_1","pid":"1"}&#39;,&#39;{"name":"测试表_二","connect":"测试表_一","id":"2_2","pid":"1"}&#39;,&#39;{"name":"测试表_三","id":"2_3","pid":"1"}&#39;,&#39;{"name":"测试表_四","id":"2_4","pid":"1"}&#39;,&#39;{"name":"测试表_五","id":"2_5","pid":"1"}&#39;);
}else if($pId == 2){
  $array = array(&#39;{"name":"信息表_一","id":"3_1","pid":"3"}&#39;,&#39;{"name":"信息表_二","id":"3_2","pid":"3"}&#39;,&#39;{"name":"信息表_三","id":"3_3","pid":"3"}&#39;,&#39;{"name":"信息表_四","id":"3_4","pid":"3"}&#39;,&#39;{"name":"信息表_五","id":"3_5","pid":"3"}&#39;,&#39;{"name":"信息表_五_一","id":"3_5_1","pid":"3_5"}&#39;,&#39;{"name":"信息表_五_二","id":"3_5_2","pid":"3_5"}&#39;,&#39;{"name":"信息表_三_一","id":"3_3_1","pid":"3_3"}&#39;,&#39;{"name":"信息表_三_二","id":"3_3_2","pid":"3_3"}&#39;,&#39;{"name":"信息表_三_三","id":"3_3_3","pid":"3_3"}&#39;);
}else if($pId == 3){
  $array = array(&#39;{"name":"作废表_一","id":"4_1","pid":"3"}&#39;,&#39;{"name":"作废表_二","id":"4_2","pid":"3"}&#39;,&#39;{"name":"作废表_三","id":"4_3","pid":"3"}&#39;);
}

echo json_encode($array);

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!