mtapp.multiField() の取り出しサンプル01 - table in multi-column

MTAppjQuery v2 の目玉機能である mtapp.multiField の取り出しテンプレートのサンプルです。mt:Foreach mt:NestVar mt:IfNestVar を使うと効果的です。

フィールドブロック

2021 05 07 18 08 28

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 が選択されています。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

MTAppjQuery