ASP.NETでrowspanのある明細表示｜ITプロフェッショナル部（システム開発のアイロベックス

列１	列２
A	a
A	b
B	a
B	b

このようなデータの列１の重複データをrowspanでまとめて表示したい場合、

列１	列２
A	a
A	b
B	a
B	b

これをASP.NETで２重構造のRepeaterで実現する方法を紹介する。

■データの取得

まとめる列で集計したデータと、その列に紐づくデータを別々に取得する。まとめる列には、その明細の行数をカウントしておく。 SQLで例えると

'-- まとめる列の集計クエリ
Select 列１, count(*) rowspan From Table1

'-- 明細のクエリ、まとめる列を含める。
Select 列１, 列２ From Table1

まとめる列のデータ

列１	rowspan
A	2
B	2

紐づく明細のデータ

列１	列２
A	a
A	b
B	a
B	b

それぞれ取得したDataTableの列１でDataRelationを作ることにより紐付ける。

■DataTableの作成

    Protected Function GetDataSource() As DataTable

        Dim row As DataRow

        '// リレーションを作るにはDataSetが必要
        Dim ds As New DataSet

        '// まとめる列のDataTable
        Dim dtA As New DataTable
        ds.Tables.Add(dtA)

        dtA.Columns.Add("列１")
        dtA.Columns.Add("rowspan")

        row = dtA.NewRow
        dtA.Rows.Add(row)
        row("列１") = "A"
        row("rowspan") = 2

        row = dtA.NewRow
        dtA.Rows.Add(row)
        row("列１") = "B"
        row("rowspan") = 2

        '// 紐づく明細のDataTable
        Dim dtB As New DataTable
        ds.Tables.Add(dtB)

        dtB.Columns.Add("列１")
        dtB.Columns.Add("列２")

        row = dtB.NewRow
        dtB.Rows.Add(row)
        row("列１") = "A"
        row("列２") = "a"

        row = dtB.NewRow
        dtB.Rows.Add(row)
        row("列１") = "A"
        row("列２") = "b"

        row = dtB.NewRow
        dtB.Rows.Add(row)
        row("列１") = "B"
        row("列２") = "a"

        row = dtB.NewRow
        dtB.Rows.Add(row)
        row("列１") = "B"
        row("列２") = "b"

        '// リレーションの作成
        Dim rel As New DataRelation("relation", dtA.Columns("列１"), dtB.Columns("列１"))
        ds.Relations.Add(rel)

        '// まとめる列のDataTableのみ返せばよい
        Return dtA

    End Function

aspx側には２重構造のリピータを用意する。

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Default.aspx.vb" Inherits="rowspan._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
  <title>rowspan</title>
  <style type="text/css">
    table, th, td { border: 1px solid blue; border-collapse: collapse; text-align: center; }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:Repeater ID="rptData" runat="server">
        <HeaderTemplate>
          <table>
            <tr>
              <th style="width:100px;">
                列１</th>
              <th style="width:100px;">
                列２</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td rowspan="<%# Eval("rowspan") %>">
              <%# Eval("列１") %>
            </td>
            <asp:Repeater ID="rptChild" runat="server" DataSource='<%# GetChildeData(Container.DataItem, "relation") %>'>
              <ItemTemplate>
                <%#IIf(Container.ItemIndex > 0, "<tr>", "")%>
                <td>
                  <%# Eval("列２") %>
                </td>
                </tr>
              </ItemTemplate>
            </asp:Repeater>
        </ItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
    </div>
  </form>
</body>
</html>

外側のリピータにまとめる列で集計したデータ(dtA）をバインドし、内側のリピータのDataSourceには紐づく明細のデータをバインドする。リレーション名から明細データを取得するためにGetChildeData関数を用意しておく。

    '// リレーションに紐づくデータを取得
    Protected Function GetChildeData( _
        ByVal obj As Object, _
        ByVal vsRelName As String _
    ) As Data.DataView

        Return DirectCast(obj, Data.DataRowView).CreateChildView(vsRelName)

    End Function

少々ややこしいが、コードおよびデザイン（aspx）はシンプルになると思う。
ただ、同じデータを２回クエリしなければならい負荷は考慮する必要がある。

Staff : admin date : 2007.11.13 11:40 | Ｗｅｂシステムについて