Ztree + php infinite node recursive search

1. Preface

Let me briefly describe several principles and ideas of internship. In fact, there are many things to write about, and ideas are the most important.

1. Goal: Write a tree directory structure with infinite nodes, as shown below

Steps:

1. Download your plug-in ztree. Then place it in your project.

<script src="__PUBLIC__/js/jquery-1.4.4.min.js"></script>
<script src="__PUBLIC__/js/jquery.ztree.core-3.5.js"></script>

2. Related CSS

<link rel="stylesheet" href="__PUBLIC__/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="__PUBLIC__/css/zTree.css" type="text/css">

The above CSS and JS are subject to your own.

3. Directory structure DIV

<div class="content_wrap"  style="background:#666;">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
<div class="content-text" id="text"></div>

4. Code in your own js

<SCRIPT  src="__PUBLIC__/js/ztreeonload.js"></SCRIPT>

Related functions and configurations written in it!

//配置项
var setting = {
     isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  性  
     showLine : true,                  //是否显示节点间的连线  
     checkable : true,   
     callback: {
         onClick: zTreeOnClick      
     }
 };
 
 var zNodes;//数据变量
 
 //ajax提交数据，请求后台PHP处理返回出目录结构json数据
 $.ajax({
     url:"/admin.php/Ztree",
     type: "get",
     async: false,
     dataType:"json",  
     success: function (data) {
             //alert(data);
             zNodes=data;    //将请求返回的数据存起来
              //alert(zNodes);
     },
     error: function (){//请求失败处理函数  
         alert('请求失败');  
     },  
 })
 
 //初始化ztree目录结构视图！
 $(document).ready(function(){
     //alert("111");
     $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 });

5. Backend PHP recursive algorithm, searches the directory structure from the database and generates JSON data

Address: As in 4, [/admin.php/Ztree] requested by AJAX I am using the ThinkPHP framework here, so the url It looks like this, subject to your own interface file!

<?php
            //父节点数组
            $arr=array();
            $arr_str0 = array("name" =>&#39;函数库查询&#39;,&#39;children&#39;=>$this->SelectSon(1));       //父节点  Pid=1;
            $arr_str1 = array("name" =>&#39;数据库查询&#39;,&#39;children&#39;=>$this->SelectSon(2));       //父节点  Pid=2;
 
            array_push($arr, $arr_str0);
            array_push($arr, $arr_str1);//这里是2个父节点。
 
            echo(json_encode($arr)); //这是最后返回给页面，也就是返回给AJAX请求后所得的返回数据 JSON数据
？>

//This is just a method, one calls the SelectSon() method and returns an array collection! But recursion is used!

<?php
        //查找子节点        Pid=父节点ID
        private function SelectSon($Pid){
 
            $m=M(&#39;ztree&#39;);
 
            if(($info=$m->where("Pid=&#39;$Pid&#39;")->select())) //查找该父ID下的子ID
            {
                $data=array();
                for ($i=0; $i < count($info) ; $i++) 
                { 
                    $da=array("name" =>$info[$i][&#39;name&#39;],&#39;children&#39;=>$this->SelectSon($info[$i][&#39;id&#39;]));  //递归算法！
 
                    array_push($data, $da);//加入子节点数组
                };
 
                return $data;//一次性返回子节点数组，他们成为同级子节点。
            }
            else
            {
                return null;
            }
 
        }
?>

Note: Since I am using the thinkphp framework. So there are some differences in method calls. In pure PHP files, the idea should be the same,

The first thing is: write an array. An array of parent nodes.

Secondly: Write a method, the passed parameter is the ID of the parent node, query its child nodes, after querying the child nodes, continue to search for the child nodes of the child node recursively, until the final query is completed, return the array to Array of parent nodes on which the method is called. Then

echo(json_encode($arr));

transcode it into JSON and output it for AJAX asynchronous access to get JSON data.

After getting it, go back to the JS function code just now, directly initialize the tree directory structure, and pass its JSON data into OK.

Summary:

The main idea is divided into 2 steps. The first step is how to generate the directory. When testing first, you can use static data. Similar to

var node=[

 {name:'parent node',children:[{name:'child node',children:null},{name:'sibling child node',children:null} ]}

]

First, let’s analyze this string of data and see what patterns it has. You will find out. It's actually very regular. Infinite nodes actually mean that in each json, there are children, and there are also child nodes of the same level.

You first use fixed data to generate the directory structure

You can start to consider dynamically transmitting the directory structure data to the node. It is what we call AJAX request later. PHP gets JSON data. During PHP processing, I use a recursive algorithm to return JSON data. and completed. Directory Structure.

Oh right.

$m=M('ztree');

This code is used by thinkphp to instantiate the data operation object.

is used to query whether the node exists in the database. If there are child nodes, it will be returned to the child node array. If there are several, they will be added to the child node array, and the query is completed. Then return at once, they will become child nodes of the same level