1. 爱易网页
  2. Java教程
  3. 有一张表。求jsp写一个无线层次的树结构,该如何解决

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

日期：2014-05-20　 浏览次数：20643 次

有一张表。求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.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif","http://community.csdn.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.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif'/>";
                    }
                    newTd.innerHTML = imageStr + "<img onclick='getChild(this)' src='http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif'/>子节点";
                }
                else
                {
                    imageObject.src = imageObject.src.replace("http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif","http://community.csdn.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.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif"/>顶级节点</td>
            </tr>
            <tr>
                <td><img onclick="getChild(this)" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif"/>顶级节点</td>
            </tr>
            <tr>
                <td><img onclick="getChild(this)" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif"/>顶级节点</td>
            </tr>
        </table>
    </body>
</html>

相关资料更多>

  1. 大牛帮忙解决 html或jsp中怎么播放本地视频
  2. 十年小结（12）：软件开发思想之争 － RUP VS XP
  3. java跟c#通过webservice交互哪个做服务端哪个做客户端好
  4. 怎么上传资源文件到服务器
  5. 求：一个登录数据库验证有关问题
  6. JSP数据库连接有关问题
  7. 初学者提问：数组是对象么
  8. 关于struts的s标签的一个有关问题
  9. ［不明白］用了contentType="text/html; charset=gb2312"就乱码,该如何处理