一覧表で、固定文字列を設けて単票へリンクさせる
最終更新日:2023年03月08日
スパイラルの一覧表で、単票へのリンクを固定文字列で設定する方法をご案内いたします。
変更前の設定
元のXSL
ソースデザイン画面にて、XSLは以下の通りに設定されています。
<!-- データ部分 -->
<xsl:template match="/table">
（中略）
<xsl:for-each select="data/record">
<!-- データ部分 -->
</xsl:for-each>
（中略）
</xsl:template>HTMLソース
ブラウザで一覧表のHTMLソースを表示した場合、以下の通りです。
ヘッダー（項目タイトル）部分
<tr class="smp-row-3 smp-row-sort" style="height:20;">
<td class="smp-cell-sort smp-cell-3-1 smp-cell smp-cell-row-3 smp-cell-col-1" style="border:1px solid #999999; padding:5px; font-size:10pt; font-weight:bold; color:#444444; background-color:#DCDCDE;" align="center">
<a href="?_application_id=50&_act=Use&_sort_0_2206=id_down&_sort_length=3">id ▲</a>
</td>
<td class="smp-cell-sort smp-cell-3-2 smp-cell smp-cell-row-3 smp-cell-col-2" style="border:1px solid #999999; padding:5px; font-size:10pt; font-weight:bold; color:#444444; background-color:#DCDCDE;" align="center">
<a href="?_application_id=50&_act=Use&_sort_0_2206=f000XXXXXX_up&_sort_1_2206=id_up&_sort_length=3">登録日時</a>
</td>
（中略）
</tr>データ行部分
<tr style="height:20;" class="smp-row-4 smp-row-data">
<td class="smp-cell-data smp-cell-4-1 smp-cell smp-cell-row-4 smp-cell-col-1" align="center" style="border-width:0px 1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;">
<a href="/spiral/servlet/member.parts.SettingTable?_application_id=50&_act=UseCard&_card_page_id=XXXXX&_card_member_id=1&_card_db_id=XXXX" target="_self">1</a>
</td>
<td class="smp-cell-data smp-cell-4-2 smp-cell smp-cell-row-4 smp-cell-col-2" align="left" style="border-width:0px 1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;">
2001年1月1日 00時00分00秒
</td>
（中略）
</tr>変更手順
1. ヘッダー（項目タイトル）に一列追加します。
追加方法としてはまず、XSLソースにて <xsl:for-each select="data/record"> を検索します。
<xsl:for-each select="data/record"> の直前までがヘッダー部分であり、各項目は <td> ～ </td> で構成されています。 これに倣って任意の箇所に同様のソースを追加します。
2．データ行に一列追加します。
追加方法としてはまず、XSLソースにて </xsl:for-each> を検索します。 </xsl:for-each> の直前までがデータ行の部分であり、こちらもヘッダーと同じく <td> ～ </td> で構成されています。 これに倣って任意の箇所に同様のソースを追加します。
3 ．追加したデータ行に固定文字列を入れ、かつ単票へのリンクを設置します。
上記2で追加した列に固定文字列を入れます。単票へのリンク先については、データ行の構造の1つ目にある、
<a href="{/table/cardList/card[@title='page_XXXXX'][@recordId=$id]}" target="_self">を流用します。
（データ行追加 ソース例）
<td class="smp-cell-data smp-cell-{$row}-6 smp-cell smp-cell-row-{$row} smp-cell-col-6" 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>
<a href="{/table/cardList/card[@title='page_XXXXX'][@recordId=$id]}" target="_self">詳細</a>
</td>4 ．フッターに一列追加します。
XSLソース内の最下部にある以下のソースにおいて、「colspan」の値を追加した列の分だけプラスします。
</xsl:for-each>
<tr class="smp-row-14 smp-row-normal" style="height:10;">
<td class="smp-cell-14-1 smp-cell smp-cell-row-14 smp-cell-col-1" style="font-size:10pt;border:1px solid #999999;background-color:#DCDCDE;" align="left" colspan="6"></td>
</tr>変更後の設定
変更後のXSL
<!-- データ部分 -->
<xsl:template match="/table">
（中略）
<td class="smp-cell-sort smp-cell-3-6 smp-cell smp-cell-row-3 smp-cell-col-6" style="border:1px solid #999999; padding:5px; font-size:10pt; font-weight:bold; color:#444444; background-color:#DCDCDE;" align="center">
<a href="{/table/fieldList/field[@title='f000120737']/@sort}">
<xsl:text>詳細</xsl:text>
<xsl:call-template name="sortText">
<xsl:with-param name="field" select="'f000XXXXXXX" />
</xsl:call-template>
</a>
</td>
<xsl:for-each select="data/record">
<!-- データ部分 -->
（中略）
<td class="smp-cell-data smp-cell-{$row}-6 smp-cell smp-cell-row-{$row} smp-cell-col-6" 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>
<a href="{/table/cardList/card[@title='page_10061'][@recordId=$id]}" target="_self">詳細</a>
</td>
</xsl:for-each>
（中略）
</xsl:template>HTMLソース
ヘッダー（項目タイトル）部分
<tr class="smp-row-3 smp-row-sort" style="height:20;">
<td class="smp-cell-sort smp-cell-3-1 smp-cell smp-cell-row-3 smp-cell-col-1" style="border:1px solid #999999; padding:5px; font-size:10pt; font-weight:bold; color:#444444; background-color:#DCDCDE;" align="center">
<a href="?_application_id=50&_act=Use&_sort_0_2206=id_down&_sort_length=3">id ▲</a>
</td>
<td class="smp-cell-sort smp-cell-3-2 smp-cell smp-cell-row-3 smp-cell-col-2" style="border:1px solid #999999; padding:5px; font-size:10pt; font-weight:bold; color:#444444; background-color:#DCDCDE;" align="center">
<a href="?_application_id=50&_act=Use&_sort_0_2206=f000XXXXXX_up&_sort_1_2206=id_up&_sort_length=3">登録日時</a>
</td>
（中略）
<td class="smp-cell-sort smp-cell-3-6 smp-cell smp-cell-row-3 smp-cell-col-6" style="border:1px solid #999999; padding:5px; font-size:10pt; font-weight:bold; color:#444444; background-color:#DCDCDE;" align="center">
<a href="?_application_id=50&_act=Use&_sort_0_2206=f000XXXXXX_up&_sort_1_2206=id_up&_sort_length=3">詳細</a>
</td>
</tr>データ行部分
<tr style="height:20;" class="smp-row-4 smp-row-data">
<td class="smp-cell-data smp-cell-4-1 smp-cell smp-cell-row-4 smp-cell-col-1" align="center" style="border-width:0px 1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;">
<a href="/spiral/servlet/member.parts.SettingTable?_application_id=50&_act=UseCard&_card_page_id=XXXXX&_card_member_id=1&_card_db_id=XXXX" target="_self">1</a>
</td>
<td class="smp-cell-data smp-cell-4-2 smp-cell smp-cell-row-4 smp-cell-col-2" align="left" style="border-width:0px 1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;">
2001年1月1日 00時00分00秒
</td>
（中略）
<td class="smp-cell-data smp-cell-4-6 smp-cell smp-cell-row-4 smp-cell-col-6" align="left" style="border-width:0px 1px; border-style:solid; border-color:#999999; padding:5px; font-size:10pt; color:#444444;">
<a href="/spiral/servlet/member.parts.SettingTable?_application_id=50&_act=UseCard&_card_page_id=XXXXX&_card_member_id=1&_card_db_id=XXXX" target="_self">詳細</a>
</td>
</tr>