• 推荐
  • 评论
  • 收藏

菜单

2022-11-27    8831次浏览

 相信大家做网页的时候都会用到菜单。最近在CSDN上答题的时候,问动态菜单的还是比较多。这次就整3个动态菜单给同学们玩玩。方便刚入门的小鸟速度掌握。

    正所谓天下文章大家抄,抄来抄去有提高.去百度一个JS+CSS菜单。CSS菜单

    效果还算一般。我们把它抄袭下来 以后留用.

   

  先来看看HTML

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航菜单</title>
<style>
body,td,th 
{
    font-family
: Tahoma, Verdana, Arial, sans-serif;
    font-size
: 12px;
    color
: #333333;
}
body 
{
    margin-left
: 0px;
    margin-top
: 0px;
    margin-right
: 0px;
    margin-bottom
: 0px;
}
{
    color
: #333333;
    text-decoration
: none;
}
a:hover 
{
    color
: #FF0000;
    text-decoration
: none;
}
a:active
{
    color
: #FF0000;
    text-decoration
: none;
}
#menu
{
    height
:32px;
    margin-top
:8px; background-color:#990000;
}
#menu ul
{
    margin
:auto; width:778px; height:32px;
    list-style-type
:none; padding:0px; margin-top:0px; margin-bottom:0px;
}
.m_li
{
    float
:left; width:114px; line-height:32px;  text-align:center; margin-right:-2px; margin-left:-2px;
}
.m_li a
{
    display
:block; color:#FFFFFF; width:114px;
}
.m_line
{
    float
:left; width:1px; height:32px;
    line-height
:32px;   /*ff下有效(图片垂直居中)*/
}
.m_line img
{
    margin-top
:expression(( 32 - this.height ) / 2);   /*ie下有效(图片垂直居中)*/
}
.m_li_a
{
    float
:left; width:114px; line-height:32px; text-align:center; padding-top:3px; font-weight:bold;
    background-image
:url(/jscss/demoimg/200904/menu_bg2.jpg); position:relative; height:32px; margin-top:-3px; margin-right:-2px; margin-left:-2px;
}
.m_li_a a
{
    display
:block; color:#FF0000; width:114px;
}

.smenu
{
    width
:774px; margin:0px auto 0px auto; padding:0px; list-style-type:none; height:32px;
}
.s_li
{
    line-height
:32px; width:auto; display:none; height:32px; 
}
.s_li_a
{
    line-height
:32px; width:auto; display:block; height:32px; 
}
</style>
<script>
//初始化
var def="1";
function mover(object){
  
//主菜单
  var mm=document.getElementById("m_"+object);
  mm.className
="m_li_a";
  
//初始主菜单隐藏效果
  if(def!=0){
    
var mdef=document.getElementById("m_"+def);
    mdef.className
="m_li";
  }
  
//子菜单
  var ss=document.getElementById("s_"+object);
  ss.style.display
="block";
  
//初始子菜单隐藏效果
  if(def!=0){
    
var sdef=document.getElementById("s_"+def);
    sdef.style.display
="none";
  }
}

function mout(object){
  
//主菜单
  var mm=document.getElementById("m_"+object);
  mm.className
="m_li";
  
//初始主菜单
  if(def!=0){
    
var mdef=document.getElementById("m_"+def);
    mdef.className
="m_li_a";
  }
  
//子菜单
  var ss=document.getElementById("s_"+object);
  ss.style.display
="none";
  
//初始子菜单
  if(def!=0){
    
var sdef=document.getElementById("s_"+def);
    sdef.style.display
="block";
  }
}
</script>
</head>
<body>
<div id="menu">
  
<ul>
    
<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
    
<li id="m_1" class='m_li_a'><href="#">财税首页</a></li>
    
<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
    
<li id="m_2" class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><href="#">政务公开</a></li>
    
<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
    
<li id="m_3" class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><href="#">网上办事</a></li>
    
<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
    
<li id="m_4" class='m_li' onmouseover='mover(4);' onmouseout='mout(4);'><href="#">公告中心</a></li>
    
<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
    
<li id="m_5" class='m_li' onmouseover='mover(5);' onmouseout='mout(5);'><href="#">法规中心</a></li>
    
<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
    
<li id="m_6" class='m_li' onmouseover='mover(6);' onmouseout='mout(6);'><href="#">财税文化</a></li>
    
<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
    
