JS 写 个简单的 TreeView

为什么每次标题都带个简单呢，看样子我一直走的是低端路线啊。

高端的，留在自己的F盘，默默的一个人享受中。

这公司也贼牛逼了，每天什么事也不让我做，还发工资给我。我要做事啊，跪求啊。

算了，进入正题把，今天酱油时间写的是，TreeView，不过为什么每次都发js 的呢，其实很简单因为我只会js，望给位大虾米们原谅哈。

Coding：

Js：

//申明：传的的数据必须要有个根节点，且有一定的规范性。
(function () {
    var Jusoc = Jusoc || {};
    Jusoc = {
        _initial: function () { window.Jusoc = Jusoc; },
        TreeView: (function () {
            var lastNode = 0;
            //添加子节点
            function AppendChild(obj, val) {
                if (obj.childNodes.length > 1) {
                    obj.childNodes[0].childNodes[0].className = "ex";
                }
                var div = document.createElement("div");
                div.className = "node";
                div.setAttribute("preId", val.ParentId);
                div.setAttribute("nodeId", val.NodeId);

                var divsshow = document.createElement("div");
                divsshow.className = "show";

                div.appendChild(divsshow);
                var span = document.createElement("span");
                var span1 = document.createElement("span");
                var span2 = document.createElement("span");
                var span3 = document.createElement("span");
                var txt = document.createElement("input");

                span.onclick = ExspanOrClose;
                span.className = "blank";
                span1.innerHTML = val.NodeName;
                span1.className = "ct";
                span2.innerHTML = "Add";
                span2.className = "out ct";
                span2.onclick = function () { if (txt.value == "") { alert("请输入节点名称！"); return; } AppendChild(div, { NodeName: txt.value, NodeId: lastNode + 1, ParentId: val.NodeId }); span.className = "ex"; lastNode = lastNode + 1; };
                span3.innerHTML = "Remove";
                span3.onclick = function () { RemoveNode(div); };
                span3.className = "out ct";
                span2.style.display = "none";
                span3.style.display = "none";
                txt.type = "text";
                txt.style.display = "none";

                hover(span2, "in ct", "out ct");
                hover(span3, "in ct", "out ct");
                hover(divsshow, "show hover", "show", function () {
                    span2.style.display = "block";
                    span3.style.display = "block";
                    txt.style.display = "block";
                }, function () {
                    span2.style.display = "none";
                    span3.style.display = "none";
                    txt.style.display = "none";
                });

                divsshow.appendChild(span);
                divsshow.appendChild(span1);
                divsshow.appendChild(span2);
                divsshow.appendChild(span3);
                divsshow.appendChild(txt);
                obj.appendChild(div);
                return div;
            }
            function hover(obj, classIn, classOut, fn1, fn2) {
                obj.onmouseover = function () {
                    obj.className = classIn;
                    if (fn1)
                        fn1();
                }
                obj.onmouseout = function () {
                    obj.className = classOut;
                    if (fn2)
                        fn2();
                }
            }
            function RemoveNode(obj) {
                //传入的为要删除的div  包括 一个div 内部包括span 和 0或多个 div 节点
                var pobj = obj.parentNode;
                pobj.removeChild(obj);
                if (pobj.childNodes.length == 1) {
                    pobj.childNodes[0].childNodes[0].className = "blank";
                }
            }
            //点击事件 伸缩或者扩张
            function ExspanOrClose() {
                var obj = this.parentNode.parentNode;
                var flag = null;
                var children = obj.childNodes;

                if (children.length > 1) {
                    flag = children[1].style.display;
                }
                else {
                    return;
                }
                if (flag == "none" && flag != null) {
                    for (var i = 1; i < children.length; i++) {
                        children[i].style.display = "block";
                    }
                    this.className = "ex";
                }
                else {

                    for (var i = 1; i < children.length; i++) {
                        children[i].style.display = "none"
                    }
                    this.className = "cl";
                }
            }
            //判断是否为数组
            function IsArray(obj) {
                return obj && typeof (obj) == "object" && typeof (obj.length) == "number" && typeof (obj.splice) == "function";
            }
            function _createTree(treeNode, Data, container) {
                var root = AppendChild(container, treeNode);
                for (var i = 0; i < Data.length; i++) {
                    if (Data[i].ParentId == treeNode.NodeId) {
                        _createTree(Data[i], Data, root);
                    }
                }
                //如果没有根节点 则 要从新做处理， 此处暂不做处理。
            }
            function CreateTree(Data, obj) {
                for (var i = 0; i < Data.length; i++) {
                    if (Data[i].ParentId == 0) {
                        _createTree(Data[i], Data, obj);
                    }
                    if (Data[i].NodeId > lastNode) {
                        lastNode = Data[i].NodeId;
                    }
                }
            }
            function _initial(Data, container) {
                //判断是否有数据传过来 前提 必须是 array
                var obj = container;
                if (IsArray(Data)) {
                    if (!container) {
                        obj = document.body;
                    }
                    CreateTree(Data, obj);
                }
                else {
                    if (!container) {
                        obj = document.body;
                    }
                    obj.appendChild(AppendChild(obj, { NodeName: "根节点", NodeId: 1, ParentId: 0 }));
                }
            }
            function _export(container, storage) {
                if (container) {
                    var children = container.childNodes;
                    if (container.className != "node") {
                        children = container.childNodes[0].childNodes;
                        container = container.childNodes[0];
                    }
                    storage.push({ NodeName: children[0].childNodes[1].innerHTML, NodeId: container.attributes["nodeId"].nodeValue, ParentId: container.attributes["preId"].nodeValue });
                    if (children.length > 1) {
                        for (var i = 1; i < children.length; i++) {
                            _export(children[i], storage);
                        }
                    }
                }
            }
            return { Initail: _initial, Export: function (container) {
                var storage = [];
                _export(container, storage);
                return storage;
            }
            }
        })()
    }
    Jusoc._initial();
})()

