本文探讨如何使用算法动态创建HTML结构，特别是关于<ul>和<li>元素的菜单生成。内容涵盖C#编程中实现这一功能的方法，结合CSS和div布局，为网页构建交互式菜单。
此算法用C#实现。在实际应用中，类似于树的数据常常需要把动态转换为html，<ul><li>列表项加入css和js可以用来实现多级导航菜单或树形菜单。
1.在页面中加入 <div id="menu" runat="server"></div>
2.后台代码
public voidLoadWholeMenue()
{
//生成树
TreeNoderoot = new TreeNode("root","root");
for(int i = 0; i < 3;i++ )
{
TreeNodeinode = new TreeNode(i.ToString(),i.ToString());
for(int j = 0; j < 3;j++ )
{
TreeNodejnode = new TreeNode(i.ToString()+ j.ToString(), i.ToString() + j.ToString());
for(int m = 0; m < 3;m++ )
{
TreeNode mnode = new TreeNode(i.ToString() + j.ToString() +m.ToString(), i.ToString() + j.ToString() + m.ToString());
for (int n = 0; n < 3;n++ )
{
TreeNode nnode = newTreeNode(i.ToString() + j.ToString() + m.ToString()+n.ToString(),
i.ToString() +j.ToString() + m.ToString() + n.ToString());
mnode.ChildNodes.Add(nnode);
}
jnode.ChildNodes.Add(mnode);
}
inode.ChildNodes.Add(jnode);
}
root.ChildNodes.Add(inode);
}
//将树生成html字符串
stringhtmlStr = "<ul>";
foreach(TreeNode child inroot.ChildNodes)
{
htmlStr += "<li>" + child.Text +CreateMenueHtml(child)+"</li>";
}
htmlStr += "</ul>";
//前台<div id="menu"runat="server"></div>接收后台数据
menu_wwwzzjsnet.InnerHtml = htmlStr;
}
///<summary>
///对每个孩子节点生成html
///</summary>
///<paramname="node"></param>
///<returns></returns>
public string CreateMenueHtml(TreeNodenode)
{
stringhtmlStr = "<ul>";
if(node.ChildNodes.Count < 0)
{
return"";
}
else
{
foreach(TreeNode child innode.ChildNodes)
{
htmlStr += "<li>" + child.Text +CreateMenueHtml(child) + "</li>";
}
htmlStr += "</ul>";
}
returnhtmlStr;
}
3.生成的html字符串为：
<ul>
<li>0<ul>
<li>00<ul>
<li>000<ul>
<li>0000<ul>
</ul>
</li>
<li>0001<ul>
</ul>
</li>
<li>0002<ul>
</ul>
</li>
</ul>
</li>
<li>001<ul>
<li>0010<ul>
</ul>
</li>
<li>0011<ul>
</ul>
</li>
<li>0012<ul>
</ul>
</li>
</ul>
</li>
<li>002<ul>
<li>0020<ul>
</ul>
</li>
<li>0021<ul>
</ul>
</li>
<li>0022<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>01<ul>
<li>010<ul>
<li>0100<ul>
</ul>
</li>
<li>0101<ul>
</ul>
</li>
<li>0102<ul>
</ul>
</li>
</ul>
</li>
<li>011<ul>
<li>0110<ul>
</ul>
</li>
<li>0111<ul>
</ul>
</li>
<li>0112<ul>
</ul>
</li>
</ul>
</li>
<li>012<ul>
<li>0120<ul>
</ul>
</li>
<li>0121<ul>
</ul>
</li>
<li>0122<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>02<ul>
<li>020<ul>
<li>0200<ul>
</ul>
</li>
<li>0201<ul>
</ul>
</li>
<li>0202<ul>
</ul>
</li>
</ul>
</li>
<li>021<ul>
<li>0210<ul>
</ul>
</li>
<li>0211<ul>
</ul>
</li>
<li>0212<ul>
</ul>
</li>
</ul>
</li>
<li>022<ul>
<li>0220<ul>
</ul>
</li>
<li>0221<ul>
</ul>
</li>
<li>0222<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>1<ul>
<li>10<ul>
<li>100<ul>
<li>1000<ul>
</ul>
</li>
<li>1001<ul>
</ul>
</li>
<li>1002<ul>
</ul>
</li>
</ul>
</li>
<li>101<ul>
<li>1010<ul>
</ul>
</li>
<li>1011<ul>
</ul>
</li>
<li>1012<ul>
</ul>
</li>
</ul>
</li>
<li>102<ul>
<li>1020<ul>
</ul>
</li>
<li>1021<ul>
</ul>
</li>
<li>1022<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>11<ul>
<li>110<ul>
<li>1100<ul>
</ul>
</li>
<li>1101<ul>
</ul>
</li>
<li>1102<ul>
</ul>
</li>
</ul>
</li>
<li>111<ul>
<li>1110<ul>
</ul>
</li>
<li>1111<ul>
</ul>
</li>
<li>1112<ul>
</ul>
</li>
</ul>
</li>
<li>112<ul>
<li>1120<ul>
</ul>
</li>
<li>1121<ul>
</ul>
</li>
<li>1122<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>12<ul>
<li>120<ul>
<li>1200<ul>
</ul>
</li>
<li>1201<ul>
</ul>
</li>
<li>1202<ul>
</ul>
</li>
</ul>
</li>
<li>121<ul>
<li>1210<ul>
</ul>
</li>
<li>1211<ul>
</ul>
</li>
<li>1212<ul>
</ul>
</li>
</ul>
</li>
<li>122<ul>
<li>1220<ul>
</ul>
</li>
<li>1221<ul>
</ul>
</li>
<li>1222<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>2<ul>
<li>20<ul>
<li>200<ul>
<li>2000<ul>
</ul>
</li>
<li>2001<ul>
</ul>
</li>
<li>2002<ul>
</ul>
</li>
</ul>
</li>
<li>201<ul>
<li>2010<ul>
</ul>
</li>
<li>2011<ul>
</ul>
</li>
<li>2012<ul>
</ul>
</li>
</ul>
</li>
<li>202<ul>
<li>2020<ul>
</ul>
</li>
<li>2021<ul>
</ul>
</li>
<li>2022<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>21<ul>
<li>210<ul>
<li>2100<ul>
</ul>
</li>
<li>2101<ul>
</ul>
</li>
<li>2102<ul>
</ul>
</li>
</ul>
</li>
<li>211<ul>
<li>2110<ul>
</ul>
</li>
<li>2111<ul>
</ul>
</li>
<li>2112<ul>
</ul>
</li>
</ul>
</li>
<li>212<ul>
<li>2120<ul>
</ul>
</li>
<li>2121<ul>
</ul>
</li>
<li>2122<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>22<ul>
<li>220<ul>
<li>2200<ul>
</ul>
</li>
<li>2201<ul>
</ul>
</li>
<li>2202<ul>
</ul>
</li>
</ul>
</li>
<li>221<ul>
<li>2210<ul>
</ul>
</li>
<li>2211<ul>
</ul>
</li>
<li>2212<ul>
</ul>
</li>
</ul>
</li>
<li>222<ul>
<li>2220<ul>
</ul>
</li>
<li>2221<ul>
</ul>
</li>
<li>2222<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
4.页面效果为
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
