html自动生成了li,动态生成html的<ul><li>列表项的算法

此算法用C#实现。在实际应用中，类似于树的数据常常需要把动态转换为html，

• 列表项加入css和js可以用来实现多级导航菜单或树形菜单。

  1.在页面中加入 

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

  • ";

  foreach(TreeNode child inroot.ChildNodes)

  {

  htmlStr += "

• " + child.Text +CreateMenueHtml(child)+"";

}

htmlStr +=  "

";

//前台

menu_wwwzzjsnet.InnerHtml = htmlStr;

}

///

///对每个孩子节点生成html

///

///

///

public string CreateMenueHtml(TreeNodenode)

{

stringhtmlStr = "

• ";

if(node.ChildNodes.Count < 0)

{

return"";

}

else

{

foreach(TreeNode child innode.ChildNodes)

{

htmlStr += "

" + child.Text +CreateMenueHtml(child) + "";

}

htmlStr += "

";

}

returnhtmlStr;

}

3.生成的html字符串为：

• 0
  • 00
    • 000
      • 0000
      • 0001
      • 0002
    • 001
      • 0010
      • 0011
      • 0012
    • 002
      • 0020
      • 0021
      • 0022
  • 01
    • 010
      • 0100
      • 0101
      • 0102
    • 011
      • 0110
      • 0111
      • 0112
    • 012
      • 0120
      • 0121
      • 0122
  • 02
    • 020
      • 0200
      • 0201
      • 0202
    • 021
      • 0210
      • 0211
      • 0212
    • 022
      • 0220
      • 0221
      • 0222
• 1
  • 10
    • 100
      • 1000
      • 1001
      • 1002
    • 101
      • 1010
      • 1011
      • 1012
    • 102
      • 1020
      • 1021
      • 1022
  • 11
    • 110
      • 1100
      • 1101
      • 1102
    • 111
      • 1110
      • 1111
      • 1112
    • 112
      • 1120
      • 1121
      • 1122
  • 12
    • 120
      • 1200
      • 1201
      • 1202
    • 121
      • 1210
      • 1211
      • 1212
    • 122
      • 1220
      • 1221
      • 1222
• 2
  • 20
    • 200
      • 2000
      • 2001
      • 2002
    • 201
      • 2010
      • 2011
      • 2012
    • 202
      • 2020
      • 2021
      • 2022
  • 21
    • 210
      • 2100
      • 2101
      • 2102
    • 211
      • 2110
      • 2111
      • 2112
    • 212
      • 2120
      • 2121
      • 2122
  • 22
    • 220
      • 2200
      • 2201
      • 2202
    • 221
      • 2210
      • 2211
      • 2212
    • 222
      • 2220
      • 2221
      • 2222

4.页面效果为