GridView多层嵌套和折叠与展开(修改适合自己使用)

Insus.NET近段时间应朋友的要求,写一个GridView多层嵌套和折叠与展开。这个功能的GridView多层嵌套没有问题,因为已经做了无限次数,但是折叠与展开的功能,却花上不少时间(网上找资料),虽找到资料可参考,还是了解明它,并修改适合自己程序使用。效果如下:

站点中多个页面使用,因此Insus.NET把它写在一个用户自定义控件ASCX上。


代码如下:

InsusMenu.ascx

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="InsusMenu.ascx.vb" Inherits="AscxControls_InsusMenu" %>

<!--折叠与展开的Javascript部分-->
<script type="text/javascript" language="javascript">
function ShowHidde(sid, evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
var objDiv = document.getElementById("div" + sid);
objDiv.style.display = objDiv.style.display == "none" ? "block" : "none";
target.title = objDiv.style.display == "none" ? "Show" : "Hide";
var imgid = 'img' + sid;
document.getElementById(imgid).src = objDiv.style.display == "none" ? "Image/+.gif" : "Image/-.gif";
}
</script>
<!--第一层-->
<asp:GridView ID="GridViewYear" runat="server" Width="100%" AutoGenerateColumns="False"
OnRowDataBound="GridViewYear_RowDataBound" ShowHeader="false" BorderWidth="0">
<Columns>
<asp:TemplateField>
<ItemStyle BorderWidth="0" Height="25" />
<ItemTemplate>

<!--下在这个绑定Eval("Year"),是为获取唯一ID,如果你的记录有一个主键的话,可以绑定主键的字段名-->
<img id='img<%# Eval("Year")%>' style="border: 0px;" src="Image/+.gif" onclick="ShowHidde('<%#Eval("Year")%>',event)" />

<!--下面这个绑定,是第一层显示的文字-->
<%# Eval("Year") & "年"%>
<div id='div<%# Eval("Year")%>' style="display: none;">

<!--第二层-->
<asp:GridView ID="GridViewMonth" runat="server" OnRowDataBound="GridViewMonth_RowDataBound" Width="100%" AutoGenerateColumns="False" ShowHeader="False" BorderWidth="0">
<Columns>
<asp:TemplateField>
<ItemStyle BorderWidth="0" Height="25" />
<ItemTemplate>
<!--这部分的解释,可参考上面。-->
<img id='img<%# Eval("Month")%>' style="border: 0px; padding-left: 20px;" src="Image/+.gif" onclick="ShowHidde('<%#Eval("Month")%>',event)" />
<%# Eval("Month") & "月"%>
<div id='div<%# Eval("Month")%>' style="display: none;">

<!--第三层-->
<asp:GridView ID="GridViewVideoFile" runat="server" Width="100%" AutoGenerateColumns="False"
ShowHeader="False" BorderWidth="0">
<Columns>
<asp:TemplateField>
<ItemStyle BorderWidth="0" Height="25" />
<ItemTemplate>
<img style="border: 0px; padding-left: 40px; padding-right:5px; width: 16px; height: 16px; vertical-align: middle;" src="Image/m_file.png" /><asp:HyperLink ID="HyperLinkPlayer" runat="server" NavigateUrl='<%# "~/VideoPlayer.aspx?videokey=" & Eval("VideoLibrary_nbr")%>' Text='<%# Eval("OldFileName").Substring(0, Eval("OldFileName").LastIndexOf("."))%>' Target="_blank"></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

代码如下:

InsusMenu.ascx.vb

Imports System.Data
Imports Insus.NET

Partial Class AscxControls_InsusMenu
Inherits System.Web.UI.UserControl

'宣告实例
Dim objVideoLibrary As New VideoLibrary()

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Data_Binding()
End If
End Sub

Private Sub Data_Binding()
'从数据库获取数据,绑定在第一层的GridView
Me.GridViewYear.DataSource = objVideoLibrary.GetYear()
Me.GridViewYear.DataBind()
End Sub

'数据绑定在第二层的GridView
Protected Sub GridViewYear_RowDataBound(sender As Object, e As GridViewRowEventArgs)

