画面レイアウト

続けての投稿で申し訳ございません。

VisualForceのdatalistタグでcolumn　タグで、データが項目ごとに縦列で表示されますが、

会社名1　　担当者1　電話番号1

会社名2　　担当者2　電話番号2

会社名3　　担当者3　電話番号3

今やりたいのは、下記のように横列でデータを表示したいと考えております。

会社名1　　　会社名2　　　会社名3

担当者1　　　担当者2　　　担当者3

電話番号1　　電話番号2　　電話番号3

アドバイスや参考となるHPでも結構ですので、ご存知の方どうぞよろしくお願い致します。

May 1, 2011
·
Answer
·
Like
0
·
Follow
0

tima
参考ＵＲＬ

http://boards.developerforce.com/t5/Visualforce-Development/Can-Visualforce-display-items-horizontally/td-p/131784

参考URLを元に書いてみました。

repeatタグで繰り返し表示させています。あとはdivタグで横並びになるようにしています。

（今のままだとブラウザのサイズで折れ曲がってしまいますが。。。）

repeatタグのところがメインで、横並びの仕方はhtmlです。

divでやっていますが、tableタグでもliタグでもよいと思います。htmlの解説サイトを参考にしてみてください。

Visualforce Page　サンプルコード

<apex:page standardController="Account" recordSetVar="acclist"> <apex:form > <apex:outputPanel layout="block" > <apex:repeat value="{!acclist}" var="acc"> <apex:outputPanel layout="block" style="float:left;width:100px;height:100px;"> <apex:outputField value="{!acc.Name}"/> </apex:outputPanel> </apex:repeat> </apex:outputPanel> </apex:form> </apex:page>

May 2, 2011
·
Like
0
·
Dislike
0

masako
こちらのご回答もありがとうございます。

全く、実装方法が浮かばず困っていましたので本当に助かりました。
今後、英語版のディスカッションボードもチェックするようにします。

ありがとうございました。

May 2, 2011
·
Like
0
·
Dislike
0

masako
度々すみません。
教えて頂いたもので、横並びにデータが表示されたのですが次のステップでつまってしまいました。

横並びに表示されたデータに対して番号と営業所の項目列を追加したい。
1つの会社名（例：会社A）に対して番号と営業所が検索結果の会社名分表示したい。

コードは下記のようになっていまして、会社名だけ横並びにデータを表示するようにしています。

<apex:outputPanel layout="block" > <table border="1"> <tr align="center"> <td> <apex:outputLabel value="選択"/> </td> <td> <apex:outputLabel value="担当ID" /> </td> <td> <apex:outputLabel value="担当者" /> </td> <td> <apex:outputLabel value="会社名" /> </td> <apex:repeat value="{!Accounts}" var="a"> <td> 　　　<apex:outputPanel layout="block" style="float:left;width:90px;height:25px;"> 　　　　<apex:outputField value="{!a.Name}"/> 　　　</apex:outputPanel> 　</td> </apex:repeat> </tr> </table> </apex:outputPanel>

（HTMLで書くと下記のような感じで）どのように実装したらよろしいでしょうか？

<tr> <td colspan="2" bgcolor="#ff9933">会社A</td> </tr> <tr> <td>番号</td> <td>営業所</td> </tr>
上手く説明出来ずに申し訳ございませんが、よろしくお願い致します。

May 6, 2011
·
Like
0
·
Dislike
0

tima
望む回答ではないように思うのですが、コードを載せてみますね。ご参考程度に。

<apex:page standardController="Account" recordSetVar="acclist"> <apex:form >  <apex:outputPanel layout="block" > <apex:repeat value="{!acclist}" var="a"> <apex:outputPanel layout="block" style="float:left;height:100px;white-space:nowrap;"> <apex:outputPanel layout="block" style="background-color:#ff9933;"> <apex:outputField value="{!a.Name}"/> </apex:outputPanel> <apex:outputPanel layout="block"> <apex:outputPanel layout="inline"> <apex:outputField value="{!a.Id}"/> </apex:outputPanel> <apex:outputPanel layout="inline"> <apex:outputField value="{!a.Phone}"/> </apex:outputPanel> </apex:outputPanel> </apex:outputPanel> </apex:repeat> </apex:outputPanel> <br/> <br/>  <table> <tr> <apex:repeat value="{!acclist}" var="a"> <td> <table> <tr> <td colspan="2" style="background-color:#ff6699;"> <apex:outputField value="{!a.Name}"/> </td> </tr> <tr> <td> <apex:outputField value="{!a.Id}"/> </td> <td> <apex:outputField value="{!a.Phone}"/> </td> </tr> </table> </td> </apex:repeat> </tr> </table> </apex:form> </apex:page>

