MTAppJSONTable の各セルの入力欄は input または textarea のどちらかを選べるようになっています。

もし、この入力欄を「ドロップダウンリスト」「ラジオボタン」「チェックボックス」などの入力欄にしたい場合は、MTAppMultiForm や MTAppMultiCheckbox を組みあわせて作成します。

ここでは、MTAppMultiForm を組みあわせてドロップダウンリストにする方法を紹介します。

MTAppJSONTable を適用する

MTAppJSONTable を利用して下記の仕様のテーブルを作成します。

• 項目名：入力タイプ
  • ステータス：1行テキスト
  • 名前：1行テキスト
  • 説明：複数行テキスト
• ヘッダーの位置：上部
• 行の追加：あり

コードは下記のようになります。

(function($){
    $('#customfield_document_textarea').MTAppJSONTable({
        inputType: {
            optionsShow: "input",
            optionsName: "input",
            optionsText: "textarea"
        },
        header: {
            optionsShow: "ステータス",
            optionsName: "名前",
            optionsText: "説明"
        },
        headerOrder: [
            "optionsShow",
            "optionsName",
            "optionsText"
        ],
        add: true
    });
})(jQuery);

一部の入力欄をドロップダウンリストにする

上記項目のうち「ステータス」を MTAppMultiForm を利用して「有効」「無効」を選択するドロップダウンリストにします。

MTAppMultiForm は、テーブルを構築し終わったときに呼ばれる cbAfterBuild オプションを利用して適用します。

(function($){
    $('#customfield_document_textarea').MTAppJSONTable({
        inputType: {
            optionsShow: "input",
            optionsName: "input",
            optionsText: "textarea"
        },
        header: {
            optionsShow: "ステータス",
            optionsName: "名前",
            optionsText: "説明"
        },
        headerOrder: [
            "optionsShow",
            "optionsName",
            "optionsText"
        ],
        add: true,
        cbAfterBuild: function(cb, $container){
            $container.find('.optionsShow .jsontable-input').MTAppMultiForm({
                type: "select",
                items: ["有効", "無効"]
            });
        },
    });
})(jQuery);

MTAppJSONTable では header オプションで設定したキー（プロパティ名）が、各セル（ td ）のクラス名として付与されます。上記の例で言えば optionsShow がそれに当たります。

したがって、項目ごとに何か処理を追加したい場合は、そのクラス名を利用してセルを絞り込みます。 .jsontable-input は値を入力する input または textarea に付与されるクラス名です。

$container.find('.optionsShow .jsontable-input')

MTAppMultiForm の使い方は、下記のページをご覧ください。

• MTAppMultiForm

追加した行の一部の入力欄をドロップダウンリストにする

add: true が設定されている場合は、後から追加した行にも MTAppMultiForm を適用してドロップダウンリストにする必要がありますので、行が追加された後に呼ばれる cbAfterAdd オプションでも MTAppMultiForm を適用します。

コードは下記のようになります。

(function($){
    $('#customfield_document_textarea').MTAppJSONTable({
        inputType: {
            optionsShow: "input",
            optionsName: "input",
            optionsText: "textarea"
        },
        header: {
            optionsShow: "ステータス",
            optionsName: "名前",
            optionsText: "説明"
        },
        headerOrder: [
            "optionsShow",
            "optionsName",
            "optionsText"
        ],
        add: true,
        cbAfterBuild: function(cb, $container){
            $container.find('.optionsShow .jsontable-input').MTAppMultiForm({
                type: "select",
                items: ["有効", "無効"]
            });
        },
        cbAfterAdd: function(cb, $container){
            $container.find('tr:last .optionsShow .jsontable-input').MTAppMultiForm({
                type: "select",
                items: ["有効", "無効"]
            });
        }
    });
})(jQuery);

cbAfterAdd オプションに追加したコードは cbAfterBuild に追加したコードとほぼ同じですが、 .find() の中身だけ少し違います。

.find('tr:last .optionsShow .jsontable-input')

ここではセルを絞り込む .optionsShow の前に tr:last を入れて、追加された行、つまりテーブルの最終行に絞り込んでいます。

列を追加する場合（ヘッダーが左の表の場合）

もし headerPosition: left が設定されている場合、追加された列に対する MTAppMultiForm の適用方法は下記のようになります。

$container.find('td.optionsShow:last-child .jsontable-input').MTAppMultiForm({
    type: "select",
    items: ["有効", "無効"]
});

td.optionsShow:last-child の部分で optionsShow クラスの td の中で tr の最後の子要素 :last-child としています。

なお、 cbAfterAdd オプションの第一引数に渡されるオブジェクトの type プロパティを使って、追加されたのが行か列かを判定することも可能です。

cbAfterAdd: function(cb, $container){
    // 行を追加したとき
    if (cb.type === 'row') {
        $container.find('tr:last .optionsShow .jsontable-input').MTAppMultiForm({
            type: "select",
            items: ["有効", "無効"]
        });
    }
    // 列を追加したとき
    else {
        $container.find('td.optionsShow:last-child .jsontable-input').MTAppMultiForm({
            type: "select",
            items: ["有効", "無効"]
        });
    }
}

オプションを変数にまとめる

最後に、コードの見やすさと修正のしやすさを考えて、MTAppJSONTable と MTAppMultiForm に渡すオプションを変数化します。

コードは以下のようになります。

(function($){
    var multiformSettings = {
        type: "select",
        items: ["有効", "無効"]
    };
    var jsontableSettings = {
        inputType: {
            optionsShow: "input",
            optionsName: "input",
            optionsText: "textarea"
        },
        header: {
            optionsShow: "ステータス",
            optionsName: "名前",
            optionsText: "説明"
        },
        headerOrder: [
            "optionsShow",
            "optionsName",
            "optionsText"
        ],
        add: true,
        cbAfterBuild: function(cb, $container){
            $container.find('.optionsShow .jsontable-input').MTAppMultiForm(multiformSettings);
        },
        cbAfterAdd: function(cb, $container){
            // 行を追加したとき
            if (cb.type === 'row') {
                $container.find('tr:last .optionsShow .jsontable-input').MTAppMultiForm(multiformSettings);
            }
            // 列を追加したとき
            else {
                $container.find('td.optionsShow:last-child .jsontable-input').MTAppMultiForm(multiformSettings);
            }
        }
    };
    $('#customfield_document_textarea').MTAppJSONTable(jsontableSettings);
})(jQuery);

以上です。