本文实例讲述了C#实现DataList里面嵌套DataList的折叠菜单。分享给大家供大家参考，具体如下：
点击前效果图如下：
点击后效果图如下：
具体实现代码如下：
Javascript脚本
<script type= "text/javascript" >
function showmenu(id)
{
smallimg = eval( "smallimg" +id);
img =eval( "img" +id);
if (smallimg.style.display == "none" )
{
eval( "smallimg" +id+ ".style.display=\"\";" ); //全部显示
img.src= "Image/tree_folder3.gif" ; //显示为-
}
else
{
eval( "smallimg" +id+ ".style.display=\"none\";" ); //全部隐藏
img.src= "Image/tree_folder4.gif" ; //显示为+
}
}
</script>
HTML代码如下：
<body>
<form id= "Form1" method= "post" runat= "server" >
<font face= "宋体" ></font>
<table width= "679" height= "100%" border= "0" cellpadding= "0" cellspacing= "0" align= "center" >
<tr>
<td align= "center" valign= "top" >
<strong>版块 设 置</strong>
<br />
<br />
管理选项：<asp:Button ID= "btnAdd" runat= "server"
OnClick= "btnAdd_Click" Text= "添加一级版块" /><br />
<br />
<asp:DataList ID= "DataList1" runat= "server" CellSpacing= "0" CellPadding= "0" Width= "679"
OnItemDataBound= "DataList1_ItemDataBound" >
<HeaderTemplate>
<table width= "679" border= "0" cellpadding= "0" cellspacing= "0" bgcolor= "#000000" class = "border" >
<tr bgcolor= "#a4b6d7" class = "title" >
<td height= "25" align= "center" >
<strong>版块名称</strong></td>
<td height= "20" align= "center" >
<strong>操作选项</strong></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr bgcolor= "ECF5FF" class = "tdbg" >
<td height= "22" width= "50%" >
<img id= "img<%#Eval(" BigClassID ")%>" src= "Image/tree_folder4.gif" width= "15" height= "15" onclick= "showmenu(<%#Eval(" BigClassID ")%>)" ><%#Eval( "BigClassName" )%></td>
<td align= "center" width= "50%" >
<a href= 'SmallClassAdd.aspx?BigClassID=<%#Eval("BigClassID")%>' >
添加二级版块</a> | <a href= 'BigClassModify.aspx?BigClassID=<%#Eval("BigClassID")%>' >
修改一级版块</a> | <a href= 'BigClassDelete.aspx?BigClassID=<%#Eval("BigClassID")%>'
onclick= "return confirm('确定删除吗,下级版块及相关帖子都将被删除,且不可恢复!!!')" >删除一级版块</a></td>
</tr>
<tr bgcolor= "ECF5FF" class = "tdbg" width= "100%" >
<td colspan= "2" width= "100%" >
<asp:DataList ID= 'dlstSmallClass' EnableViewState= 'false' runat= 'server' >
<HeaderTemplate>
<table width= "679" border= "0" cellpadding= "0" cellspacing= "0" bgcolor= "#000000" class = "border" >
</HeaderTemplate>
<ItemTemplate>
<tr id= "smallimg<%#Eval(" BigClassID ")%>" style= "display:none" bgcolor= "#E3E3E3" class = "tdbg" >
<td height= "22" width= "50%" colspan= "3" >
<img src= "Image/tree_folder3.gif" width= "15" height= "15" ><%#Eval( "SmallClassName" )%></td>
<td align= "center" width= "50%" colspan= "3" >
<a href= 'SmallClassModify.aspx?SmallClassID=<%#Eval("SmallClassID")%>' >
修改二级版块</a> | <a href= 'SmallClassDelete.aspx?SmallClassID=<%#Eval("SmallClassID")%>'
onclick= "return confirm('确定删除吗,相关帖子都将被删除,且不可恢复!!!')" >删除二级版块</a></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</td>
</tr>
</table>
</form>
</body>
上面的功能有点缺陷（ques1:多行时候不能折叠，默认只折叠第一行；ques2:不支持IE），现在改善如下：
<script type= "text/javascript" >
function showmenu(id)
{
var smallimg = document.getElementById( "smallimg" +id);
var img = document.getElementById( "img" +id);
if (smallimg.style.display == "none" )
{
smallimg.style.display= "" ;
img.src= "Image/tree_folder3.gif" ; //显示为-
}
else
{
smallimg.style.display = "none" ;
img.src= "Image/tree_folder4.gif" ; //显示为+
}
}
</script>
<body>
<form id= "Form1" method= "post" runat= "server" >
<font face= "宋体" ></font>
<table width= "679" height= "100%" border= "0" cellpadding= "0" cellspacing= "0" align= "center" >
<tr>
<td align= "center" valign= "top" >
<strong>版 块 设 置</strong>
<br />
<br />
管理选项：<asp:Button ID= "btnAdd" runat= "server" OnClick= "btnAdd_Click" Text= "添加一级版块" /><br />
<br />
<asp:DataList ID= "DataList1" runat= "server" CellSpacing= "0" CellPadding= "0" Width= "679"
OnItemDataBound= "DataList1_ItemDataBound" >
<HeaderTemplate>
<table width= "679" border= "0" cellpadding= "0" cellspacing= "0" bgcolor= "#000000" class = "border" >
<tr bgcolor= "#a4b6d7" class = "title" >
<td height= "25" align= "center" >
<strong>版块名称</strong>
</td>
<td height= "20" align= "center" >
<strong>操作选项</strong>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr bgcolor= "ECF5FF" class = "tdbg" >
<td height= "22" width= "50%" >
<img id= "img<%#Eval(" BigClassID ")%>" src= "Image/tree_folder4.gif" width= "15" height= "15"
onclick= "showmenu(<%#Eval(" BigClassID ")%>)" ><%#Eval( "BigC <td align=" center " width=" 50% " colspan=" 3">
<a href= 'SmallClassModify.aspx?SmallClassID=<%#Eval("SmallClassID")%>' >
修改二级版块</a>|<a href= 'SmallClassDelete.aspx?SmallClassID=<%#Eval("SmallClassID")%>'
onclick= "return confirm('确定删除吗,相关帖子都将被删除,且不可恢复!!!')" >删除二级版块</a>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</td>
</tr>
</table>
</form>
</body>
希望本文所述对大家C#程序设计有所帮助。
dy("nrwz");
查看更多关于C#实现DataList里面嵌套DataList的折叠菜单的详细内容...