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