May 9, 2011
·
Like
0
·
Dislike
0

masako
tima様

こちらのご回答もありがとうございます。
divバージョン、テーブルバージョン、ともに試してみました。
まさに私の望むものでした！！わかりづらい説明でしたのに、ありがとうございました。

度々申し訳ございませんが、下記の部分が上手く組み込めず困っています。
私の1つ前の実装ですと、tima様が載せて頂いたサンプルコードでいう、a.Id、a.Phone　の組み込めず・・・
tima様が載せて頂いたサンプルですと、下記の項目が組み込めず・・・

<td> <apex:outputLabel value="選択"/> </td> <td> <apex:outputLabel value="担当ID" /> </td> <td> <apex:outputLabel value="担当者" /> </td>

最終的にやりたいのは、下記の様なテーブル構造。
↓　：表示したいデータの方向（向き？）縦並び
→：表示したいデータの方向（向き？）横並び
※会社名だけ横並びとして、会社名分、番号と営業所を表示する。

--------------------------------------------------------------------------------------
選択　担当ＩＤ　担当者　　会　　社　　名　　→　　　　結果　　　備考
　　　　　　　　　　　　　　　　番号　営業所
---------------------------------------------------------------------------------------
　↓　　　　↓　　　　　↓　　　　　↓　　　　↓　　　　　　　　　　↓　　　　　　↓

横並びにしたテーブルと別テーブルを作った方がよろしいのでしょうか？
お忙しい中、申し訳ございませんがアドバイスお願いいたします。

May 10, 2011
·
Like
0
·
Dislike
0

tima
※会社名だけ横並びとして、会社名分、番号と営業所を表示する。

一つの会社に対して番号と営業(会社：番号＝1:m)は複数ですか？

担当IDに対して会社は複数(担当ID：会社＝1:m)ですか？

あまりイメージができなくて、もしよければHTMLで実現したらどんな感じになるか書いてみてもらえませんか。

May 12, 2011
·
Like
0
·
Dislike
0

masako
ツールバーを利用して、Wordで差し込んでみました。
（この機能に気付くべきでした。）

私が挙げた例も悪かったので、データ的に？な部分もありますが・・・

> 一つの会社に対して番号と営業(会社：番号＝1:m)は複数ですか？

番号と省略したのがややこしくさせてしまったようで申し訳ございません。
会社：番号というより、営業所：番号＝（1：1）の関係になります。

> 担当IDに対して会社は複数(担当ID：会社＝1:m)ですか？

はい、その通りになります。

選択
担当者ID
担当者
会社名
会社Ａ
会社Ｂ
結果
備考
結果
備考

番号
営業所
番号
営業所

□
A123
山田太郎
1

03-1234-78
品川
05-123-456
大阪
ＮＧ

□
B456
山田花子
2
045-123-456
横浜
06-123-456
神戸
ＯＫ
TEL待ち
□
C789
山田次郎
3
03-1234-78
千葉
07-123-456
奈良
ＮＧ

お忙しいところ申し訳ございません。よろしくお願いいたします。

May 12, 2011
·
Like
0
·
Dislike
0

masako

申し訳ございません。
図がズレていました。

選択
担当者ID
担当者
会社名
会社Ａ

会社Ｂ

結果
備考

番号
営業所
番号
営業所

□
A123
山田太郎
1

03-1234-78
品川
05-123-456
大阪
ＮＧ

□
B456
山田花子
2
045-123-456
横浜
06-123-456
神戸
ＯＫ
TEL待ち
□
C789
山田次郎
3
03-1234-78
千葉
07-123-456
奈良

May 12, 2011
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

選択	担当者ID	担当者	会社名	会社Ａ	会社Ｂ	結果	備考	結果	備考
				番号	営業所	番号	営業所
□	A123	山田太郎	1	03-1234-78	品川	05-123-456	大阪	ＮＧ
□	B456	山田花子	2	045-123-456	横浜	06-123-456	神戸	ＯＫ	TEL待ち
□	C789	山田次郎	3	03-1234-78	千葉	07-123-456	奈良	ＮＧ

Browse by Topic

Welcome to Support!

Show

sorted by

画面レイアウト

You need to sign in to do that.