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

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"
            }
         ]
      }
   ]
}

テンプレート

ここで保存されている JSON データが json 変数にセットされるとする



mtapp.multiField() の1つのブロック（ボタンを押して追加できるフィールドセット）を block 変数に代入


    block が multi-column の場合
    

        multi-column 内の各フィールドを field 変数に代入
        

            table フィールドの場合
            
                
                        
                        
                            
            

            radio フィールドの場合
            
                
                
                    
                         が選択されています。
                    
                
            

        
    

出力HTML

※実際は compress="2" によりインデントと空行は削除されます。

    

    
テキスト1
    
テキスト2
    
テキスト3
    
    

    
テキスト1-1
    
text2-1
    
text3-1
    

パターンB が選択されています。