现在的位置: 首页 > 综合 > 正文

动态生成html的
  • 列表项的算法

2014年01月29日 ⁄ 综合 ⁄ 共 7008字 ⁄ 字号 评论关闭

算法用C#实现。在实际应用中,类似于树的数据常常需要把动态转换为html,<ul><li>列表项加入css和js可以用来实现多级导航菜单或树形菜单。

1.在页面中加入 <div id="menu" runat="server"></div>

2.后台代码

public
voidLoadWholeMenue()

        {

           
//
生成树

           
TreeNode
root = new
TreeNode
("root","root");

           
for
(int i = 0; i < 3;i++ )

            {

               
TreeNode
inode = new
TreeNode
(i.ToString(),i.ToString());

               
for
(int j = 0; j < 3;j++ )

                {

                   
TreeNode
jnode = 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字符串

           
string
htmlStr = "<ul>";

           
foreach
(TreeNode child
in
root.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)

        {           

           
string
htmlStr = "<ul>";

           
if
(node.ChildNodes.Count < 0)

            {

               
return
"";

            }

           
else

            {

               
foreach
(TreeNode child
in
node.ChildNodes)

                {

                    htmlStr +=
"<li>"
+ child.Text +CreateMenueHtml(child) +
"</li>"
;

                }

                htmlStr +=
"</ul>"
;

            }

           
return
htmlStr;

        } 


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>

抱歉!评论已关闭.