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

时间: 2024-08-17 16:28:02

GridView多层嵌套和折叠与展开(修改适合自己使用)_实用技巧的相关文章

GridView中日期不显示时分秒的完美解决方法_实用技巧

两种处理方式: 1.模版列:假设数据表的字段completeTime的类型为时间格式 <asp:TemplateField HeaderText="时间"> <ItemTemplate> <%#Eval("completeTime", "{0:yyyy-MM-dd}")%> </ItemTemplate> </asp:TemplateField> 2.绑定列: <asp:Bound

asp.net gridview中用checkbox全选的几种实现的区别_实用技巧

1.ext的grid Ext.grid.CheckboxColumn = function(config){ config.id = config.id || 'ck'; config.columnId = config.id || 'ck'; return Ext.applyIf(config||{},{ init:function(grid){ grid.on('cellclick', this.onCellClick, this); grid.on('headerclick',this.o

asp.net+jquery Gridview的多行拖放, 以及跨控件拖放_实用技巧

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="t

asp.net gridview实现全选,反选与删除记录的操作代码_实用技巧

gridview全选操作 复制代码 代码如下: 'columns'=>array( array( 'class'=>'CCheckBoxColumn', //'header'=>'全选', //'value'=>'$data->id', //'checked'=>'true', 'htmlOptions'=>array( 'width'=>'30', 'style'=>'text-align:center', ), ), 复制代码 代码如下: <

DataGridView展开与收缩功能实现_实用技巧

很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在DataGridView中如何实现这个功能. 首先,创建示例数据: 示例数据SQL create table Department ( ID int identity(1,1) not null, DName varchar(20) null, DparentId int null, Dtelphone

Asp.net GridView隔行变色和光棒效果2种方法实现_实用技巧

方法一:前台和后台配合使用 1.aspx 隔行变色属性(<AlternatingRowStyle BackColor="#f5f5f5" />) 复制代码 代码如下: <asp:GridView ID="gvProjectList" runat="server" OnRowCreated="gvProjectList_RowCreated"> <AlternatingRowStyle BackCo

ASP.NET Gridview 中使用checkbox删除的2种方法实例分享_实用技巧

方法一:后台代码: 复制代码 代码如下:  protected void btn_delete_Click(object sender, EventArgs e)    {        for (int i = 0; i <this.GridView1.Rows.Count; i++)        {            int id = Convert.ToInt32(this.GridView1.DataKeys[i].Value);            if ((this.Grid

gridview行索引获取方法及实现代码(非js版)_实用技巧

前一版本http://www.jb51.net/article/33251.htm是用Javascript获取GridView的行索引. 此篇Insus.NET使用非Javascript获取GridView的行索引. 数据还是使用前一篇的数据来更改. 首先为GridView的控件写OnRowCreated ="GridViewCosmetic_RowCreated" 复制代码 代码如下: Protected Sub GridViewCosmetic_RowCreated(sender

ASP.NET GridView控件在列上格式化时间及DataFormatString使用_实用技巧

症状:在GridView绑定日期格式的时候,数据库中的日期为2008-07-04,而GridView显示的是2007-07-04 000000.. 解决办法:想把这后面这多余的零去掉的话在绑定时间的那一列源码后面加上一句话就可以了,如下红色的部分 复制代码 代码如下: <asp:BoundField DataField="BeginDate" HeaderText="开始时间" DataFormatString="{0:d}" htmlen