老项目中的树形菜单的改进问题，谢谢。

如下图的设计，这是一个树形菜单，但是研究数据库之后发现，这些数据全部都是存在数据库中的，
他数据库中有一个标识字段，比如高中、初中、小学是第一级菜单，下面的是第二级、第三级，
估计程序中在做个判断，所以会形成如下的树形结构。不过，本人怎么都觉得这样设计怪怪的，请问各位有没更好的设计啊，不搞成树形菜单也可以，本人比较讨厌树形菜单，而且东西很多的时候 要拉很长。。
谢谢、。

解决方案 »

  1.   

    如果项目数量众多的话，基本上只能是树型菜单或其变种；比如另一种替代方案是类似于智能手机（iPhone之类）的左右换页方式。关于结构，基本上主要是两类结构：
    1、层级编码结构，每层编码固定，层次之间根据上级编码一致性来匹配，类似于：xxx  xxxooo  xxxoooyyy
    2、父子节点id，类似于：myId, parentId其实都各有优缺点，看场景选用吧。
      

  2.   

    给你推进一个插件：jquery的ztree！网上搜下吧 很好用很强大 支持异步加载大数量数据什么的
      

  3.   

    我找了下，应该是Struts2动态树形菜单吧我想在页面实现这个，左边是的菜单，也就是系统的模块名字，定死了的，
    而这些节点，我想移动到右边，也就是框架的main 区域这个页面再来进行这样的设计也就是说  树形菜单 我设计成一个连接接一个连接 <A href="">这种通过链接来跳转，不过没有做过，不知道页面上好实现不呢~
      

  4.   


    <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>