递归渲染树 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        #aside .aside-content>ul ul {
            display: none;
        }
    </style>
</head>

<body>
    <div id="aside" style="padding: 20px;border: 1px solid;">
        <div class="aside-scroll" style="padding: 20px;border: 1px solid;">
            <div class="aside-content" style="padding: 20px;border: 1px solid;">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script>

        //也可以单独提取到json文件中，通过get方式ajax读取
        var nodes = [
            { id: 1, pId: 0, name: "随意勾选 1" },
            { id: 11, pId: 1, name: "随意勾选 1-1" },
            { id: 111, pId: 11, name: "随意勾选 1-1-1" },
            { id: 112, pId: 11, name: "随意勾选 1-1-2", checked: true },
            { id: 12, pId: 1, name: "随意勾选 1-2" },
            { id: 121, pId: 12, name: "随意勾选 1-2-1" },
            { id: 122, pId: 12, name: "随意勾选 1-2-2" },
            { id: 2, pId: 0, name: "随意勾选 2" },
            { id: 21, pId: 2, name: "随意勾选 2-1" },
            { id: 22, pId: 2, name: "随意勾选 2-2" },
            { id: 221, pId: 22, name: "随意勾选 2-2-1", checked: true },
            { id: 222, pId: 22, name: "随意勾选 2-2-2" },
            { id: 23, pId: 2, name: "随意勾选 2-3" }
        ];

        //简单节点树，转为父子children节点树
        simpleRevComplexData = function (nodes) {
            var nodePoint = {};
            for (var i in nodes) {
                nodePoint[nodes[i].id] = nodes[i];
            }
            var node = [];
            for (var i in nodes) {
                if (nodes[i].pId in nodePoint) {//if(nodePoint[nodes[i].pId])
                    (nodePoint[nodes[i].pId].children || (nodePoint[nodes[i].pId].children = [])).push(nodes[i]);
                } else {//不在则是顶级节点
                    node.push(nodes[i]);
                }
            }
            return node;
        };

        //递归渲染
        function renderList(data, showArea) {
            if (data.length) {
                var $ul = $('<ul></ul>');
                for (var i in data) {
                    var $li = $('<li><span node-id="' + data[i].id + '">' + data[i].name + '</span></li>');
                    $ul.append($li);
                    if (data[i].children && data[i].children.length > 0) {
                        renderList(data[i].children, $li);
                    }
                }
                showArea.append($ul);
            }
        };

        //改用on监听动态添加的节点
        $('#aside .aside-content').on('click', 'span', function () {
            var $this = $(this);
            //ul是否可见
            if ($this.next().is(":visible")) {
                $this.next().hide();
            } else {
                //判读ul是否存在
                var $ul = $this.next().size() ? $this.next().show() : $this;
                //隐藏其它兄弟元素
                $ul.closest('li').siblings().find('ul').hide();
            }
        });


        //方法调用
        var nodes = simpleRevComplexData(nodes);

        renderList(nodes, $("#aside").find('.aside-content'));

    </script>
</body>

</html>

链接: https://blog.csdn.net/weixin_30478619/article/details/101549841

posted @ 2021-04-22 18:50  新上小菜鸟  阅读(91)  评论(0)  编辑  收藏  举报