layui结合ThinkPHP实现树形结构管理-基于前端与后端的协同开发

在使用 Layui 和 ThinkPHP 构建树形结构时，你通常需要结合前端和后端的代码来实现。以下是一个简单的实现思路：

前端（Layui）

Layui 提供了树形组件（tree 模块），可以用来展示树形结构。以下是一个基本的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui Tree 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
</head>
<body>
    <ul id="treeDemo" lay-filter="test"></ul>

    <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
    <script>
        layui.use(['tree', 'layer'], function(){
            var tree = layui.tree;

            // 假设这是从后端获取的 JSON 数据
            var data = [
                {
                    title: '节点1'
                    ,id: 1
                    ,children: [
                        {
                            title: '子节点1-1'
                            ,id: 11
                        }
                        ,{
                            title: '子节点1-2'
                            ,id: 12
                        }
                    ]
                },
                {
                    title: '节点2'
                    ,id: 2
                }
            ];

            // 渲染树
            tree.render({
                elem: '#treeDemo'  // 绑定元素
                ,data: data
                ,click: function(obj){
                    layer.msg('节点ID：' + obj.data.id + '<br>节点名称：' + obj.data.title);
                }
            });
        });
    </script>
</body>
</html>

后端（ThinkPHP）

在 ThinkPHP 中，你需要提供一个接口来返回树形结构的数据。这通常是在控制器中实现的。以下是一个简单的示例：

<?php
namespace app\controller;

use think\Controller;

class TreeController extends Controller
{
    public function getTreeData()
    {
        // 这里你可以从数据库中获取数据，以下是一个静态示例
        $data = [
            [
                'title' => '节点1',
                'id' => 1,
                'children' => [
                    [
                        'title' => '子节点1-1',
                        'id' => 11
                    ],
                    [
                        'title' => '子节点1-2',
                        'id' => 12
                    ]
                ]
            ],
            [
                'title' => '节点2',
                'id' => 2
            ]
        ];

        return json($data);
    }
}

结合前后端

前端请求数据：在实际应用中，你需要通过 AJAX 请求从后端获取树形数据。可以使用 jQuery 或 Layui 自带的 layui.jquery（基于 jQuery）进行请求。
处理响应数据：将后端返回的 JSON 数据传递给 Layui 的树形组件进行渲染。

示例：通过 AJAX 获取数据

layui.use(['tree', 'layer', 'jquery'], function(){
    var tree = layui.tree;
    var $ = layui.jquery;

    $.ajax({
        url: '/tree/getTreeData',  // 对应 ThinkPHP 控制器的路由
        method: 'GET',
        success: function(res) {
            // 渲染树
            tree.render({
                elem: '#treeDemo'
                ,data: res
                ,click: function(obj){
                    layer.msg('节点ID：' + obj.data.id + '<br>节点名称：' + obj.data.title);
                }
            });
        }
    });
});