php 无限分类实现 layui tree

　　最近做一个东西，要用到树形菜单。之前一直用的是ztree，于是想换个插件用用。于是就在寻找好用的插件。之前一直关注layui项目，现在layui也已经发布了，http://www.layui.com/项目地址，大家感兴趣的可以了解一下。

　　其中的一个插件就是 tree插件，我们称之为 layui-tree吧。

　　

　　还是挺美观的，那我们就看看，怎么实现这个tree吧。　

 1 layui.use('tree', function(){
 2   var tree = layui.tree({
 3     elem: '#demo' //指定元素
 4     //,check: 'checkbox' //勾选风格
 5     ,skin: 'as' //设定皮肤
 6     //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
 7     ,drag: true
 8     ,click: function(item){ //点击节点回调
 9       console.log(item)
10     }
11     ,nodes: nodes //这里传入指定的nodes数据即可
12   });
13 
14 });

　　那这里面的nodes数据是什么样子呢？官网也有给定的格式。　

 1 [ //节点
 2   {
 3     name: '常用文件夹'
 4     ,id: 1
 5     ,alias: 'changyong'
 6     ,children: [
 7       {
 8         name: '所有未读'
 9         ,id: 11
10         ,href: 'http://www.layui.com/'
11         ,alias: 'weidu'
12       }, {
13         name: '置顶邮件'
14         ,id: 12
15       }, {
16         name: '标签邮件'
17         ,id: 13
18       }
19     ]
20   }, {
21     name: '我的邮箱'
22     ,id: 2
23     ,spread: true
24     ,children: [
25       {
26         name: 'QQ邮箱'
27         ,id: 21
28         ,spread: true
29         ,children: [
30           {
31             name: '收件箱'
32             ,id: 211
33             ,children: [
34               {
35                 name: '所有未读'
36                 ,id: 2111
37               }, {
38                 name: '置顶邮件'
39                 ,id: 2112
40               }, {
41                 name: '标签邮件'
42                 ,id: 2113
43               }
44             ]
45           }, {
46             name: '已发出的邮件'
47             ,id: 212
48           }, {
49             name: '垃圾邮件'
50             ,id: 213
51           }
52         ]
53       }, {
54         name: '阿里云邮'
55         ,id: 22
56         ,children: [
57           {
58             name: '收件箱'
59             ,id: 221
60           }, {
61             name: '已发出的邮件'
62             ,id: 222
63           }, {
64             name: '垃圾邮件'
65             ,id: 223
66           }
67         ]
68       }
69     ]
70   }
71 ]

　　格式就是子孙的节点，放到父节点的children下，那php怎么将存入数据库的数据整理成这个样子呢？第一次想到的就是利用递归完成子孙树，但是简单的递归很难加入children这个子节点。下面介绍一下，我怎么来处理：

　　 处理数据程序  data.php

 1 <?php
 2 
 3 $data = [
 4     [ 'id' => 1, 'name' => '江苏省', 'pid' => 0],
 5     [ 'id' => 2, 'name' => '徐州市', 'pid' => 1],
 6     [ 'id' => 3, 'name' => '睢宁县', 'pid' => 2],
 7     [ 'id' => 4, 'name' => '双沟镇', 'pid' => 3],
 8     [ 'id' => 5, 'name' => '王集镇', 'pid' => 3],
 9     [ 'id' => 6, 'name' => '铜山区', 'pid' => 2],
10     [ 'id' => 7, 'name' => '张集镇', 'pid' => 6],
11     [ 'id' => 8, 'name' => '大黄山镇', 'pid' => 6],
12     [ 'id' => 9, 'name' => '南京市', 'pid' => 1],
13     [ 'id' => 10, 'name' => '江宁区', 'pid' => 9],
14     [ 'id' => 11, 'name' => '鼓楼区', 'pid' => 9],
15     [ 'id' => 12, 'name' => '浙江省', 'pid' => 0],
16     [ 'id' => 13, 'name' => '杭州市', 'pid' => 12],
17     [ 'id' => 14, 'name' => '西湖区', 'pid' => 13]    
18 ];
19 
20 $res = [];
21 $tree = [];
22 
23 //整理数组
24 foreach( $data as $key=>$vo ){
25     $res[$vo['id']] = $vo;
26     $res[$vo['id']]['children'] = [];
27 }
28 unset( $data );
29 
30 //查询子孙
31 foreach( $res as $key=>$vo ){
32     if( $vo['pid'] != 0 ){
33         $res[$vo['pid']]['children'][] = &$res[$key];
34     }    
35 }
36 
37 //去除杂质
38 foreach( $res as $key=>$vo ){
39     if( $vo['pid'] == 0 ){
40         $tree[] = $vo;
41     }
42 }
43 unset( $res );
44 
45 $tree = json_encode( $tree );

　　注意 33 行的 &$tree[$key] 这句话。这个是一次循环实现无限极分类的关键所在。以地址的形式操作数组。不理解的可以分开打印怎么实现的。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 6 <title>树模块 - layui</title>
 7 <link rel="stylesheet" href="./layui/css/layui.css">
 8 <style>
 9 body{padding: 50px 100px;}
10 </style>
11 </head>
12 <body>
13 <?php require 'data.php'; ?>
14 
15 <ul id="demo"></ul>
16 
17 <script src="./layui/layui.js"></script>
18 <script>
19 
20 layui.use('tree', function(){
21   var tree = layui.tree({
22     elem: '#demo' //指定元素
23     //,check: 'checkbox' //勾选风格
24     ,skin: 'as' //设定皮肤
25     //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
26     ,drag: true
27     ,click: function(item){ //点击节点回调
28       console.log(item)
29     }
30     ,nodes: <?php echo $tree; ?>
31   });
32 
33 });
34 </script>
35 </body>
36 </html>

　　下载好layui按照你自己的文件位置放好就行了。显示效果如下:

　　

posted @ 2016-10-21 10:48  NickBai  阅读(1387)  评论(0)  编辑  收藏  举报