Html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/TreeView.Jusoc.js" type="text/javascript"></script>
    <style type="text/css">
        /*类的命名 看不懂木有关系 你猜*/
        *{ margin:0; padding:0}
        body{font-size:12px;}
        div{clear:both;}
    .node{padding-left:20px; text-align:left}
    .show{  height:28px; line-height:28px;}
    .show .hover{ background:#9819fa;}
    .show span{display:block;float:left;}
    .show .ct{ margin:1px;border:1px solid #000; background:#696969; color:#fff; padding:2px; cursor:pointer; line-height:18px; height:18px}
    .show .in{ background:#9234ff;}
    .show .out{ background:#696969; cursor:pointer}
    .show .blank{width:16px; height:16px;margin-right:5px}
    .show .ex{width:16px; height:16px; background:url(images/expand.gif); margin-top:5px;cursor:pointer;margin-right:5px}
    .show .cl{width:16px; height:16px; background:url(images/close.gif);margin-top:5px;cursor:pointer;margin-right:5px}
    </style>
    <script type="text/javascript">
        window.onload =function () {
            var data = [{ NodeName: "根节点", NodeId: 1, ParentId: 0 },
                        { NodeName: "第一子节点", NodeId: 2, ParentId: 1 },
                        { NodeName: "第二子节点", NodeId: 3, ParentId: 1 },
                        { NodeName: "第三子节点", NodeId: 4, ParentId: 1 },
                        { NodeName: "1-1", NodeId: 5, ParentId: 2 },
                        { NodeName: "1-2", NodeId: 6, ParentId: 2 },
                        { NodeName: "2-2", NodeId: 7, ParentId: 3 },
                        { NodeName: "2-3", NodeId: 8, ParentId: 3 },
                        { NodeName: "2-4", NodeId: 9, ParentId: 3 },
                        { NodeName: "2-5", NodeId: 10, ParentId: 3 },
                        { NodeName: "3-1", NodeId: 11, ParentId: 4 },
                        { NodeName: "3-2", NodeId: 12, ParentId: 4 },
                        { NodeName: "3-1-1", NodeId: 13, ParentId: 11 },
                        { NodeName: "3-1-2", NodeId: 14, ParentId: 11 },
                        { NodeName: "3-2-1", NodeId: 15, ParentId: 12 },
                        { NodeName: "3-2-2", NodeId: 16, ParentId: 12 },
                        { NodeName: "3-2-3", NodeId: 17, ParentId: 12}];

            Jusoc.TreeView.Initail(data, document.getElementById("container"));

            document.getElementById("Ex").onclick =function () {
                var storege = Jusoc.TreeView.Export(document.getElementById("container"));
                var html ="";
                for (var i =0; i < storege.length; i++) {
                    html +="NodeName:"+ storege[i].NodeName +",NodeId:"+ storege[i].NodeId +",ParentId:"+ storege[i].ParentId +"\n";
                }
                alert(html);
            }
        }
    </script>
</head>
<body>
<div id="container" style="border:1px solid #000; 450px;"></div>
<input type="button" value="导出数据" id="Ex"/>
</body>
</html>

还是给个截图吧，不然都不知道我写的是什么，不过我美工技术有限，样式有点惨不忍睹，你们懂的。

总结：搞定，HOHO~