本文實例講述了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#程序設計有所幫助。
新聞熱點
疑難解答
