jsp中树状结构如何写？

清水河畔望星辰 2011-06-02 09:28:13

jsp中树状结构如何写？恳请各位朋友帮忙给个源码，谢谢了！！！

...全文

403 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

css_dcm 2011-06-02

打赏
举报

dtree更简单,容易上手

liuyuhua0066 2011-06-02

打赏
举报

还有个xtree。

ypb137154098 2011-06-02

打赏
举报

[Quote=引用 5 楼 zxingchao2009 的回复:]

可以搜索一下ztree插件
[/Quote]
恩，今天刚看到zTree最新的版 2.6

http://code.google.com/p/jquerytree/downloads/list

UPC_思念 2011-06-02

打赏
举报

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

清水河畔望星辰 2011-06-02

打赏
举报

老弟我还是没有弄出来，也没有弄明白，初学者啊，恳请讲的细一点儿，谢了！！！

宁波朱超 2011-06-02

打赏
举报

[Quote=引用楼主 yymea 的回复:]
jsp中树状结构如何写？恳请各位朋友帮忙给个源码，谢谢了！！！
[/Quote]

自循環。遞歸。

UPC_思念 2011-06-02

打赏
举报

可以搜索一下ztree插件

Inhibitory 2011-06-02

打赏
举报

使用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");

        }