生成树形菜单,该如何解决
日期：2014-05-17 浏览次数：20869 次
生成树形菜单
页面根据数据库表的内容动态生成树形菜单，数据库表有父类ID字段，点击某一节点显示该节点的下一级节点列表，并可以进行增删查改操作
------解决方案--------------------
http://dhtmlx.com/docs/products/dhtmlxTree/，楼主你看看这是dhtmstree。我们就是用的是这个，还可以完成拖拽等功能，还能调换风格（比如蓝色、黄色)等。开发包的例子特别多，你基本上改一改就能用。你要做的事情就是写个递归拼接XML.这个也不难，建议楼主用这个。
------解决方案--------------------
个人推荐jQuery插件zTree,可以参考：http://www.baby666.cn/v3/demo.php#_305,当光标移到菜单项上时可以进行增加，编辑，删除操作，当然其它基本的操作肯定是有的啦
------解决方案--------------------
你是说类似csdn论坛的树形分类么？？
页面根据数据库表的内容动态生成树形菜单，数据库表有父类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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
