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#程序设计有所帮助。

(0)

相关推荐

  • C#自定义控件添加右键菜单的方法

    C#自定义控件添加右键菜单非常简单,主要用到控件,像control定义右键菜单,用items.add()叠加右键菜单内容,用click事件处理函数. 1.control是要定义右键菜单的控件. private void control_MouseDown(object sender, MouseEventArgs e) {    if (e.Button == MouseButtons.Right)    {        ContextMenu menu = new rightClickMen

  • C#递归读取XML菜单数据的方法

    本文实例讲述了C#递归读取XML菜单数据的方法.分享给大家供大家参考.具体分析如下: 最近在研究一些关于C#的一些技术,纵观之前的开发项目的经验,做系统时显示系统菜单的功能总是喜欢把数据写在数据库表,然后直接读取加载到菜单树上显示. 现在想把菜单数据都放在XML里,然后递归读取XML. 由于项目使用WCF,实体类使用了两个,一个是业务逻辑层中的实体,一个是调用业务逻辑层递归方法后进行数据实体的转换,XML读取方法写在业务逻辑层中. 思路: 1.先读取XML里所有的菜单 2.根据用户的权限显示所属

  • Android仿微信菜单(Menu)(使用C#和Java分别实现)

    本篇是对安卓菜单使用编程方式实现,当然可以使用XML的方式完成同样的功能,基本Java和C#写法都是一致的,所以使用XML的方式在本篇中使用Java演示,需要注意的是,对于如果不是VS开发的话,那么资源文件名称必须以小写开头,否则会报错. 运行效果 C#实现 using Android.App; using Android.OS; using Android.Views; using Android.Widget; namespace MenuDemo { [Activity(Label = "

  • c# winform读取xml文件创建菜单的代码

    复制代码 代码如下: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;using WinformMenu.Helper;using System.Xml; namespace WinformMen

  • C#使用XML序列化操作菜单的方法

    本文实例讲述了C#使用XML序列化操作菜单的方法.分享给大家供大家参考.具体分析如下: 之前的一篇文章<C#递归读取XML菜单数据的方法>没使用XML序列化来操作菜单,而且发现那还有一个问题,就是在XML菜单的某个菜单节点前加上一些注释代码的就不能读取,现在使用XML序列化后可以很方便的读取,故在此写一写. XML菜单的节点代码如下: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>   &l

  • asp.net(C#)生成无限级别菜单

    首先,创建数据库表的代码如下: 无限级树的数据库表代码 复制代码 代码如下: if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[work_sysmenu]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) drop table [dbo].[work_sysmenu] GO CREATE TABLE [dbo].[work_sysmenu] ( [flowid] [

  • C#设置右键菜单的方法

    本文实例讲述了C#设置右键菜单的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace WindowsApplication1 { public partia

  • 基于C#实现的仿windows左侧伸缩菜单效果

    本文所述为基于C#实现的折叠菜单,风格仿照Windows打开我的电脑后左侧的伸缩菜单效果,并且同样是蓝色的效果,看着和windows的效果一样漂亮,可以实现折叠.展开等功能.这在学习C#界面编程的时候能用上,其主要实现代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq

  • C#实现基于XML配置MenuStrip菜单的方法

    本文实例讲述了C#实现基于XML配置MenuStrip菜单的方法.分享给大家供大家参考.具体如下: 1.关于本程序的说明 用XML配置MenuStrip菜单,本程序只是提供一个思路.程序在Load函数中根据XML文件中的设置动态生成一个MenuStrip组件的Items集合. 程序示例如下: 2.使用到的XML文档示例 <?xml version="1.0" encoding="gb2312"?> <!--MenuStrip:mnsMainMenu

  • 使用c#开发公众平台自定义菜单功能

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="cm.aspx.cs" Inherits="guotaotao_weixin.cm" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

  • c# TreeView添加右键快键菜单有两种方法

    一种就是使用TreeView的ContextMenuStrip属性,添加一个新ContextMenuStrip,这个方法非常的简答直接,缺点是右键菜单是整个控件响应的,也就是说即使没有右键选中节点也是会触发快捷菜单的显示 这种方法里获取哪一个的node选中是通过这个方法: 复制代码 代码如下: TreeNode curNode = this.trvFolder.GetNodeAt(e.X, e.Y) 另一种是创建ContextMenuStrip,并且使用TreeView的NodeMouseCli

随机推荐