レコードリストで姓名を結合して同じ列で表示したい

DBで「姓」と「名」のフィールドを分けている場合、レコードリストを作成した際に列も分かれてしまいます。
この記事では姓と名を同じ列に結合して出力し、氏名として表示させる方法をご紹介いたします。

設定イメージ

「姓」と「名」のフィールドを分けている場合、レコードリストを作成すると以下のように列も分かれて表示されます。

この記事では、姓名のフィールドを1つの列にまとめて、1つの氏名フィールドのように表示する設定方法をご紹介いたします。

設定方法

リストヘッダを変更する

既存の姓名のリストヘッダ部分を下記のソースに置換してください。
ソース内の「f0X」の「X」の部分は「姓」のフィールドIDに変更してください。
フィールドIDの確認場所

ヘッダソートなし

<!--/* 氏名 (姓名同列表示) */-->
<th scope="col">
  <span th:text="${fields['f0X'].label}">Label</span>
</th>

ヘッダソートあり

ヘッダソートを使用する場合、DB設定からソートするフィールド（姓）にインデックスを設定する必要があります。
ソートは「f0X」部分に設定したフィールドのみでソートされます。姓でソートを設定した場合、同じ姓のレコードが複数ある場合でも名でのソートは行われません。

<!--/* 氏名 (姓名同列表示) */-->
<th scope="col">
  <a th:class="${pagination.isSorted('f0X')} ? |sp-${pagination.getSortDirection('f0X')}-sorted|" th:href="${pagination.getLinkWithSort('f0X')}">
    <span th:text="${fields['f0X'].label}">Label</span>
    <span class="sp-sorting-desc"><i class="fa fa-angle-down"></i></span>
    <span class="sp-sorting-asc"><i class="fa fa-angle-up"></i></span>
  </a>
</th>

例：ソース編集前

例：ソース編集後

ラベルを変更する

リストヘッダのラベルは「f0X」部分に置換した姓のフィールドのラベルを出力する仕組みになっています。
ラベルを変更するにはレコードリストタブ右上の「データフィールド一覧」をクリックし、姓のフィールドを選択しラベルを入力してください。

リストデータを変更する

既存の姓名のリストデータ部分を下記のソースに置換してください。
ソース内の「f0X」の「X」の部分は「姓」のフィールドIDに変更し、
「f0Y」の「Y」の部分は「名」のフィールドIDに変更してください。
フィールドIDの確認場所

<!--/* 氏名 (姓名同列表示) */-->
<sp:record-data-field name="f0X"></sp:record-data-field>
<sp:record-data-field name="f0Y"></sp:record-data-field>
<td>
  <span th:text="|${record['f0X']} ${record['f0Y']}|">Example</span>
</td>