PHP递归函数 + Layui树形组件实现无限极分类

最新推荐文章于 2024-06-28 03:45:22 发布

相逢不晚何必匆匆

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量934

点赞数 2

分类专栏： PHP # Layui 文章标签： php ajax layui 无限极分类 jquery

本文链接：https://blog.csdn.net/zhangjiwei_2019/article/details/110817459

版权

PHP 同时被 2 个专栏收录

44 篇文章 5 订阅

订阅专栏

Layui

2 篇文章 0 订阅

订阅专栏

1、本文以全国省市区为例分类数据

数据来源：全国省市区MySQL数据表

2、递归分类数据

demo.php

<?php
$connect = mysqli_connect('localhost', 'root', 'root', '你的数据库名称');
if (!$connect) {
    echo '数据库连接失败';
    exit;
}
$sql = "SELECT * FROM area";
$query = mysqli_query($connect, $sql);
$data = [];
while ($rs = mysqli_fetch_assoc($query)) {
    $data[] = $rs;
}
// 调用 getCity() 方法开始递归分类数据，传值 -1 代表从省份开始分类（数据表中省份的 parentId 为 -1）
$r = getCity($data, -1);
// 输出 json 格式的数据供 JS 使用
echo json_encode($r);

function getCity($data, $pid)
{
    $result = [];
    foreach ($data as $k => $v) {
        if ($v['parentId'] == $pid) {
            // Layui 树形组件需要 title 字段作为节点标题显示
            $v['title'] = $v['areaName'];
            // Layui 树形组件需要 children 字段储存子节点
            $v['children'] = getCity($data, $v['areaId']);
            $result[] = $v;
        }
    }
    return $result;
}

3、下载 Layui

（1）点击前往 Gitee 获取
（2）点击前往 GitHub 获取

4、在你的 HTML 页面中引入 Layui 以及 jQuery

<link rel="stylesheet" href="layui/dist/css/layui.css">

<script src="js/jquery-3.5.1.min.js"></script>
<script src="layui/dist/layui.js"></script>

5、执行 Ajax 请求获取递归数据并渲染树形组件

<script type="text/javascript">
    $.ajax({
        url: "demo.php",
        type: "GET",
        data: {},
        success: function (r) {
            var res = JSON.parse(r)
            layui.use('tree', function(){
                var tree = layui.tree;
                //渲染
                tree.render({
                    elem: '#app'  //绑定元素
                    ,data: res
                });
            });
        }
    });
</script>

6、完整 HTML 代码

demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP递归函数 + Layui树形组件实现无限极分类</title>
    <link rel="stylesheet" href="layui/dist/css/layui.css">
</head>
<body>
<!-- Layui 树形组件容器 -->
<div id="app"></div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="layui/dist/layui.js"></script>
<script type="text/javascript">
    $.ajax({
        url: "demo.php",
        type: "GET",
        data: {},
        success: function (r) {
            var res = JSON.parse(r)
            layui.use('tree', function(){
                var tree = layui.tree;
                //渲染
                tree.render({
                    elem: '#app'  //绑定元素
                    ,data: res
                });
            });
        }
    });
</script>
</body>
</html>