简单树

Posted littleboyck

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单树相关的知识，希望对你有一定的参考价值。

<!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];
                }
                console.log(nodePoint)
                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;
            };
            
            console.log(simpleRevComplexData)
            
            //递归渲染
            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>

 

以上是关于简单树的主要内容，如果未能解决你的问题，请参考以下文章

代码片段 - Golang 实现简单的 Web 服务器

创建自己的代码片段（CodeSnippet）

简单的方法来分享/讨论/协作的代码片段？

java 简单的代码片段，展示如何将javaagent附加到运行JVM进程

LeetCode810. 黑板异或游戏/455. 分发饼干/剑指Offer 53 - I. 在排序数组中查找数字 I/53 - II. 0～n-1中缺失的数字/54. 二叉搜索树的第k大节点(代码片段

python 用于在终端中运行的sublime text 3的简单代码片段制作工具