大学のプロジェクト用に、動的にネストされた折りたたみ可能なグリッドビューを構築しようとしています。
この記事を読んで少しは助かりましたが、まだ立ち往生しています。
私のSQLサーバーに関連する2つのテーブルは、ID(主キー)を含む情報を含むメンバーと、メンバーテーブルを指す外部キーIDで行われた呼び出しに関する履歴の詳細を保存するために使用される履歴テーブルです。(各履歴行は、identity-history_num によって int を取得します)。
指定された ID によって、履歴テーブルのコンテンツ フィールドを表示するために消費されるすべての履歴レコードがグリッドに一覧表示されるようにしたいと思います。
私はいくつかのテストを行い、なんとか動作させましたが、動的ではありませんでした。グリッドビューも動的に作成する必要があると思います。
ここに私の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 トピック コンテンツ