Q&A
> 質問内容がわかりにくい、記載内容が足りないなどあれば、ご指摘ください。
その通りで分かりません。質問に書かれた「イメージ図」も崩れてしまってますし。元のデータは DB のテーブルから取得しているようですが、そのテーブルの構造と、表示が崩れてない「イメージ図」を書いてください。
前提・実現したいこと
質問が慣れていない かつ 技術力もあまりないため
質問内容がわかりにくい、記載内容が足りないなどあれば、
ご指摘ください。
今回の質問の内容：
(VB.net)SQLで検索した結果を一覧に表示する際に、
ヘッダーと明細を１レコードを２行で表示させるにはどうしたらよいか？
システム（画面）概要：
複数のレコードをDBから検索し、
その結果を一覧に表示させ、
その一覧にいくつかボタンを配置し、
そのボタンを押下して、データの更新や詳細画面へ遷移を行いたい
発生している問題・エラーメッセージ
表示する一覧が表示する内容が多いため、
１レコードを２行に分けて表示しようと思っています。
ただ、その２行表示が現在うまくいっていません。
作成するイメージ図（項目は実際に使用する項目ではなく、仮の項目になります）
haeder部分
!-----------------------------------------------------------------------------
|名前 |性別 |年齢 |生年月日 |
No ----------------------------------------------------------------------
|住所 |職種 |
!-----------------------------------------------------------------------------
明細部分
!-----------------------------------------------------------------------------
| |テスト太郎|男 |25 |2000年1月1日 |更新１ボタン|
|No.1-------------------------------------------------------| 詳細ボタン
| |東京都新宿区1-2-3 |会社員 |更新２ボタン|
!------------------------------------------------------------------------------
| |テスト花子|女 |20 |2005年11月11日 |更新１ボタン|
|No.2-------------------------------------------------------| 詳細ボタン
| |北海道札幌市1-1-1 |学生 |更新２ボタン|
!------------------------------------------------------------------------------
一覧に表示したい項目と内容
番号：テーブルAの番号
名前：テーブルAの名前
性別：テーブルAの性別が"0"の場合：男 "1"の場合：女 と表示したい
年齢：テーブルAの年齢 ＋"歳"
生年月日：テーブルAの生年月日を”yyyy年MM月dd日"形式に変換
住所：テーブルAの都道府県・市町村 と
テーブルAの丁目以降を結合した値
職種：テーブルAの職種 を別途持っているマスタと紐づけて、
そのマスタの情報を表示
テーブルの構造
テーブルA
PK:番号
-カラム名,データ型,Nullを許容,既定
-番号,char(10),×,""
-性別,char(1),×,""
-年齢,int,×,""
-生年月日,char(8),×,""
-名前,nvarchar(50),〇,""
-都道府県・市町村,nvarchar(50),〇,""
-丁目以降,nvarchar(50),〇,""
-職種,char(1),〇,""
-データ登録日,char(8),×,""
現状のヘッダー部分のソース部分
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"> <LayoutTemplate> <table runat="server"> <tr runat="server"> <td runat="server"> <table id="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;"> <tr runat="server" style="background-color:#DCDCDC;color: #000000;"> <th rowspan="2" runat="server">番号</th> <th runat="server">名前</th> <th runat="server">性別</th> <th runat="server">年齢</th> <th runat="server">生年月日</th> </tr> <tr> <th colspan="4" runat="server">名前</th> <th runat="server">職種</th> </tr> <tr id="itemPlaceholder" runat="server"> </tr> </table> </td> </tr> <tr runat="server"> <td runat="server" style="text-align: center;background-color: #CCCCCC;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;"></td> </tr> </table> </LayoutTemplate>
開発言語
VB.net ,asp.net
試したこと
ListViewコントロールで実装できるのではないかなと思い、
ListViewを使用して作成をおこなおうと思っております。
ItemTemplate内にtableタグを作成し、その中でtrタグで１行目、２行目を分けようとしました。
visualstadioのデザイン上では２行で表示できているのですが、実行してみたところ
うまく表示できませんでした。（1つめの行のみ表示され、２行目は欠けているように見えます。）
> テーブルの構造ですが、一覧情報に表示する内容の取得対象のテーブルは、大体は１つのテーブルから情報を取得します。一部マスタと結合しマスタの内容を表示させたり、ある項目が"1"の場合、"〇"で表示するなど、ちょっとした変換を行う予定です。
ますます分かりません。
今度はテーブルが 2 つ出てきて、ここに書いてあること以外は知り得ない赤の他人には、ますます、ますます分からなくなっているのを認識できませんか？
まずは一つのテーブルをベースに考えて、質問に書いてあった、
> ヘッダーと明細を１レコードを２行で表示させるにはどうしたらよいか？
を実現するにはどうしたらよいかをまず解決してから、次のステップに進むとかしては？ でないと誰もあなたにはついていけないと思いますよ。
> ヘッダーと明細を１レコードを２行で表示させるにはどうしたらよいか？
>を実現するにはどうしたらよいかをまず解決してから次のステップに進むとかしないと誰もあなたにはついていけないと思いますよ。
質問に無駄に色々書きすぎてわかりにくくなっていまったかもしれませんが、この質問はSurferOnWwwさんの記載した通り、
"ヘッダーと明細を１レコードを２行で表示させる方法"を聞くための質問になります。わかりにくくて申し訳ありません。
こちらを解決するのになにか他に記載したほうが良いことはありますか？
> こちらを解決するのになにか他に記載したほうが良いことはありますか？
まずは対象とする DB のテーブルを一つだけにして、できれば Northwind とか AdventureWorks などの誰でも知っているサンプル DB のテーブルを例にとって、それができなければ対象のテーブルの構造の詳細を書いて、それを ListView でどのように表示したいのかを書いてください。ここに書いてあること以外は知り得ない第三者に分かるようにお願いします。
ここでいう"テーブルの構造"とは何を指していますか？
知識不足で申し訳ありません。（もっと早くに確認すればよかったですね…）
回答欄に画像を貼っておきます。
ありがとうございます。
貼っていただいた画像を参考にして、
説明文を修正してみました。
色々なことを一度に全部やろうとしないで、まずはテーブル A のレコードをそのまま表示することにし、その際 1 レコードを ListView 上で 2 行に表示することだけを考えませんか。
ヘッダ部分だけで良いので現在のコードを質問欄に追記してください。
あと、テーブルの表示が崩れてしまっているところを何とかできませんか？
＞1 レコードを ListView 上で 2 行に表示することだけを考えませんか。
そうですね。２行表示することだけまず解決するよう考えていきます。
ヘッダー部分のコードの追記とテーブルの表示を修正しました。
回答2件
0
ベストアンサー
テーブルの表示の崩れが直ってないですが、以下のようにしたいのであろうと理解してレスします。理解が違っていたらどう違うかを書いてください。
ヘッダ部分を、
------------------------------------------------- | |名前 |性別 |年齢 |生年月日 | |番号 ------------------------------------------- | |住所 |職種 | -------------------------------------------------
のようにしたいのだとすると（ボタンはとりあえず無しで考えます）、質問者さんのコードの、
<th colspan="4" runat="server">名前</th>
は、
<th colspan="3" runat="server">住所</th>
になるはずです。
ItemTemplate, AlternatingItemTemplate の中の各レコードを表示する tr, td 要素およびそれに付与する colspan, rowspan 属性も同様です。
ご参考に、構造とは何かを説明するために先に画像だけアップした以下のテーブル（Microsoft のサンプルデータベース Northwind の Products テーブル）を、ListView に 1 レコード 2 行で表示するサンプルを紹介しておきます。
上の画像のテーブルを ListView に以下のように表示する場合、
以下の記事の下のブロックのコードにあるようにします。（表題がページングとなってますがそこは気にしないでください）
ObjectDataSource でページング
http://surferonwww.info/BlogEngine/post/2010/08/26/Paging-with-ObjectDataSource.aspx
投稿2020/04/13 13:22
編集2020/04/14 01:30退会済みユーザー
総合スコア0
ありがとうございます。
教えていただいた、HPの
aspxのコードの
AlternatingItemTemplate と
ItemTemplateの部分を参考にしたら２行表示いけました。
0
https://teratail.com/questions/22862
これが多分やろうとしている事と似ているかなと思います
投稿2020/04/13 10:01
退会済みユーザー
総合スコア0
そのスレッドは Windows Forms アプリの話で、今回の質問の ASP.NET Web Forms アプリとは違うものです。
radianさん
ご確認ありがとうございます。
今回の私の問題はASP.Net Web Formsのため、
ちょっと内容が違いそうです。
ASP.NETを見落としてました、失礼しました。
あなたの回答
tips
プレビュー
