ver.1サポートサイト

一覧表で、固定文字列を設けて単票へリンクさせる

最終更新日:2017年11月29日

スパイラルの一覧表で、単票へのリンクを固定文字列で設定する方法をご案内いたします。

変更前の設定

元の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&amp;_act=Use&amp;_sort_0_2206=id_down&amp;_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&amp;_act=Use&amp;_sort_0_2206=f000XXXXXX_up&amp;_sort_1_2206=id_up&amp;_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&amp;_act=UseCard&amp;_card_page_id=XXXXX&amp;_card_member_id=1&amp;_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&amp;_act=Use&amp;_sort_0_2206=id_down&amp;_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&amp;_act=Use&amp;_sort_0_2206=f000XXXXXX_up&amp;_sort_1_2206=id_up&amp;_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&amp;_act=Use&amp;_sort_0_2206=f000XXXXXX_up&amp;_sort_1_2206=id_up&amp;_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&amp;_act=UseCard&amp;_card_page_id=XXXXX&amp;_card_member_id=1&amp;_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&amp;_act=UseCard&amp;_card_page_id=XXXXX&amp;_card_member_id=1&amp;_card_db_id=XXXX" target="_self">詳細</a></td>
</tr>