一覧表で、tableタグを使わないで表示
最終更新日:2023年03月08日
一覧表ページの構造は大まかに3つのパートに分かれています。
1.件数表示、ページャー、表示件数
2.ソート行（フィールド名をクリックすることで並び替えをする）
3.データ行
一覧表作成直後のXSLでは、3つとも1つのtable要素に入っていますが、独立させて、別の場所に記述することができます。 また、ソート行やデータ行はフィールド名や登録データがtd要素でセルごとに分かれていますが、td要素を使わず、自由に記述することができます。
当ページではデータ行について、table要素を使わない表示方法をご案内いたします。
変更前の設定
サンプルXML
一覧表のソースデザイン画面にて、サンプルXMLは以下の通りです。
<data count="2" limit="10" sort="id_up" total="2">
<record id="1">
<usr_xxxxxxxx>テキストA</usr_xxxxxxxx>
<usr_yyyyyyyy>テキストB</usr_yyyyyyyy>
</record>
<record id="2">
<usr_xxxxxxxx>テキストC</usr_xxxxxxxx>
<usr_yyyyyyyy>テキストD</usr_yyyyyyyy>
</record>
</data>元のXSL
一覧表の作成直後、ソースデザイン画面にて、XSLは以下の通りに設定されています。
データ行部分
<xsl:for-each select="data/record"> ・・・ </xsl:for-each>各データの表示部分
<tr>
<td class="smp-cell-data smp-cell-{$row}-4 smp-cell smp-cell-row-{$row} smp-cell-col-4" align="left">
<xsl:attribute name="style">
<xsl:choose>
<xsl:when test="position() mod 2 = 1">
border-width:0px 1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt;
color:#444444;
</xsl:when>
<xsl:otherwise>
border-width:0px 1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444; background-color:#F2F5F8;
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:value-of select="usr_xxxxxxxx" />
</td>
<td class="smp-cell-data smp-cell-{$row}-5 smp-cell smp-cell-row-{$row} smp-cell-col-5" align="left">
<xsl:attribute name="style">
<xsl:choose>
<xsl:when test="position() mod 2 = 1">
border-width:0px 1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;
</xsl:when>
<xsl:otherwise>
border-width:0px 1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444; background-color:#F2F5F8;
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:value-of select="usr_yyyyyyyy" />
</td>
</tr>HTMLソース
ブラウザで一覧表のHTMLソースを表示した場合、以下の通りです。
<tr>
<td class="smp-cell-data smp-cell-1-4 smp-cell smp-cell-row-1 smp-cell-col-4" align="left" style=”border-width:0px
1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;”>
テキストA
</td>
<td class="smp-cell-data smp-cell-1-5 smp-cell smp-cell-row-1 smp-cell-col-5" align="left" style=”border-width:0px
1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;
background-color:#F2F5F8; ”>
テキストB
</td>
</tr>
<tr>
<td class="smp-cell-data smp-cell-2-4 smp-cell smp-cell-row-2 smp-cell-col-4" align="left" style=”border-width:0px
1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;”>
テキストC
</td>
<td class="smp-cell-data smp-cell-2-5 smp-cell smp-cell-row-2 smp-cell-col-5" align="left" style=”border-width:0px
1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;
background-color:#F2F5F8; ”>
テキストD
</td>
</tr>変更手順
- tr要素とtd要素を削除し、代わりにdiv要素を記述します。
- div要素の中で、
<xsl:value-of select="usr_xxxxxxxx" />と<xsl:value-of select="usr_yyyyyyyy" />を「,（カンマ）」で連結します。
注意事項
- データ行部分の
<xsl:for-each select="data/record"></xsl:for-each>は、検索条件に合ったレコードが1行ずつ繰り返し表示される部分です。 そのため、<xsl:for-each select="data/record"></xsl:for-each>は削除しないでください。 - table要素を使わないのでtd要素を削除しますが、元のtd要素に対し、style属性を付加する
<xsl:attribute name="style">が記述されているため、td要素だけ削除すると、付加する対象がなくなり、エラーになります。
また、<xsl:attribute name="style">の下に記述されている<xsl:when test="position() mod 2 = 1">は、1行おきに背景色を変えるためにデザインが記述されています。 各データの表示部分で1行おきに背景色を変えるデザインを引き続き使う場合、td要素をdiv要素などに置き換えて、<xsl:attribute name="style">とセットで記述してください。
1行おきに背景色を変える必要がない場合、td要素および<xsl:attribute name="style">は削除してください。
変更後の設定
変更後のXSL
変更後のXSLは以下の通りです。
<xsl:for-each select="data/record">
<div> <xsl:value-of select="usr_xxxxxxxx" /> , <xsl:value-of select="usr_yyyyyyyy" /> </div>
</xsl:for-each>HTMLソース
ブラウザで一覧表のHTMLソースを表示した場合、変更後は以下の通りです。
<div> テキストA , テキストB </div>
<div> テキストC , テキストD </div>