C#实现DataList里面嵌套DataList的折叠菜单
本文实例讲述了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#程序设计有所帮助。
-
我有一个带有多个视图保持器的RecyclerView适配器。每个ViewHolder都有一个标题TextView和一个嵌套的RecyclerView，工作正常。但我想实现一个扩展/折叠函数，这样嵌套的RecyclerView就可以隐藏，直到单击标题为止。我使用此方法RecyclerView展开/折叠项目。它可以工作，但当我单击标题以展开嵌套的RecyleView时，recyclerview不会填充
-
描述 (Description) HTML 标记指定《input》元素的选项集。 例子 (Example) <!DOCTYPE html> <html> <head> <title>HTML Datalist Tag</title> </head> <body> <input list = "tutorials" /> <datalist id
-
本文向大家介绍JS实现的竖向折叠菜单代码，包括了JS实现的竖向折叠菜单代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的竖向折叠菜单代码。分享给大家供大家参考，具体如下： 先来看看运行效果截图： 在线演示地址如下： http://demo.jb51.net/js/2015/js-hxzd-menu-demo/ 具体代码如下： 希望本文所述对大家JavaScript程序设计有所帮
-
本文向大家介绍AngularJS折叠菜单实现方法示例，包括了AngularJS折叠菜单实现方法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了AngularJS折叠菜单实现方法。分享给大家供大家参考，具体如下： 更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结
-
本文向大家介绍JQuery实现折叠式菜单的详细代码，包括了JQuery实现折叠式菜单的详细代码的使用技巧和注意事项，需要的朋友参考一下 两种风格： 1：点菜单项，每个子菜单项都可显示 运行结果图： 2：点菜单项，仅当前子菜单项可显示，其余子菜单隐藏 运行结果图： 总结 到此这篇关于JQuery实现折叠式菜单的详细代码的文章就介绍到这了,更多相关jquery 折叠式菜单内容请搜索呐喊教程以前的文章或
-
本文向大家介绍基于jQuery实现简单的折叠菜单效果，包括了基于jQuery实现简单的折叠菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： Html代码如下： 插件实现代码如下： 这里就不作讲解了，注释都写明了。 示例DEMO如下： 希望本文所述对大家学习jquery程序设计有所帮助。