有一张表。求jsp写一个无线层次的树结构,该如何解决

有一张表。求jsp写一个无线层次的树结构
id 上级id 名称

1 0 顶级
2 1 1的下级
3 2 2的下级
4 3 3的下级
5 4 4的下级
jsp得到一个List<Map<String, Object>>集合求一个结构树。。。。。。

------解决方案--------------------
Map<String, List<Object>>可能这样会比较好一些，
String为父id List<Object>为该父id的直属子节点
------解决方案--------------------

探讨

Map<String, List<Object>>可能这样会比较好一些，
String为父id List<Object>为该父id的直属子节点

------解决方案--------------------
不要一次显示所有数据，用到递归很慢的，用ajax获取下一级。

HTML code


<html>
    <head>
        <script>
            function getChild(imageObject)
            {
                var tableTree = document.getElementById("tableTree");
                var currentRow = imageObject.parentNode.parentNode;
                var imageCount = currentRow.getElementsByTagName("img").length;
                var currentRowIndex = 0;

                for(currentRowIndex = 0;currentRowIndex < tableTree.rows.length;currentRowIndex++)
                {
                    if(tableTree.rows[currentRowIndex] == currentRow)
                    {
                        break;
                    }
                }

                if(imageObject.src.indexOf("_plus1.gif") != -1)
                {
                    imageObject.src = imageObject.src.replace("http://community.****.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif","http://community.****.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif");
                    var newTr = tableTree.insertRow(currentRowIndex+1);
                    var newTd = newTr.insertCell(0);

                    var imageStr = "";
                    for(var i = 0;i < imageCount;i++)
                    {
                        imageStr += "<img src='http://community.****.net/ui/scripts/System/_resource/MzTreeView/_line4.gif'/>";
                    }
                    newTd.innerHTML = imageStr + "<img onclick='getChild(this)' src='http://community.****.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif'/>子节点";
                }
                else
                {
                    imageObject.src = imageObject.src.replace("http://community.****.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif","http://community.****.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif");

                    for(var i = currentRowIndex+1;i < tableTree.rows.length;i++)
                    {
                        if(tableTree.rows[i].getElementsByTagName("img").length > currentRow.getElementsByTagName("img").length)
                        {
                            tableTree.deleteRow(i);
                            --i;
                        }
                        else
                        {
                            break;
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <table id="tableTree" style="border:1px solid gray;border-collapse:collapse;width:100%;" cellpadding="0" cellspacing="0">
            <tr>
                <td><img onclick="getChild(this)" src="http://community.****.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif"/>顶级节点</td>
            </tr>
            <tr>
                <td><img onclick="getChild(this)" src="http://community.****.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif"/>顶级节点</td>
            </tr>
            <tr>
                <td><img onclick="getChild(this)" src="http://community.****.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif"/>顶级节点</td>
            </tr>
        </table>
    </body>
</html>

有一张表。求jsp写一个无线层次的树结构,该如何解决

相关推荐