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 の使い方は、下記のページをご覧ください。
追加した行の一部の入力欄をドロップダウンリストにする
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);
以上です。