javascript显示树问题

从数据库中查询结果 进行显示，最好有例子，

解决方案 »

  1.   

    数据少用 dtree
    数据多用梅花雪 (大于1000个节点)
      

  2.   

    function showHide(id) {
    var element = document.getElementById(id);
    var img = document.getElementById("img" + id);
    img.src = "img/plus.gif";
    img.onclick = function () {
    getChildtree(id);
    };
    var subs = element.lastChild;
    subs.style.display = "none";
    }
    function getSubtree(id) {
    DirectoryModel.getDirectory(id, rootcallback);
    }
    function rootcallback(res) {
    var innderHTML = "";
    for (var i = 0; i < res.length; i++) {
    innderHTML += "<ul id=\"" + res[i].id + "\">\t<img id=\"img" + res[i].id + "\" src=\"img/plus.gif\" onclick=\"getChildtree(" + res[i].id + ")\" /><img src=\"img/folder.gif\" />" + res[i].name + "</ul>";
    }
    alert(innerHTML);
    document.getElementById("tree").innerHTML = innderHTML;
    for (var i = 0; i < res.length; i++) {
    }
    }
    function getChildtree(id) {
    DirectoryModel.getDirectory(id, childcallback);
    }
    function childcallback(res) {
    var my_ul = document.createElement("ul");
    var innderHTML = "";
    for (var i = 0; i < res.length; i++) {
    innderHTML += "<li id=" + res[i].id + ">" + res[i].name + "</li>";
    }
    var root = document.getElementById(res[0].parentid);
    my_ul.innerHTML = innderHTML;
    root.appendChild(my_ul); var img = document.getElementById("img" + res[0].parentid);

    img.setAttribute("src", "img/minus.gif");
    img.onclick = function () {
    showHide(res[0].parentid);
    };
    }
    <html>
    <head>
    <script type='text/javascript'
    src='/tree/dwr/interface/DirectoryModel.js'></script>
    <script type='text/javascript' src='/tree/dwr/engine.js'></script>
    <script type='text/javascript' src='/tree/dwr/util.js'></script>
    <script type='text/javascript' src='js/tree.js'></script>
    <title>树状</title>
    </head> <body onload="getSubtree(0)">
    <div id="tree"></div> </body>
    <html>
    <html>
    <head>
    <script type='text/javascript'
    src='/tree/dwr/interface/DirectoryModel.js'></script>
    <script type='text/javascript' src='/tree/dwr/engine.js'></script>
    <script type='text/javascript' src='/tree/dwr/util.js'></script>
    <script type='text/javascript' src='js/tree.js'></script>
    <title>树状</title>
    </head> <body onload="getSubtree(0)">
    <div id="tree"></div> </body>
    <html>这个就是通过dwr那里拿到要看得数据
    上面是2级树的用例