<li id="m_7" class='m_li' onmouseover='mover(7);' onmouseout='mout(7);'><href="#">专题宣传</a></li>
    
<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
  
</ul>
</div>
<div style="height:32px; background-color:#F1F1F1;">
   
<ul class="smenu">
     
<li style="padding-left:29px;" id="s_1" class='s_li_a'>您是本站第13122842位访客!</li>
     
<li style="padding-left:141px;" id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><href="/">财税简介</a>  |  <href="#">机构设置</a>  |  <href="/">办事指南</a>  |  <href="/">税种简介</a>  |  <href="/">财税动态</a>  |  <href="/">网页特效</a></li>
     
<li style="padding-left:252px;" id="s_3" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'><href="/">下载专区</a>  |  <href="/">上传专区</a>  |  <href="#">申请报名</a>  |  <href="#">查询系统</a>  |  <href="#">咨询投诉</a>  |  <href="/">满意调查</a></li>
     
<li style="padding-left:362px;" id="s_4" class='s_li' onmouseover='mover(4);' onmouseout='mout(4);'><href="/">最新公告</a>  |  <href="/">会计通知</a></li>
     
<li style="padding-left:474px;" id="s_5" class='s_li' onmouseover='mover(5);' onmouseout='mout(5);'><href="/">最新政策</a>  |  <href="#">政策法规查询</a></li>
     
<li style="padding-left:447px;" id="s_6" class='s_li' onmouseover='mover(6);' onmouseout='mout(6);'><href="/">税收宣传</a>  |  <href="/">最新更新</a>  |  <href="#">文明创建</a>  |  <href="#" target="_blank">青年论坛</a>  |  <href="#">廉政课堂</a></li>
     
<li style="padding-left:696px;" id="s_7" class='s_li' onmouseover='mover(7);' onmouseout='mout(7);'><href="/">专题宣传区</a></li>
   
</ul>
</div>
</body>
</html>

其中有定义的JS和CSS 不会不要紧。因为我们可以抄. OK开工。新建一个页面.讲这些代码复制进去 不解释.

仔细观察一下。 DIV的ID为MENU的貌似是父菜单。而下面那个DIV是加载上去的。那我们就从后台返回两个字符串用于页面绑定。一个也可以搞定。

