动态获取数据库信息

最新推荐文章于 2023-08-24 13:57:41 发布

晨埃 @

最新推荐文章于 2023-08-24 13:57:41 发布

阅读量573

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/weixin_43750002/article/details/90668655

版权

java 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

首页：做一个小dome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <style>
        .nav_legt{
            float:right;
        }
        .nav_right{
            float:left;
        }
        .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
        .clearfloat{zoom:1}
    </style>
</head>
<body>
    <ul id="view" class="layui-nav clearfloat">
        <script id="demo" type="text/html">
            {{#  layui.each(d, function(index,item){ }}
            {{#  if(item.children){ }}
            <li class="layui-nav-item nav_right" >
                <a>{{ item.name }}</a>
                <dl class="layui-nav-child">
                    {{#  layui.each(item.children, function(index, ss){ }}
                    <dd><a href="{{ ss.url }} " target="myFrame">{{ ss.name }}</a></dd>
                    {{#  }); }}
                </dl>
            </li>

            {{#  }else{ }}
            <li class="layui-nav-item nav_right" ><a href="{{ item.url }}" target="myFrame">{{ item.name }}</a></li>
            {{#  } }}
            {{#  }); }}

            <li class="layui-nav-item nav_legt">
                <a href="../dlzc/index.html" target="myFrame">退出</a>
            </li>
        </script>

    </ul>

<iframe src="welcome.html" frameborder="0" id="demoAdmin" style="width: 100%; height: 480px;" name="myFrame"></iframe>
<script type="text/javascript">
    $.ajax({
        url:'/project/navigation',
        dataType:'json',
        success:function(data){
            var da = createTreeData(data,0);
            console.log(da+"children");
            //第三步：渲染模版
            layui.use('laytpl', function(){
                var laytpl = layui.laytpl;
                var getTpl = demo.innerHTML
                    ,view = document.getElementById('view');
                laytpl(getTpl).render(da, function(html){
                    view.innerHTML = html;
                });

            });
            layui.use('element',function(){
                var element=layui.element;
            })
        }
    });
    function createTreeData(nodes,treeRootpId) {
        var groups = {};
        // 按父节点将节点分组
        for (var i in nodes) {
            if (!groups[nodes[i].pId]) {
                groups[nodes[i].pId] = [];
            }
            groups[nodes[i].pId].push(nodes[i]);
            if (treeRootpId && treeRootpId === nodes[i].id) { // 发现传入的根节点id作为节点id时，将根节点设置为该节点的父节点
                treeRootpId = nodes[i].pId;
            }
        }

        var rootNodes = groups[treeRootpId];
        groups[treeRootpId] = null; // [SAFEGUARD]防止自为父节点或互为父节点（有环图结构）导致的死循环
        function traverseTreeNodeGroup(treeNodeGroup) {
            for (var i in treeNodeGroup) {
                var node = treeNodeGroup[i];
                if (groups[node.id]) {
                    node.children = groups[node.id];
                    groups[node.id] = null; // [SAFEGUARD]防止自为父节点或互为父节点（有环图结构）导致的死循环
                    traverseTreeNodeGroup(node.children);
                }
            }
        }
        traverseTreeNodeGroup(rootNodes);
        return rootNodes;
    }

</script>
</body>
</html>

晨埃 @

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态获取数据库信息

首页：做一个小dome<!DOCTYPE html><html lang="en"><head> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> &...
复制链接

扫一扫

专栏目录