LayUI实现动态树

 表结构和数据如下

 

需要【TreeVo】和【LayUIBuildTree】，详情见末尾参考文档，其中【LayUIBuildTree】我有些许改动，如下

 

控制层的代码如下

 

前台代码如下

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/jquery-3.1.1.js"></script>
</head>
<body>

<p>这是初始页面public</p>
<div id="myTree"></div>

<script src="layui/layui.js"></script>
<script>
    layui.use('tree', function () {

        var tree = layui.tree;

        //请求树的数据
        $.ajax({
            url: "/getAll",
            type: "post",
            success: function (result) {
                //渲染树的数据
                var treeInst = tree.render({
                    elem: '#myTree'  //绑定元素
                    , data: JSON.parse(result)
                });
            }
        });

    });
</script>

</body>
</html>
前台代码
复制代码

 

页面效果如下

 

 参考文档：https://www.codenong.com/cs107010411/

posted @   请叫我小马驹  阅读(80)  评论(0)  编辑  收藏  举报
相关博文：
·  LayUI+SSM实现一个简单的后台管理系统
·  注解加反射动态创建表
·  Layui 之TreeTable(树形数据表格)，适用于权限、部门等
·  Layui+treetable树实现 权限菜单多选单选
·  LayUI资料
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
SQL AI 助手