创建数据库

 1 USE [CSDN_Ziye]
 2 GO
 3 /****** 对象:  Table [dbo].[Ziye_Menu]    脚本日期: 04/24/2011 20:13:53 ******/
 4 SET ANSI_NULLS ON
 5 GO
 6 SET QUOTED_IDENTIFIER ON
 7 GO
 8 CREATE TABLE [dbo].[Ziye_Menu](
 9     [Menu_ID] [int] NULL,
10     [Menu_Fid] [int] NULL,
11     [Menu_Name] [nvarchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
12     [Menu_Url] [nvarchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
13     [Menu_able] [int] NULL,
14     [Menu_Rel] [nvarchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
15     [Menu_Type] [int] NULL
16 ON [PRIMARY]

 其中有几个字段不需要。具体是干嘛的。下一篇会用到。。

 采用拼接字符串。就像我经常CSDN解答的那样。

前台<%=str %> 

后台public static string str=string.Empty;

建立个页面开整 

 

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ziye_Menu1._Default" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 <html xmlns="http://www.w3.org/1999/xhtml">
  5 <head runat="server">
  6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7     <title>子夜菜单(一)</title>
  8     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  9     <style>
 10         body, td, th
 11         {
 12             font-family: Tahoma, Verdana, Arial, sans-serif;
 13             font-size: 12px;
 14             color: #333333;
 15         }
 16         body
 17         {
 18             margin-left: 0px;
 19             margin-top: 0px;
 20             margin-right: 0px;
 21             margin-bottom: 0px;
 22         }
 23         a
 24         {
 25             color: #333333;
 26             text-decoration: none;
 27         }
 28         a:hover
 29         {
 30             color: #FF0000;
 31             text-decoration: none;
 32         }
 33         a:active
 34         {
 35             color: #FF0000;
 36             text-decoration: none;
 37         }
 38         #menu
 39         {
 40             height: 32px;
 41             margin-top: 8px;
 42             background-color: #990000;
 43         }
 44         #menu ul
 45         {
 46             margin: auto;
 47             width: 778px;
 48             height: 32px;
 49             list-style-type: none;
 50             padding: 0px;
 51             margin-top: 0px;
 52             margin-bottom: 0px;
 53         }
 54         .m_li
 55         {
 56             float: left;
 57             width: 114px;
 58             line-height: 32px;
 59             text-align: center;
 60             margin-right: -2px;
 61             margin-left: -2px;
 62         }
 63         .m_li a
 64         {
 65             display: block;
 66             color: #FFFFFF;
 67             width: 114px;
 68         }
 69         .m_line
 70         {
 71             float: left;
 72             width: 1px;
 73             height: 32px;
 74             line-height: 32px; /*ff下有效(图片垂直居中)*/
 75         }
 76         .m_line img
 77         {
 78             margin-top: expression(( 32 - this.height ) / 2); /*ie下有效(图片垂直居中)*/
 79         }
 80         .m_li_a
 81         {
 82             float: left;
 83             width: 114px;
 84             line-height: 32px;
 85             text-align: center;
 86             padding-top: 3px;
 87             font-weight: bold;
 88             background-image: url(http://www.codefans.net/jscss/demoimg/200904/menu_bg2.jpg);
 89             position: relative;
 90             height: 32px;
 91             margin-top: -3px;
 92             margin-right: -2px;
 93             margin-left: -2px;
 94         }
 95         .m_li_a a
 96         {
 97             display: block;
 98             color: #FF0000;
 99             width: 114px;
100         }
101         .smenu
102         {
103             width: 774px;
104             margin: 0px auto 0px auto;
105             padding: 0px;
106             list-style-type: none;
107             height: 32px;
108         }
109         .s_li
110         {
111             line-height: 32px;
112             width: auto;
113             display: none;
114             height: 32px;
115         }
116         .s_li_a
117         {
118             line-height: 32px;
119             width: auto;
120             display: block;
121             height: 32px;
122         }
123     </style>
124 
125     <script>
126         //初始化
127         var def = "1";
128         function mover(object) {
129             //主菜单
130             var mm = document.getElementById("m_" + object);
131             mm.className = "m_li_a";
132             //初始主菜单隐藏效果
133             if (def != 0) {
134                 var mdef = document.getElementById("m_" + def);
135                 mdef.className = "m_li";
136             }
137             //子菜单
138             var ss = document.getElementById("s_" + object);
139             ss.style.display = "block";
140             //初始子菜单隐藏效果
141             if (def != 0) {
142                 var sdef = document.getElementById("s_" + def);
143                 sdef.style.display = "none";
144             }
145         }
146 
147         function mout(object) {
148             //主菜单
149             var mm = document.getElementById("m_" + object);
150             mm.className = "m_li";
151             //初始主菜单
152             if (def != 0) {
153                 var mdef = document.getElementById("m_" + def);
154                 mdef.className = "m_li_a";
155             }
156             //子菜单
157             var ss = document.getElementById("s_" + object);
158             ss.style.display = "none";
159             //初始子菜单
160             if (def != 0) {
161                 var sdef = document.getElementById("s_" + def);
162                 sdef.style.display = "block";
163             }
164         }
165     </script>
166 
167 </head>
168 <body>
169     <%=GetMenu() %>
170 </body>
171 </html>

 接下来是后台代码看注释.

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Web;
  5 using System.Web.UI;
  6 using System.Web.UI.WebControls;
  7 using System.Text;
  8 using System.Data;
  9 
 10 namespace Ziye_Menu1
 11 {
 12     public partial class _Default : System.Web.UI.Page
 13     {
 14         protected void Page_Load(object sender, EventArgs e)
 15         {
 16            
 17         }
 18 
 19         public string GetMenu()
 20         {
 21             //<div id="menu">
 22             //<ul>
 23             //<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
 24             //<li id="m_1" class='m_li_a'><a href="#">财税首页</a></li>
 25             //<li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
 26             //<li id="m_2" class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="#">政务公开</a></li>
 27             //<li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
 28             //<li id="m_3" class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="#">网上办事</a></li>
 29             //<li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
 30             //<li id="m_4" class='m_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="#">公告中心</a></li>
 31             //<li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
 32             //<li id="m_5" class='m_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="#">法规中心</a></li>
 33             //<li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
 34             //<li id="m_6" class='m_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="#">财税文化</a></li>
 35             //<li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
 36             //<li id="m_7" class='m_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="#">专题宣传</a></li>
 37             //<li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
 38             //</ul>
 39             //</div>
 40 
 41 
 42             /*
 43              * 这些就是用于主菜单的 我们要把“政务公开”这些换成数据库的名字,<a href="#">中的#也要换成我们数据库的链接
 44              * 
 45              * 发现<img src="jscss/demoimg/200904/line2.gif" />在本机找不到图片 所以在前面加上http://www.codefans.net/就当引用他网站中的图片了
 46              * 
 47              * 开抄.
 48              */
 49 
 50             StringBuilder LeftList = new StringBuilder();//声明一个LeftList 用于后面拼接
 51             try
 52             {
 53                 LeftList.Append("<div id=\"menu\">");
 54                 LeftList.Append("<ul>");
 55                 //取出所有数据 (这里用的是我大一时候写的SqlHelper请大家不要笑话.)
 56                 DataTable Dt_TotleMenu = SqlHelper.ReturnDataTable("select * from Ziye_Menu", CommandType.Text);
 57                 DataRow[] drMenu = Dt_TotleMenu.Select("Menu_Fid=0 and Menu_able=1");//取出所有启用的父节点
 58                 DataTable LeftMenuTable = new DataTable();//构建父节点的table
 59                 LeftMenuTable = drMenu[0].Table.Clone();
 60                 foreach (DataRow dr in drMenu)
 61                 {
 62                     LeftMenuTable.ImportRow(dr);
 63                 }
 64 
 65                 if (LeftMenuTable.Rows.Count != 0)
 66                 {
 67                     for (int i = 0; i < LeftMenuTable.Rows.Count; i++)
 68                     {
 69                         /*
 70                          *观察菜单可以看出 一个节点可以包含
 71                          *<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>-------图片
 72                          *<li id="m_1" class='m_li_a'><a href="#">财税首页</a></li>--------链接和名字
 73                          * 这两个那么最后应该少一个
 74                          * <li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>---图片
 75                          */
 76                         LeftList.Append("<li class=\"m_line\"><img src=\"http://www.codefans.net/jscss/demoimg/200904/line2.gif\" /></li>");//添加图片
 77                         if (i != 0)
 78                         {
 79                             LeftList.Append("<li id=\"m_" + (i + 1+ "\" class='m_li' onmouseover='mover(" + (i + 1+ ");' onmouseout='mout(" + (i + 1+ ");'><a href=" + LeftMenuTable.Rows[i]["Menu_Url"].ToString() + ">" + LeftMenuTable.Rows[i]["Menu_Name"].ToString() + "</a></li>");
 80                         }
 81                         else
 82                         {
 83                             LeftList.Append("<li id=\"m_1\" class='m_li_a'><a href=\"#\">首页</a></li>");
 84                         }
 85                         //到此循环全部搞定。然后我们不要忘记缺了最后一行
 86                     }
 87                     LeftList.Append("<li class=\"m_line\"><img src=\"http://www.codefans.net/jscss/demoimg/200904/line2.gif\" /></li>");
 88                     LeftList.Append("</ul>");
 89                     LeftList.Append("</div>");
 90                     //上面的HTML 全部拼接完成 
 91                 }
 92 
 93                 /*
 94                  * 到这里我们父级菜单就算绑定完了。接下来看子菜单
 95                  * <div s6tyle="height:32px; background-color:#F1F1F1;">
 96    
 97                  * <ul class="smenu">
 98                   
 99                  * <li  id="s_1" class='s_li_a'>大家好我是子夜</li>
100      
101                  * <li  id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="/">财税简介</a>  |  <a href="#">机构设置</a>  |  <a href="/">办事指南</a>  |  <a href="/">税种简介</a>  |  <a href="/">财税动态</a>  |  <a href="/">网页特效</a></li>
102     
103                  * <li  id="s_3" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="/">下载专区</a>  |  <a href="/">上传专区</a>  |  <a href="#">申请报名</a>  |  <a href="#">查询系统</a>  |  <a href="#">咨询投诉</a>  |  <a href="/">满意调查</a></li>
104      
105                  * <li  id="s_4" class='s_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="/">最新公告</a>  |  <a href="/">会计通知</a></li>
106     
107                  * <li  id="s_5" class='s_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="/">最新政策</a>  |  <a href="#">政策法规查询</a></li>
108      
109                  * <li  id="s_6" class='s_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="/">税收宣传</a>  |  <a href="/">最新更新</a>  |  <a href="#">文明创建</a>  |  <a href="#" target="_blank">青年论坛</a>  |  <a href="#">廉政课堂</a></li>
110      
111                  * <li  id="s_7" class='s_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="/">专题宣传区</a></li>
112                   
113                  * </ul>
114                  
115                  *</div>
116                  * 
117                  * 前面那些不看 (<li style="padding-left:141px;" id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'>)
118                  * 
119                  * 就看这个链接
120                  * 
121                  * <a href="/">财税简介</a>  |  <a href="#">机构设置</a>  |  <a href="/">办事指南</a>  |  <a href="/">税种简介</a>  |  <a href="/">财税动态</a>  |  <a href="/">网页特效</a></li>
122                  * 
123                  * 这些链接是属于一个父节点下的所有子节点拼接的。我们依照上面一样的改。
124                  */
125 
126 
127 
128                 //先拼接子菜单的前两行
129                 LeftList.Append("<div s6tyle=\"height:32px; background-color:#F1F1F1;\">");
130                 LeftList.Append("<ul class=\"smenu\">");
131 
132 
133                 //遍历每一个父节点 取它下所有的子节点。然后拼子节点的HTML
134                 for (int j = 0; j < LeftMenuTable.Rows.Count; j++)
135                 {
136 
137                     /*因为<li  id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="/">财税简介</a>  |  <a href="#">机构设置</a>  |  <a href="/">办事指南</a>  |  <a href="/">税种简介</a>  |  <a href="/">财税动态</a>  |  <a href="/">网页特效</a></li>
138                      * 
139                      * 所以每次遍历的时候我们先把<li  id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'>添加上
140                      * 
141                      * 然后在遍历拼接子节点 <a href="/">财税简介</a>  |  <a href="#">机构设置</a>  |  <a href="/">办事指南</a>  |  <a href="/">税种简介</a>  |  <a href="/">财税动态</a>  |  <a href="/">网页特效</a>
142                      * 
143                      * 最后加上</li> 即可
144                      * 
145                     */
146 
147                     //寻找父ID为当前父ID的子节点
148                     DataRow[] drSencondMenu = Dt_TotleMenu.Select("Menu_Fid='" + LeftMenuTable.Rows[j]["Menu_ID"+ "' and Menu_able=1");
149                     DataTable SecondTable = new DataTable();
150                     SecondTable = drSencondMenu[0].Table.Clone();
151                     foreach (DataRow dr in drSencondMenu)
152                     {
153                         SecondTable.ImportRow(dr);
154                     }
155 
156 
157                     if (SecondTable.Rows.Count != 0)//证明此父节点存在子节点
158                     {
159                         if (j == 0)
160                         {
161                             LeftList.Append("<li  id=\"s_1\" class='s_li_a'>大家好我是子夜</li>");
162                         }
163                         else
164                         {
165                             LeftList.Append("<li  id=\"s_" + (j + 1+ "\" class='s_li' onmouseover='mover(" + (j + 1+ ");' onmouseout='mout(" + (j + 1+ ");'>");
166                             //遍历拼接子节点的HTML
167                             for (int k = 0; k < SecondTable.Rows.Count; k++)
168                             {
169 
170                                 LeftList.Append("<a href=" + SecondTable.Rows[k]["Menu_Url"].ToString() + ">" + SecondTable.Rows[k]["Menu_Name"].ToString() + "</a> ");
171 
172                                 if (k != SecondTable.Rows.Count - 1)//如果是最后一项就不加 | 了.^_^
173                                 {
174                                     LeftList.Append("  |  ");
175                                 }
176                             }
177                         }
178                         LeftList.Append("</li>");
179 
180                     }
181                 }
182                 LeftList.Append("</ul>");
183                 LeftList.Append("</div>");
184                 return LeftList.ToString();
185 
186             }
187             catch (Exception err)
188             {
189                 return "没菜单";
190             }
191         }
192     }
193 }

效果 :

 

193行代码 其实我们可以优化的。

 比如在一个FOR循环中拼接父节点和子节点的HTML。

也可以写一个递归的方法来用。这里用简单的DataTable.来拼接的html.其实代码不是最重要的。重要的是一种思想。

有兴趣的小鸟们可以练习练习。也可以去网上抄袭几个留着以后用.

下篇 来个实战。练练抄袭的功力. 

http://www.cnblogs.com/Gavinzhao/archive/2011/05/08/2026542.html

原文地址:https://www.cnblogs.com/Leo_wl/p/2040701.html