jsp中树状结构如何写？

树结构与jsp没有关系，是html＋js的问题

使用jQuery实现的tree.html
<html>
<head>
    <style type="text/css">
    .tree a {
        text-decoration: none;
        cursor: default;
    }

    .tree ul {
        margin: 0px;
        -webkit-padding-start: 20px;
        -moz-padding-start: 10px;
        padding-start: 10px;
    }

    .tree > ul {
        -webkit-padding-start: 0px;
        -moz-padding-start: 0px;
        padding-start: 0px;
    }

    .tree .over {
        text-shadow: 0px 0px 2px green;
    }
    </style>

    <script src="js/jquery.js"></script>
    <script type="text/javascript">
    // <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>

    function createTree($treeContent) {
        //var $tree = $("<ul class='tree'><a>Root</a></ul>");
        var $tree = $("<div class='tree'>");
        $treeContent.children(0).children().each(function() {
            createNode($(this), $tree);
        });

        // Handle click event.
        $("a", $tree).click(function(event) {
            var $siblings = $(this).siblings();
            $siblings.slideToggle(100);
        }).mouseover(function() {
            if ($(this).siblings("ul").length > 0) {
                $(this).addClass("over");
            }
        }).mouseout(function() {
            $(this).removeClass("over");
        });

        return $tree;
    }

    function createNode($nodeContent, $parent) {
        var text = $nodeContent.attr("text");
        if (typeof(text) == "undefined") { return; }

        var $ul = $("<ul><a><img><span></span></a></ul>").appendTo($parent);
        var $a = $("a", $ul);

        $("span", $a).text(text);

        // If has children, iteratively walk through the children.
        if ($nodeContent.children().length > 0) {
            $("img", $a).attr("src", "images/folder.png");
            $nodeContent.children().each(function() {
                createNode($(this), $ul);
            });
        } else {
            $("img", $a).attr("src", "images/blank.png");
        }
    }

    $(function() {
        $.ajax({
            ContentType: "text/xml;UTF-8",
            url: "nodes.xml",
            type: "GET",
            timeout: 1000,
            error: function(xml){alert("Loading XML Error:" + xml);},
            dataType: ($.browser.msie) ? "text" : "xml",
            success: function(data) {
                var xml;
                if (typeof data == "string") {
                    xml = new ActiveXObject("Microsoft.XMLDOM");
                    xml.async = false;
                    xml.loadXML(data);
                } else {
                    xml = data;
                }

                $("body").append(createTree($(xml)));
            }
        });
    });

    </script>
</head>
<body></body>
</html>
nodes.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>注意，下面的代码片段需要两张小图片，你自己随便弄两张就可以了，没有也没关系，只是显示不友好
        // If has children, iteratively walk through the children.
        if ($nodeContent.children().length > 0) {
            $("img", $a).attr("src", "images/folder.png");
            $nodeContent.children().each(function() {
                createNode($(this), $ul);
            });
        } else {
            $("img", $a).attr("src", "images/blank.png");
        }

网上老多插件，你要自己写难度比较大
比较傻瓜式的有dtree
我个人推荐ztree
你网上可以去搜一下

恩，今天刚看到zTree最新的版 2.6 http://code.google.com/p/jquerytree/downloads/list

调试易

jsp中树状结构如何写？

解决方案 »