简陋的树形控件

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
        function createNode()
        {
            var newItem=document.createElement("div");$(newItem).addClass("item");
            var Line=document.createElement("div"); $(Line).addClass("line");
            var newNode=document.createElement("div"); $(newNode).addClass("node");
            var addBtn=document.createElement("button"); $(addBtn).html("+");$(addBtn).attr("onclick","addChild(this)");
            var collapseBtn=document.createElement("button");$(collapseBtn).html("收起");$(collapseBtn).attr("onclick","collapse(this)");
            var delBtn=document.createElement("button"); $(delBtn).html("-");$(delBtn).attr("onclick","deleteNode(this)");
            var newWrapper=document.createElement("div");$(newWrapper).addClass("nodeWrapper");

            $(newNode).append(addBtn).append(delBtn).append(collapseBtn);
            $(newItem).append(Line).append(newNode);

            return {a:newItem,b:newWrapper};
        }
        function rootClicked(v)
        {
            var p=createNode();
            $(v).parent().next().children().last().css("border-left","1px dotted #9c9c9c");
            $(v).parent().next().append(p.a).append(p.b);
        }

        function addChild(v)
        {
            var p=createNode();
            if($(v).parent().parent().next()[0]===$(v).parent().parent().parent().children().last()[0])
            {
                $(v).parent().parent().next().css("border-left","1px dotted white");
            }
            $(v).parent().parent().next().children().last().css("border-left","1px dotted #9c9c9c");
            $(v).parent().parent().next().append(p.a).append(p.b);
        }
        function deleteNode(v)
        {
            var p=$(v).parent().parent().parent();
            $(v).parent().parent().next().remove();
            $(v).parent().parent().remove();
            p.children().last().css("border-left","1px dotted white");
        }
        function collapse(v)
        {
    if($(v).parent().parent().next().children().length==0)return;
    $(v).parent().parent().next().css("display","none");
    $(v).html("展开");
    $(v).attr("onclick","expand(this)");

        }
        function expand(v)
        {
    $(v).parent().parent().next().css("display","block");
    $(v).html("收起");
    $(v).attr("onclick","collapse(this)");
        }
       function expandAll(v)
       {
    $(".nodeWrapper").css("display","block");
    $("button:contains(展开)").html("收起").attr("onclick","collapse(this)");
    $(v).html("全部展开").attr("onclick","expandAll(this)");
       }
    </script>
    <title></title>
    <style>
        .root
        {
            width:100px;
            height:30px;
            background-color: #e12249;
            border:2px solid #a6a6a6;
            border-radius: 4px;
        }
        .item
        {
            float:left;
            clear:both;
        }
        .line
        {
            width:70px;
            height:50px;
            border-bottom:1px dotted #9c9c9c;
            border-left:1px dotted #9c9c9c;
            float:left;
        }
        .node
        {
            width:100px;
            height:30px;
            background-color: #e12249;
            border:2px solid #a6a6a6;
            border-radius: 4px;
            float:left;
            position:relative;
            top:34px;
        }
        .nodeWrapper
        {
            float:left;padding-left:120px;clear:both;z-index: 0;border-left: 1px dotted #9c9c9c;
        }
    </style>
</head>
<body>
<div style="float:left;">
    <div class="root"><button onclick="rootClicked(this)">+</button><button onclick="expandAll(this)">全部展开</button></div>
    <div style="float:left;margin-left:50px;z-index: 0;"></div>
</div>
</body>
</html>

相信世界是平的
谨记四个字“修身养性”
大江东去浪淘尽英雄，再牛B的人物最后也是一掊土
向善不是目的，而是抚慰心灵，更多的感受幸福，感谢别人给你行善的机会
相信老子的话：万物生于有，有生于无，一切的道理都源于一个无法证明的假设
我是好是坏就自然而然的摆在那里，并不会因为别人的评价而改变什么，我也不需要别人用一张纸来说明我什么，世间最难得的是自由

支持大额赞助: