ver.1サポートサイト

一覧表で、tableタグを使わないで表示

最終更新日:2020年11月20日

一覧表ページの構造は大まかに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>

変更手順

  1. tr要素とtd要素を削除し、代わりにdiv要素を記述します。
  2. div要素の中で、<xsl:value-of select="usr_xxxxxxxx" /> と<xsl:value-of select="usr_yyyyyyyy" />を「,(カンマ)」で連結します。
注意事項

  1. データ行部分の<xsl:for-each select="data/record"></xsl:for-each>は、検索条件に合ったレコードが1行ずつ繰り返し表示される部分です。
    そのため、<xsl:for-each select="data/record"></xsl:for-each>は削除しないでください。
  2. 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>