读书人

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

发布时间: 2012-03-30 17:32:10 作者: rapoo

生成树形菜单
页面根据数据库表的内容动态生成树形菜单,数据库表有父类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>        </table>    </body></html> 

读书人网 >Java Web开发

热点推荐