姓と名の検索フォームを横並びにする方法

スパイラル®の検索フォームは、「設定デザイン」または「ソースデザイン」からデザイン編集を行います。
※これらの違いについては、前回のTips「カレンダー表示!検索フォームのカスタマイズ」でご紹介しています。

複数の検索対象フィールド、例えば「姓名を横並び」にする場合、ソースデザインから編集する必要があります。
今回は、その方法についてご紹介していきます。

デモはこちら



1. 「設定デザイン」で検索対象フィールドを追加する

一覧表の検索フォーム設定から、まずは「設定デザイン」を選択し、検索対象とするフィールドを追加します。

検索フォームの設定画面01

追加したら、保存ボタンを押します。

2. 「ソースデザイン」でXSLを編集する

続いて、「ソースデザイン」を選択。
XML設定では、先程追加したフィールドの使用設定欄にチェックが入っていることが分かります。

検索フォームの設定画面02

確認が済んだら、XSL設定に移りましょう。
ソース編集の前に、【検索フォームXSLの構造】について見ていきたいと思います。

XMLの構造

構造をみると、「各フィールドを呼び出す“searchFormのテンプレート”」「“各フィールド(フォーム)のテンプレート”」の2つのパーツから成り立っていることが分かります。
編集箇所は以下の2つ。

  • ① searchFormのテンプレート内「各テンプレートを呼び出す記述」
  • ② 「姓名(セイ)(メイ)のテンプレート」

① searchFormのテンプレート内「各テンプレートを呼び出す記述」

・姓名を呼び出す記述部分を<tr><td>タグで囲む

変更前のソース
XSLのソース画像01

変更後のソース
XSLのソース画像02

② 「姓名(セイ)(メイ)のテンプレート」

・<table>構成を<div>に変更
・検索機能の記述を残し、デザインに関わる記述を削除

変更前のソース(赤枠は残します) ※画像をクリックすると拡大表示
XSLのソース画像03

変更後のソース

<!-- 姓名(セイ) -->
<xsl:template match="usr_lastNameKana">
  <div style="display:none;">
    <input type="hidden" name="{option/exType/@name}" value="16" />
  </div>
  セイ<input type="text" style="width:100%;" name="{main/@name}">
    <xsl:if test=".">
      <xsl:attribute name="value">
        <xsl:value-of select="main" />
      </xsl:attribute>
    </xsl:if>
  </input>
  <div style="display:none;">
    <input type="hidden" name="{option/action/@name}" value="0" />
  </div>
</xsl:template>

姓名(メイ)のテンプレートも同じように、変更します。

3. 編集した検索対象フィールドにCSSを追加する

姓名のフィールドを横並びさせるベースは出来ました。
最後に、変更した「姓名(カナ)テンプレートを呼び出す記述」に、「各フィールドのテンプレート」の<tr><td>で設定しているCSSを追加します。

また、姓名入力欄の幅の調整も必要です。こちらに関しては、今回width:40%で設定しています。

CSS設定後 ※画像をクリックすると拡大表示

XSLのソース02

XSLのソース03

【カスタマイズ前】
カスタマイズ前

【カスタマイズ後】
カスタマイズ後