Dim dvr As DataRowView = DirectCast(e.Row.DataItem, DataRowView)
If e.Row.RowType = DataControlRowType.DataRow Then
If e.Row.FindControl("GridViewMonth") IsNot Nothing Then
Dim Gv As GridView = DirectCast(e.Row.FindControl("GridViewMonth"), GridView)
objVideoLibrary.Year = ConvertData.ToSmallInt(dvr("Year"))
Gv.DataSource = objVideoLibrary.GetMonthByYear()
Gv.DataBind()
End If
End If
End Sub

'数据绑定在第三层的GridView
Protected Sub GridViewMonth_RowDataBound(sender As Object, e As GridViewRowEventArgs)
Dim dvr As DataRowView = DirectCast(e.Row.DataItem, DataRowView)
If e.Row.RowType = DataControlRowType.DataRow Then
If e.Row.FindControl("GridViewVideoFile") IsNot Nothing Then
Dim Gv As GridView = DirectCast(e.Row.FindControl("GridViewVideoFile"), GridView)
objVideoLibrary.Year = ConvertData.ToSmallInt(dvr("Year"))
objVideoLibrary.Month = ConvertData.ToTinyInt(dvr("Month"))
Gv.DataSource = objVideoLibrary.GetByYearAndMonth()
Gv.DataBind()
End If
End If
End Sub
End Class

(0)

