生成树形菜单,该如何解决-Java教程-爱易网页

生成树形菜单,该如何解决

日期：2014-05-17　浏览次数：20657 次

生成树形菜单
页面根据数据库表的内容动态生成树形菜单，数据库表有父类ID字段，点击某一节点显示该节点的下一级节点列表，并可以进行增删查改操作

------解决方案--------------------
http://dhtmlx.com/docs/products/dhtmlxTree/，楼主你看看这是dhtmstree。我们就是用的是这个，还可以完成拖拽等功能，还能调换风格（比如蓝色、黄色)等。开发包的例子特别多，你基本上改一改就能用。你要做的事情就是写个递归拼接XML.这个也不难，建议楼主用这个。
------解决方案--------------------
个人推荐jQuery插件zTree,可以参考：http://www.baby666.cn/v3/demo.php#_305,当光标移到菜单项上时可以进行增加，编辑，删除操作，当然其它基本的操作肯定是有的啦
------解决方案--------------------
你是说类似csdn论坛的树形分类么？？

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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

生成树形菜单,该如何解决

相关资料更多>

推荐阅读更多>