mtapp.multiField() の取り出しサンプル01 - table in multi-column
mtapp.multiField() のデータを取り出す際のサンプルテンプレートをご紹介します。
この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何？という方は弊社の「MTAppjQuery」の製品ページをご覧ください。
MTAppjQuery v2 の目玉機能である mtapp.multiField の取り出しテンプレートのサンプルです。mt:Foreach mt:NestVar mt:IfNestVar を使うと効果的です。
フィールドブロック
user.js
(function($){
mtapp.multiField({
debug: false,
id: 81,
label: 'マルチフィールドA',
fieldGroups: [
[
{
type: 'multi-column', label: 'マルチフィールドA', options: [
{
type: 'table', label: '表', col: 12, options: [
{type: 'text', label: 'テキスト1'},
{type: 'text', label: 'テキスト2'},
{type: 'text', label: 'テキスト3'}
]
},
{
type: 'radio', label: 'ラジオボタン', col: 12, options: [
{label: 'パターンA', data: 'a'},
{label: 'パターンB', data: 'b'}
]
}
]
}
]
]
});
})(jQuery);保存されている JSON データ
{
"items":[
{
"type":"multi-column",
"label":"マルチフィールドA",
"options":[
{
"type":"table",
"label":"表",
"col":12,
"options":[
{
"type":"text",
"label":"テキスト1"
},
{
"type":"text",
"label":"テキスト2"
},
{
"type":"text",
"label":"テキスト3"
}
]
},
{
"type":"radio",
"label":"ラジオボタン",
"col":12,
"options":[
{
"label":"パターンA",
"data":"a"
},
{
"label":"パターンB",
"data":"b"
}
]
}
],
"id":"id-11tdlgwsg50",
"data":[
{
"type":"table",
"label":"表",
"col":12,
"options":[
{
"type":"text",
"label":"テキスト1"
},
{
"type":"text",
"label":"テキスト2"
},
{
"type":"text",
"label":"テキスト3"
}
],
"data":[
[
{
"type":"text",
"label":"テキスト1",
"id":"id-2purlpgddo4",
"data":"テキスト1-1"
},
{
"type":"text",
"label":"テキスト2",
"id":"id-205kkq1wugz",
"data":"text2-1"
},
{
"type":"text",
"label":"テキスト3",
"id":"id-135g0ykrvdj",
"data":"text3-1"
}
]
],
"id":"id-104pcm20q09"
},
{
"type":"radio",
"label":"ラジオボタン",
"col":12,
"options":[
{
"label":"パターンA",
"data":"a"
},
{
"label":"パターンB",
"data":"b"
}
],
"id":"id-1l49axwtybs",
"data":"b"
}
]
}
]
}テンプレート
<mt:SetVarBlock name="json">ここで保存されている JSON データが json 変数にセットされるとする</mt:SetVarBlock>
<mt:Var name="json" json_decode="1" setvar="json" />
<mt:Var name="json" key="items" setvar="items" />
<mt:Ignore>mtapp.multiField() の1つのブロック（ボタンを押して追加できるフィールドセット）を block 変数に代入</mt:Ignore>
<mt:Foreach name="items" as="block" compress="2">
<mt:Ignore>block が multi-column の場合</mt:Ignore>
<mt:IfNestVar name="block.type" eq="multi-column">
<mt:Ignore>multi-column 内の各フィールドを field 変数に代入</mt:Ignore>
<mt:Foreach name="block.data" as="field">
<mt:Ignore>table フィールドの場合</mt:Ignore>
<mt:IfNestVar name="field.type" eq="table">
<table>
<thead>
<mt:Foreach name="field.options" as="column">
<th><mt:NestVar name="column.label" /></th>
</mt:Foreach>
</thead>
<tbody>
<mt:Foreach name="field.data" as="row">
<mt:Foreach name="row" as="column">
<td><mt:NestVar name="column.data" /></td>
</mt:Foreach>
</mt:Foreach>
</tbody>
</table>
</mt:IfNestVar>
<mt:Ignore>radio フィールドの場合</mt:Ignore>
<mt:IfNestVar name="field.type" eq="radio">
<mt:NestVar name="field.data" setvar="selected" />
<mt:Foreach name="field.options" as="option">
<mt:IfNestVar name="option.data" eq="$selected">
<mt:NestVar name="option.label" /> が選択されています。
</mt:IfNestVar>
</mt:Foreach>
</mt:IfNestVar>
</mt:Foreach>
</mt:IfNestVar>
</mt:Foreach>出力HTML
※実際は compress="2" によりインデントと空行は削除されます。
<table>
<thead>
<th>テキスト1</th>
<th>テキスト2</th>
<th>テキスト3</th>
</thead>
<tbody>
<td>テキスト1-1</td>
<td>text2-1</td>
<td>text3-1</td>
</tbody>
</table>
パターンB が選択されています。
Published 2021-05-07
, Updated 2021-05-07
, Updated 2021-05-07