php 无限分类实现 layui tree

爱咋咋地1

于 2024-03-13 10:13:33 发布

阅读量527

点赞数 11

文章标签： php layui javascript

本文链接：https://blog.csdn.net/u012285295/article/details/136672283

版权

文章介绍了如何使用PHP和layui库将存储在数据库中的数据结构整理成树状布局，重点是通过递归和数组操作实现无限极分类，以适应layui的tree组件。

摘要由CSDN通过智能技术生成

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

});

[ //节点
  {
    name: '常用文件夹'
    ,id: 1
    ,alias: 'changyong'
    ,children: [
      {
        name: '所有未读'
        ,id: 11
        ,href: 'http://www.layui.com/'
        ,alias: 'weidu'
      }, {
        name: '置顶邮件'
        ,id: 12
      }, {
        name: '标签邮件'
        ,id: 13
      }
    ]
  }, {
    name: '我的邮箱'
    ,id: 2
    ,spread: true
    ,children: [
      {
        name: 'QQ邮箱'
        ,id: 21
        ,spread: true
        ,children: [
          {
            name: '收件箱'
            ,id: 211
            ,children: [
              {
                name: '所有未读'
                ,id: 2111
              }, {
                name: '置顶邮件'
                ,id: 2112
              }, {
                name: '标签邮件'
                ,id: 2113
              }
            ]
          }, {
            name: '已发出的邮件'
            ,id: 212
          }, {
            name: '垃圾邮件'
            ,id: 213
          }
        ]
      }, {
        name: '阿里云邮'
        ,id: 22
        ,children: [
          {
            name: '收件箱'
            ,id: 221
          }, {
            name: '已发出的邮件'
            ,id: 222
          }, {
            name: '垃圾邮件'
            ,id: 223
          }
        ]
      }
    ]
  }
]

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

　　处理数据程序 data.php

<?php

$data = [
    [ 'id' => 1, 'name' => '江苏省', 'pid' => 0],
    [ 'id' => 2, 'name' => '徐州市', 'pid' => 1],
    [ 'id' => 3, 'name' => '睢宁县', 'pid' => 2],
    [ 'id' => 4, 'name' => '双沟镇', 'pid' => 3],
    [ 'id' => 5, 'name' => '王集镇', 'pid' => 3],
    [ 'id' => 6, 'name' => '铜山区', 'pid' => 2],
    [ 'id' => 7, 'name' => '张集镇', 'pid' => 6],
    [ 'id' => 8, 'name' => '大黄山镇', 'pid' => 6],
    [ 'id' => 9, 'name' => '南京市', 'pid' => 1],
    [ 'id' => 10, 'name' => '江宁区', 'pid' => 9],
    [ 'id' => 11, 'name' => '鼓楼区', 'pid' => 9],
    [ 'id' => 12, 'name' => '浙江省', 'pid' => 0],
    [ 'id' => 13, 'name' => '杭州市', 'pid' => 12],
    [ 'id' => 14, 'name' => '西湖区', 'pid' => 13]
];

$res = [];
$tree = [];

//整理数组
foreach( $data as $key=>$vo ){
    $res[$vo['id']] = $vo;
    $res[$vo['id']]['children'] = [];
}
unset( $data );

//查询子孙
foreach( $res as $key=>$vo ){
    if( $vo['pid'] != 0 ){
        $res[$vo['pid']]['children'][] = &$res[$key];
    }
}

//去除杂质
foreach( $res as $key=>$vo ){
    if( $vo['pid'] == 0 ){
        $tree[] = $vo;
    }
}
unset( $res );

$tree = json_encode( $tree );

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>树模块 - layui</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
body{padding: 50px 100px;}
</style>
</head>
<body>
<?php require 'data.php'; ?>

<ul id="demo"></ul>

<script src="./layui/layui.js"></script>
<script>

layui.use('tree', function(){
  var tree = layui.tree({
    elem: '#demo' //指定元素
    //,check: 'checkbox' //勾选风格
    ,skin: 'as' //设定皮肤
    //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
    ,drag: true
    ,click: function(item){ //点击节点回调
      console.log(item)
    }
    ,nodes: <?php echo $tree; ?>
  });

});
</script>
</body>
</html>

爱咋咋地1

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
php 无限分类实现 layui tree

格式就是子孙的节点，放到父节点的children下，那php怎么将存入数据库的数据整理成这个样子呢？第一次想到的就是利用递归完成子孙树，但是简单的递归很难加入children这个子节点。注意 33 行的 &$tree[$key] 这句话。这个是一次循环实现无限极分类的关键所在。以地址的形式操作数组。不理解的可以分开打印怎么实现的。处理数据程序 data.php。
复制链接

扫一扫