搜索

LayUI实现动态树


发布时间: 2022-11-24 21:37:01    浏览次数:30 次

 表结构和数据如下

 

需要【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>
前台代码

 

页面效果如下

 

 

碰到的问题:

前台代码中,目前是树的渲染放在ajax之中。之前是树的渲染与ajax平级,在ajax的回调函数中reload树。

通过前后台的打印语句,判断请求发送到了后台,并将正确数据返回到前台的回调函数,但是页面没有数据。

 

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

 
免责声明 LayUI实现动态树,资源类别:文本, 浏览次数:30 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 09:37:01。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/xiaomaju/p/16916244.html