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 @ 2022-11-22 20:03  请叫我小马驹  阅读(65)  评论(0)  编辑  收藏  举报