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

此算法用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