1. Foreword
Let me briefly describe the principles and ideas of the internship. In fact, there are many things to write about, but 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.
<ol class="dp-c"><li class="alt"><span><span><script src=</span><span class="string">"__PUBLIC__/js/jquery-1.4.4.min.js"</span><span>></script> </span></span></li><li><span><script src=<span class="string">"__PUBLIC__/js/jquery.ztree.core-3.5.js"</span><span>></script> </span></span></li></ol>
2. Related CSS
<ol class="dp-css"><li class="alt"><span><span><link rel=</span><span class="string">"stylesheet"</span><span> href=</span><span class="string">"__PUBLIC__/css/zTreeStyle/zTreeStyle.css"</span><span> type=</span><span class="string">"text/css"</span><span>> </span></span></li><li><span><link rel=<span class="string">"stylesheet"</span><span> href=</span><span class="string">"__PUBLIC__/css/zTree.css"</span><span> type=</span><span class="string">"text/css"</span><span>> </span></span></li></ol>
The above CSS and JS are subject to your own.
3. Directory structure DIV
<ol class="dp-css"><li class="alt"><span><span><div class=</span><span class="string">"content_wrap"</span><span> style=</span><span class="string">"background:#666;"</span><span>> </span></span></li><li><span> <div class=<span class="string">"zTreeDemoBackground left"</span><span>> </span></span></li><li class="alt"><span> <ul id=<span class="string">"treeDemo"</span><span> class=</span><span class="string">"ztree"</span><span>></ul> </span></span></li><li><span> </div> </span></li><li class="alt"><span></div> </span></li><li><span><div class=<span class="string">"content-text"</span><span> id=</span><span class="string">"text"</span><span>></div> </span></span></li></ol>
4, code in separate js
<ol class="dp-c"><li class="alt"><span><span><SCRIPT src=</span><span class="string">"__PUBLIC__/js/ztreeonload.js"</span><span>></SCRIPT> </span></span></li></ol>
The related functions and configurations written in it!
<ol class="dp-c"><li class="alt"><span><span class="comment">//配置项</span><span> </span></span></li><li><span><span class="keyword">var</span><span> setting = { </span></span></li><li class="alt"><span> isSimpleData : true, <span class="comment">//数据是否采用简单 Array 格式，默认false 性 </span><span> </span></span></li><li><span> showLine : true, <span class="comment">//是否显示节点间的连线 </span><span> </span></span></li><li class="alt"><span> checkable : true, </span></li><li><span> callback: { </span></li><li class="alt"><span> onClick: zTreeOnClick </span></li><li><span> } </span></li><li class="alt"><span> }; </span></li><li><span> </span></li><li class="alt"><span> <span class="keyword">var</span><span> zNodes;</span><span class="comment">//数据变量</span><span> </span></span></li><li><span> </span></li><li class="alt"><span> <span class="comment">//ajax提交数据，请求后台PHP处理返回出目录结构json数据</span><span> </span></span></li><li><span> $.ajax({ </span></li><li class="alt"><span> url:<span class="string">"/admin.php/Ztree"</span><span>, </span></span></li><li><span> type: <span class="string">"get"</span><span>, </span></span></li><li class="alt"><span> async: false, </span></li><li><span> dataType:<span class="string">"json"</span><span>, </span></span></li><li class="alt"><span> success: <span class="keyword">function</span><span> (data) { </span></span></li><li><span> <span class="comment">//alert(data);</span><span> </span></span></li><li class="alt"><span> zNodes=data; <span class="comment">//将请求返回的数据存起来</span><span> </span></span></li><li><span> <span class="comment">//alert(zNodes);</span><span> </span></span></li><li class="alt"><span> }, </span></li><li><span> error: <span class="keyword">function</span><span> (){</span><span class="comment">//请求失败处理函数 </span><span> </span></span></li><li class="alt"><span> alert(<span class="string">'请求失败'</span><span>); </span></span></li><li><span> }, </span></li><li class="alt"><span> }) </span></li><li><span> </span></li><li class="alt"><span> <span class="comment">//初始化ztree目录结构视图！</span><span> </span></span></li><li><span> $(document).ready(<span class="keyword">function</span><span>(){ </span></span></li><li class="alt"><span> <span class="comment">//alert("111");</span><span> </span></span></li><li><span> $.fn.zTree.init($(<span class="string">"#treeDemo"</span><span>), setting, zNodes); </span></span></li><li class="alt"><span> }); </span></li></ol>5. Backend PHP recursive algorithm to find the directory structure from the database and generate JSON data
Address: As in 4, /admin.php/Ztree requested by AJAX] I am using the ThinkPHP framework here, so the url is like this, subject to your own interface file!
<ol class="dp-c"><li class="alt"><span><span><?php </span></span></li><li><span> <span class="comment">//父节点数组</span><span> </span></span></li><li class="alt"><span> <span class="vars">$arr</span><span>=</span><span class="keyword">array</span><span>(); </span></span></li><li><span> <span class="vars">$arr_str0</span><span> = </span><span class="keyword">array</span><span>(</span><span class="string">"name"</span><span> =></span><span class="string">'函数库查询'</span><span>,</span><span class="string">'children'</span><span>=></span><span class="vars">$this</span><span>->SelectSon(1)); </span><span class="comment">//父节点 Pid=1;</span><span> </span></span></li><li class="alt"><span> <span class="vars">$arr_str1</span><span> = </span><span class="keyword">array</span><span>(</span><span class="string">"name"</span><span> =></span><span class="string">'数据库查询'</span><span>,</span><span class="string">'children'</span><span>=></span><span class="vars">$this</span><span>->SelectSon(2)); </span><span class="comment">//父节点 Pid=2;</span><span> </span></span></li><li><span> </span></li><li class="alt"><span> <span class="func">array_push</span><span>(</span><span class="vars">$arr</span><span>, </span><span class="vars">$arr_str0</span><span>); </span></span></li><li><span> <span class="func">array_push</span><span>(</span><span class="vars">$arr</span><span>, </span><span class="vars">$arr_str1</span><span>);</span><span class="comment">//这里是2个父节点。</span><span> </span></span></li><li class="alt"><span> </span></li><li><span> <span class="func">echo</span><span>(json_encode(</span><span class="vars">$arr</span><span>)); </span><span class="comment">//这是最后返回给页面，也就是返回给AJAX请求后所得的返回数据 JSON数据</span><span> </span></span></li><li class="alt"><span>？> </span></li><li><span> </span></li><li class="alt"><span><span class="comment">//这里仅仅是一个方法，一个调用SelectSon()方法，返回一个数组集合！但其中用的是递归！</span><span> </span></span></li><li><span><?php </span></li><li class="alt"><span> <span class="comment">//查找子节点 Pid=父节点ID</span><span> </span></span></li><li><span> <span class="keyword">private</span><span> </span><span class="keyword">function</span><span> SelectSon(</span><span class="vars">$Pid</span><span>){ </span></span></li><li class="alt"><span> </span></li><li><span> <span class="vars">$m</span><span>=M(</span><span class="string">'ztree'</span><span>); </span></span></li><li class="alt"><span> </span></li><li><span> <span class="keyword">if</span><span>((</span><span class="vars">$info</span><span>=</span><span class="vars">$m</span><span>->where(</span><span class="string">"Pid='$Pid'"</span><span>)->select())) </span><span class="comment">//查找该父ID下的子ID</span><span> </span></span></li><li class="alt"><span> { </span></li><li><span> <span class="vars">$data</span><span>=</span><span class="keyword">array</span><span>(); </span></span></li><li class="alt"><span> <span class="keyword">for</span><span> (</span><span class="vars">$i</span><span>=0; </span><span class="vars">$i</span><span> < </span><span class="func">count</span><span>(</span><span class="vars">$info</span><span>) ; </span><span class="vars">$i</span><span>++) </span></span></li><li><span> { </span></li><li class="alt"><span> <span class="vars">$da</span><span>=</span><span class="keyword">array</span><span>(</span><span class="string">"name"</span><span> =></span><span class="vars">$info</span><span>[</span><span class="vars">$i</span><span>][</span><span class="string">'name'</span><span>],</span><span class="string">'children'</span><span>=></span><span class="vars">$this</span><span>->SelectSon(</span><span class="vars">$info</span><span>[</span><span class="vars">$i</span><span>][</span><span class="string">'id'</span><span>])); </span><span class="comment">//递归算法！</span><span> </span></span></li><li><span> </span></li><li class="alt"><span> <span class="func">array_push</span><span>(</span><span class="vars">$data</span><span>, </span><span class="vars">$da</span><span>);</span><span class="comment">//加入子节点数组</span><span> </span></span></li><li><span> }; </span></li><li class="alt"><span> </span></li><li><span> <span class="keyword">return</span><span> </span><span class="vars">$data</span><span>;</span><span class="comment">//一次性返回子节点数组，他们成为同级子节点。</span><span> </span></span></li><li class="alt"><span> } </span></li><li><span> <span class="keyword">else</span><span> </span></span></li><li class="alt"><span> { </span></li><li><span> <span class="keyword">return</span><span> null; </span></span></li><li class="alt"><span> } </span></li><li><span> </span></li><li class="alt"><span> } </span></li><li><span>?> </span></li></ol>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.
Second: 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 An array of parent nodes given to the calling method. Then
<ol class="dp-c"><li class="alt"><span><span class="func">echo</span><span>(json_encode(</span><span class="vars">$arr</span><span>)); </span></span></li></ol>
Convert it to 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 two steps. The first step is how to generate the directory. When testing first, you can use static data. Similar to
<ol class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> node=[ </span></span></li><li><span> {name:<span class="string">'父节点'</span><span>,children:[{name:</span><span class="string">'子节点'</span><span>,children:null},{name:</span><span class="string">'同级子节点'</span><span>,children:null}]} </span></span></li><li class="alt"><span>] </span></li><li><span> </span></li><li class="alt"><span>先分析一下，这串数据，他有什么规律。你就会发现。其实很有规律。无限节点，其实就是每个json中，有children，而且 </span></li><li><span>还有同级子节点。 </span></li></ol>You first use fixed data to generate the directory structure
You can start to consider dynamically transmitting directory structure data to node. It is what we call AJAX request later. PHP gets JSON data,
In PHP processing, I use a recursive algorithm to return JSON data. and completed. Directory structure.
Oh right.
<ol class="dp-c"><li class="alt"><span><span class="vars">$m</span><span>=M(</span><span class="string">'ztree'</span><span>); </span></span></li></ol>
This code is used by thinkphp to instantiate the data operation object.
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 once, and they will become child nodes of the same level.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
