动态创建嵌套的可折叠网格视图

时间:2013-05-24 17:58:38

标签: c# javascript asp.net sql-server

我正在尝试为大学的项目构建动态嵌套的可折叠gridview。

我读了this article这对我有所帮助,但我仍然陷入困境。

我的sql server中的两个相关表是:member,其中包含包含id(主键)的信息,以及用于存储有关使用指向成员表的外键id进行的调用的历史详细信息的历史记录表。 (每个历史记录行通过identity-history_num获取一个int。)

我希望通过给定的id,网格将列出所有可用于显示历史表的内容字段的历史记录。

我做了一些测试,并设法让它工作,但不是动态的。我想我也需要动态创建gridview。

这是我的aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

 <script type="text/javascript">
     function showNestedGridView(obj) {
         var nestedGridView = document.getElementById(obj);
         var imageID = document.getElementById('image' + obj);

         if (nestedGridView.style.display == "none") {
             nestedGridView.style.display = "inline";
             imageID.src = "minus.png";
         } else {
             nestedGridView.style.display = "none";
             imageID.src = "plus.png";
         }
     }
</script>

<body>
    <form id="form1" runat="server">
    <div id='div1' runat="server">


        <asp:GridView ID="gridViewMaster" runat="server" AllowPaging="True" 
            AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" 
            BorderWidth="1px" CellPadding="2" DataKeyNames="id" 
             ForeColor="Black" GridLines="None" 
            onrowdatabound="gridViewMaster_RowDataBound">
            <Columns>
                <asp:TemplateField>
                   <ItemTemplate>
                            <a href="javascript:showNestedGridView('customerID-<%# Eval("id") %>');">
                                <img id="imagecustomerID-<%# Eval("history_num") %>" alt="Click to show/hide orders" border="0" src="plus.png" />
                            </a>
                        </ItemTemplate>
                </asp:TemplateField>

                <asp:BoundField DataField="history_num" HeaderText="history_id" ReadOnly="True" 
                    SortExpression="Member-ID" />
                <asp:BoundField DataField="h_date" HeaderText="History-Date" 
                    SortExpression="Member-Name" />
                    <asp:BoundField DataField="topic" HeaderText="History-topic" 
                    SortExpression="Member-Name" />

                <asp:TemplateField>
                            <ItemTemplate>
                      <tr>
                                <td colspan="100%">
                                   <div id="customerID-<%# Eval("history_num") %>" style="display:none;position:relative;left:25px;" >
                         <asp:GridView ID="nestedGridView" runat="server" AutoGenerateColumns="False" 
                            DataKeyNames="id">
                             <RowStyle VerticalAlign="Top" BackColor="White" ForeColor="#330099" />
                            <Columns>

                                <asp:BoundField DataField="content" HeaderText="content" 
                                    SortExpression="OrderDate" />

                            </Columns>
                             <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
            <AlternatingRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
                        </asp:GridView>
                        </div>
                                </td>
                            </tr>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>


       <%-- <asp:sqldatasource ID="Sqldatasource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:igroup20_test2ConnectionString %>" 
            SelectCommand="select id, h_date, topic from history where id='038191904'"></asp:sqldatasource>--%>
    </div>
    </form>
</body>
</html>

,这是目前背后的代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlDataSource sqlDS = new SqlDataSource();
        sqlDS.ID = "sqlDS";
        sqlDS.ConnectionString = "igroup20_test2ConnectionString";
        sqlDS.SelectCommand = "select  history_num, h_date, topic from history where id='038191904'";
        div1.Controls.Add(sqlDS);

        gridViewMaster.DataSource = sqlDS;
        gridViewMaster.DataBind();

    }

    protected void gridViewMaster_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            string his_num = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "history_num"));
            GridView gridViewNested = (GridView)e.Row.FindControl("nestedGridView");
            SqlDataSource sqlDataSourceNestedGrid = new SqlDataSource();
            sqlDataSourceNestedGrid.ConnectionString = ConfigurationManager.ConnectionStrings["igroup20_test2ConnectionString"].ConnectionString;
            sqlDataSourceNestedGrid.SelectCommand = "SELECT content from history where history_num='" + his_num + "'";
            gridViewNested.DataSource = sqlDataSourceNestedGrid;
            gridViewNested.DataBind();
        }
    }
}

历史表字段是: history_num ID h_date 话题 含量

0 个答案:

没有答案