カスタムフィールドグループの追加時に必要な記述

追加

カスタムフィールドグループとは、単体の項目であるカスタムフィールドを複数まとめて取り扱うことができる機能です。利用するには、管理ページのテンプレートを編集して、記述を追加します。それぞれの管理ページのテンプレートを、systemテーマからコピーして編集します。

ここでは、追加時に必要な記述について説明します。

サンプルソース

<pre class="brush:html">
<h1>カスタムフィールドグループ demo</h1>
<table class="js-fieldgroup-sortable">
<tr>
<td><input type="button" class="item-insert" value="追加" /></td>
<td>日付</td>
<td>テキスト</td>
<td>削除</td>
</tr>
<!-- BEGIN sampleGroup:loop -->
<tr class="sortable-item">
<td class="item-handle">移動</td>
<td><input type="text" name="sampleDate[{i}]" value="{sampleDate}"  class="js-datepicker" /></td>
<td><input type="text" name="sampleText[{i}]" value="{sampleText}" /></td>
<td><input type="button" class="item-delete" value="削除" /></td>
</tr>
<!-- END sampleGroup:loop -->
<tr class="sortable-item item-template">
<td class="item-handle">移動</td>
<td><input type="text" name="sampleDate[]" class="js-datepicker" value="" /></td>
<td><input type="text" name="sampleText[]" value="" /></td>
<td><input type="button" class="item-delete" value="削除" /></td>
</tr>
</table>

<input type="hidden" name="field[]" value="sampleDate" />
<input type="hidden" name="field[]" value="sampleText" />

<input type="hidden" name="field[]" value="@sampleGroup" />
<input type="hidden" name="@sampleGroup[]" value="sampleDate" />
<input type="hidden" name="@sampleGroup[]" value="sampleText" />
</pre>

サンプルソースの表示（更新時）

---

---

カスタムフィールドグループ内のclass

カスタムフィールドグループ内では、いくつかの特殊なclassの記述があります。これらは、実際にブラウザ上で表示される際に機能します。

---

js-fieldgroup-sortable

このclassの記述がある要素内で、カスタムフィールドグループが使用できます。 ひな形となり、この要素の内容が追加されます。

item-handle

このclassの記述がある要素が、順番を変更する時に「つかむ(ドラッグする)」部分になります。

item-delete

このclassの記述がある要素で、該当するカスタムフィールドグループが削除できます。

カスタムフィールドグループ内のinput要素の記述

カスタムフィールドグループ内では、いくつかのinput要素を追加する必要があります。

通常、カスタムフィールドを作成する際には、

このような記述をしています。

カスタムフィールドグループを作成する場合には、これに加えて複数のカスタムフィールドをまとめる記述が必要になります。サンプルソース内の以下の部分では、sampleDate, sampleTextの2つに対しsampleGroupというグループ名をつけています。

テンプレート内では、ここで付けたグループ名（サンプルソースの場合は「sampleGroup」）で複数のカスタムフィールドを繰り返し表示しています。 サンプルソースの以下の部分にたります。

<!-- BEGIN sampleGroup:loop -->
<tr class="sortable-item">
<td class="item-handle">移動</td>
<td><input type="text" name="sampleDate[{i}]" value="{sampleDate}"  class="js-datepicker" /></td>
<td><input type="text" name="sampleText[{i}]" value="{sampleText}" /></td>
<td><input type="button" class="item-delete" value="削除" /></td>
</tr>
<!-- END sampleGroup:loop -->

---