想做一个不用树控件的树结构

Question

上图为华天动力OA系统中部门管理的展示页面，看了它的源代码，好像不是用树控件来进行实现的。源代码中全为table、div
。好像是一级节点的时候一个td，二级节点的时候自动的加一个td在前面空格，三级节点的时候自动的加2个td在前面空格，这样显示为树的结构模型。我用树控件实现了个，但老大不满意。。要实现和它一样的，请问谁有经验做过类似的树结构，求助啊

Answer 1

我晕。。图片没链接好怎么链接过来？！我传到我的CSDN空间上。。

Answer 2

ul和li一起使用创建树，很容易的，给你看个我一个项目中使用的例子，生成树的算法很简单，可能会迷惑你的是css的内容。树的数据使用xml来表示，这样也容易看出树的结构。使用方式：function(xmlData) { // 传入的是xml格式的树的信息，
                var $tree = UiFactory.createTree($(xmlData));
                $("body").append($tree);
            }
生成树的js函数:/******************************************************************************
 * Create tree using xml tree content.
 *****************************************************************************/
// <ul><a>A1</a>
// ....<ul><a>A1's child a</a></ul>
// ....<ul><a>A1's child b</a></ul>
// </ul>
// <ul><a>A1' sibling 1</a></ul>
// <ul><a>A1' sibling 2</a></ul>
UiFactory.createTree = function($xmlTreeContent) {
    var $tree = $("<div class='tree'>");
    $xmlTreeContent.children(0).children().each(function() {
        UiFactory.createTreeNode($(this), $tree);
    });
    
    // Add leaf's and branch's css style.
    $("ul", $tree).each(function() {
        if ($(this).children("ul").length == 0) {
            $(this).addClass("leaf");    
        } else {
            $(this).addClass("branch");    
        }
    });
    
    // Handle branch mouse event.
    $(".branch", $tree).click(function(event) {
        $(this).children("ul").slideToggle(100);
        return false;
    }).mouseover(function() {
        $(this).addClass("hlt");
        return false;
    }).mouseout(function() {
        $(this).removeClass("hlt");
        return false;
    });
    
    // Handle leaf mouse event.
    $(".leaf", $tree).click(function() {
        return false;
    }).mouseover(function() {
        return false;
    }).mouseout(function() {
        return false;
    });
    
    return $tree;
}// Create a node for each child in the xml.
UiFactory.createTreeNode = function($nodeContent, $parent) {
    var text = $nodeContent.attr("text");
    if (typeof(text) == "undefined") { return; }
    
    var $ul = $("<ul><a></a></ul>").appendTo($parent);
    var $a = $("a", $ul);
    text = $.base64Decode(text);
    $a.text(text);
    
    // If has children, iteratively walk through the children.
    if ($nodeContent.children().length > 0) {
        $nodeContent.children().each(function() {
            UiFactory.createTreeNode($(this), $ul);
        });
    }
}
树使用的css：.tree a {
    text-decoration: none;
    cursor: default;
}.tree ul { 
    padding-left: 2px;
    margin: 0 2px 0 30px;
}.tree > ul { /* Remove the blank at first child of the tree*/
    margin-left: 2px;
}.tree .hlt {
    text-shadow: 0px 1px 1px white;
    background-image:-moz-linear-gradient(#F2EC00, #EDCF00);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#F2EC00), to(#EDCF00));
    
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;

-moz-box-shadow: 0px 1px 5px #999;
-webkit-box-shadow: 0px 1px 5px #999;
box-shadow: 0px 1px 5px #999;
}.tree .branch {
    font-weight: bold;   
}.tree .branch > a {
    cursor: pointer;
    padding-left: 16px;
    background: url(../images/folder.png) no-repeat left center;
}.tree .leaf {
    color: gray;
    font-weight: lighter;   
}
树的xml数据格式：<?xml version="1.0"?>
<root text="country" href="">
<node text="Germany">
<node text="Braunschweig" href="">
<node text="TU-BS" href="http://www.tu-braunschweig.de/"/>
<node text="Rathaus" href="http://en.wikipedia.org/wiki/Rathaus"/>
</node>
<node text="Magdeburg" href=""/>
<node text="Hannover" href="">
<node text="TU-Hannover" href=""/>
<node text="Rathaus" href=""/>
</node>
<node text="Peking" href="">
<node text="Uni-Qinghua" href="http://www.tu-braunschweig.de/"/>
<node text="Uni-Beda" href="http://en.wikipedia.org/wiki/Rathaus"/>
</node>
</node>
<node text="China" href="">
<node text="Peking" href="">
<node text="Uni-Qinghua" href="http://www.tu-braunschweig.de/"/>
<node text="进阳" href="">
<node text="Uni-Beda" href="http://en.wikipedia.org/wiki/Rathaus"/>
</node>
<node text="Uni-Beda" href="http://en.wikipedia.org/wiki/Rathaus"/>
</node>
</node>
</root>

Answer 3

我也不知用的是不是jstl、、、