相关推荐

  • 探讨:如何在ScrollView中嵌套ListView

    一.分析 1.最简单的布局:只有一个ListView 如果整个页面只有一个ListView的话,那么由于ListView本身带有滚动效果,所以当加载的数据超过页面显示的范围时,可以通过上下滑动来查看所有的item.因此这种情况下,不需要添加ScrollView. 2.其它布局A+ListView 这种情况下,如果布局A定义在ListView的前面,那么当布局A所占的比例较大,或者ListView加载的数据较多时,都会导致ListView显示不完全.同样,由于ListView自身可以滚动,因此仍然

  • 解决EditText、ListView以及GridView同时使用,输入法自动跳出来的方法

    有一个Activity,里面有个EditText下面是个ListView,每次运行这个Activity,输入法都自动跳出来,太恼火了.因为这个ListView是显示数据库的,一开始怀疑数据库游标Cursor的问题,看来怀疑错了,就是EditText和ListView同时出现,导致输入法自动跳出来.事实上我们需要的是,点击EditText后,输入法才出来.解决方法有:方法1:在onCreate()里,this.getWindow().setSoftInputMode(WindowManager.L

  • Android笔记之:在ScrollView中嵌套ListView的方法

    前几天因为项目的需要,要在一个ListView中放入另一个ListView,也即在一个ListView的每个ListItem中放入另外一个ListView.但刚开始的时候,会发现放入的小ListView会显示不完全,它的高度始终有问题.上网查了下,发现别人也有遇到这样的问题,而大多数人都不推荐这样的设计,因为默认情况下Android是禁止在ScrollView中放入另外的ScrollView的,它的高度是无法计算的. 又搜索了一下,发现有StackOverflow上的牛人已经解决了这个问题,经过

  • android ListView和GridView拖拽移位实现代码

    关于ListView拖拽移动位置,想必大家并不陌生,比较不错的软件都用到如此功能了.如:搜狐,网易,百度等,但是相比来说还是百度的用户体验较好,不偏心了,下面看几个示例:             首先说一下:拖拽ListView的item就不应该可以任意移动,只应该在ListView所在的范围内,而网易的你看看我都可以移动到状态栏了,虽然你做了处理,但是用户体验我个人感觉不好,在看看百度的,不仅控制了移动范围,更不错的百度的移动起来会时时的换位,看起来相当的形象,所以我认为这样相当的棒.说明一点

  • ListView嵌套GridView使用详解及注意事项

    MainActivity如下: 复制代码 代码如下: package cn.testlistviewandgridview; import java.util.ArrayList; import java.util.HashMap; import android.app.Activity; import android.os.Bundle; import android.widget.ListView; /** * Demo描述: * ListView嵌套GridView使用详解 * 即List

  • gridview和checkboxlist的嵌套相关应用

    复制代码 代码如下: <script type="text/javascript"> function CheckBoxList1_Click(obj) { if(obj<10) { var vv="ctl00_PageBody_gvItem_ctl0"+obj+"_CheckBox1"; } else if(obj>=10 && obj<=99) { var vv="ctl00_PageB

  • GridView多层嵌套和折叠与展开(修改适合自己使用)

    Insus.NET近段时间应朋友的要求,写一个GridView多层嵌套和折叠与展开.这个功能的GridView多层嵌套没有问题,因为已经做了无限次数,但是折叠与展开的功能,却花上不少时间(网上找资料),虽找到资料可参考,还是了解明它,并修改适合自己程序使用.效果如下: 站点中多个页面使用,因此Insus.NET把它写在一个用户自定义控件ASCX上. 复制代码 代码如下: InsusMenu.ascx <%@ Control Language="VB" AutoEventWireu

  • Vue3+Element-Plus实现左侧菜单折叠与展开功能示例

    目录 1.最终实现的效果图 2.  实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条UI结构,实现折叠与展开功能 2.3  实现点击该DIV时,触发菜单折叠与展开 2.4  折叠与展开功能是实现了,但是背景颜色并没有随着菜单折叠时跟着变小或展开时跟着变大 2.5. 最终效果 3. Home.vue 代码 1.最终实现的效果图 2.  实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条

  • Python多层嵌套list的递归处理方法(推荐)

    问题:用Python处理一个多层嵌套list ['and', 'B', ['not', 'A'],[1,2,1,[2,1],[1,1,[2,2,1]]], ['not', 'A', 'A'],['or', 'A', 'B' ,'A'] , 'B'] 需求1)如何展开成一层? 需求2)如何删除重复的元素? 包括重复的list, 要考虑子list的重复元素删除后造成的子list重复 #!/usr/bin/env python # -*- coding: utf-8 -*- def unilist(l

  • Fragment 多层嵌套方法调用问题的解决方案

    Fragment的产生与介绍 Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后拷贝一份,修改布局以适应平板神马超级大屏的.难道无法做到一个App可以同时适应手机和平板么,当然了,必须有啊.Fragment的出现就是为了解决这样的问题.你可以把Fragment当成Activity的一个界面的一个组成部分,甚至Activity的界面可以完全有不同的Fragment组成,更帅气的是Fragment拥有自己的生

  • iOS开发中TableView类似QQ分组的折叠与展开效果

    类似QQ分组的样子,实现tableView的折叠与展开.其实要做这个效果我先想到的是在tableView中再嵌套多个tableView,这个想法实现起来就有点难了. 所以还是换个思路,把tableView的HeaderView用上了.给headerView加上手势,轻松解决折叠展开的问题. 直接上代码吧. @property (nonatomic, strong) UITableView *myTableView; @property (nonatomic, strong) NSMutableA

  • Android 多层嵌套后的 Fragment 懒加载实现示例

    多层嵌套后的 Fragment 懒加载 印象中从 Feed 流应用流行开始,Fragment 懒加载变成了一个大家都需要关注的开发知识,关于 Fragment 的懒加载,网上有很多例子,GitHub 上也有很多例子,就连我自己在一年前也写过相关的文章.但是之前的应用可能最多的是一层 Activity + ViewPager 的 UI 层次,但是随着页面越来越复杂,越来越多的应用首页一个页面外层是一个 ViewPager 内部可能还嵌套着一层 ViewPager,这是之前的懒加载就可能不那么好用了

  • Angular中ng-repeat与ul li的多层嵌套重复问题

    学习ng-repeat的过程中常常使用到ng-repeat="item in array"来循环输出所需要的元素,但是当我们需要使用ng-repeat进行多层嵌套时则容易出现数据重复的问题. 如在加载与点击事件于js中进行两次http请求获取data分别为list01[]数组和list02[]赋值再如下显示则会导致it1下每个ul都会重复输出list02[]数组中的内容 <ul ng-repeat="it1 in list01"> <li ng-c

  • JS实现鼠标滑过折叠与展开菜单效果代码

    本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果.本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC

  • asp.net提取多层嵌套json数据的方法

    本文实例讲述了asp.net提取多层嵌套json数据的方法.分享给大家供大家参考,具体如下: 在.net 2.0中提取这样的json: 复制代码 代码如下: {"name":"lily","age":23,"addr":{"city":guangzhou,"province":guangdong}} 引用命名空间: using Newtonsoft.Json; using Newtons

  • 详解ASP.NET提取多层嵌套json数据的方法

    本文实例讲述了ASP.NET利用第三方类库Newtonsoft.Json提取多层嵌套json数据的方法,具体例子如下. 假设需要提取的json字符串如下: {"name":"lily","age":23,"addr":{"city":guangzhou,"province":guangdong}} 先引用命名空间: using Newtonsoft.Json; using Newtons

随机推荐