行数可変な表を作りたい

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<table border="1" width="100%">

		<xp:repeat id="repeat1" rows="5" indexVar="idx1"
			repeatControls="false">
			<xp:this.value><![CDATA[#{javascript:var Array =['行1','行2','行3','行4','行5'];
return Array;}]]></xp:this.value>
			<tr>

				<xp:repeat id="repeat2" rows="5" indexVar="idx2"
					repeatControls="false">

					<xp:this.value><![CDATA[#{javascript:var array2 = ['列a','列b','列c','列d','列e'];
return array2;}]]></xp:this.value>

					<td>
						<xp:text escape="true" id="computedField1">
							<xp:this.value><![CDATA[#{javascript:Array[idx1]+"-"+array2[idx2];}]]></xp:this.value>
						</xp:text>
					</td>

				</xp:repeat>
			</tr>
		</xp:repeat>

	</table>
</xp:view>






説明

繰り返しコントロールを使用しての表の生成を行っている。
データはソースコード中の配列から取得している。

xp:repeatタグのrepeat id ="repeat1"は表の行要素を示す。
xp:repeatタグのrepeat id ="repeat2"は表の列要素を示す。

 行、列の数を指定する場合はrows要素の値を変更する。(rows="5")

 

例）

5行5列の表を作る場合

・表の外側部分
  repeat1,repeat2のrows要素で指定する。(今回は5×5の表なのでrows="5")

・表の各データ部分
  各データ部分に「repeat配列要素 - repeat2配列要素」を表示させる。

  ＜repeat1データ部分＞
  var Array =['行1','行2','行3','行4','行5'];
return Array;

＜repeat2データ部分＞
  var array2 = ['列a','列b','列c','列d','列e'];
return array2;
 

実行イメージ


XPages
ktakeshita
July 17, 2018 at 4:13 PM
Rating
0





No comments yetLogin first to comment...