MTAppjQuery v2 で追加された目玉機能の mtapp.multiField に、独自のフィールドを追加する方法をご紹介します。思ったより簡単にできると思いますのでぜひお試しください。
この機能は現在は非推奨となっています。
MTAppjQuery v2 で追加された目玉機能の mtapp.multiField
に、独自のフィールドを追加する方法をご紹介します。思ったより簡単にできると思いますのでぜひお試しください。
はじめに、MTAppjQuery のプラグイン本体の中の tmpl/template_source_header.tmpl の内容をコピーします。
次に、 「システム > テンプレート > テンプレートの作成」 からグローバルテンプレートモジュールの作成画面を開き、コピーしたテンプレートを貼り付けます。そして template_source_header という名前で保存します。
この作業順序は非常に重要ですので注意してください。
試しに、今保存したテンプレートの1行目に任意の文字列を入れて保存してみてください。 下図のようにその文字列がページに表示されれば準備完了です。
user.js で mtapp.multiField
を適用するときに、今回追加するフィールドを表示させるための type 名とラベルを決めます。具体的には下記の部分になります。
mtapp.multiField({
id: 87,
label: 'マルチカラムテーブル',
fieldGroups: [
[
{ 'type' : '【この部分】', 'label' : '【この部分】' }
]
]
});
今回は2カラムのテーブルフィールドにしようと思うので、 2column-table
と 2カラムテーブル
とします。
さて、フィールドタイプを決めたので、 user.js でそのフィールドを含めて mtapp.multiField
を実行してみます。コードは下記のようになります。
mtapp.multiField({
id: 87,
label: 'マルチカラムテーブル',
showAddFieldButton: true,
showViewRawDataButton: true,
fieldGroups: [
[
{ 'type' : '2column-table', 'label' : '2カラムテーブル' }
]
]
});
id
の部分は mtapp.multiField
を適用する テキスト(複数行) フィールドのIDに書き換えてください。
この状態でコンテンツデータの編集画面を表示すると下図のようになります。
「2カラムテーブル」というボタンは追加されましたが、それをクリックしてもフィールドは追加されません。
今回作ったフィールドのデータをどのように保存させたいかを決めます。今回は単純に下記のように cell01
から cell06
まで同じ階層で持たせようと思います。
mtapp.multiField({
id: 87,
label: 'マルチカラムテーブル',
showAddFieldButton: true,
showViewRawDataButton: true,
fieldGroups: [
[
{
"type" : "2column-table", "label" : "2カラムテーブル", "data" : {
"cell01": "",
"cell02": "",
"cell03": "",
"cell04": "",
"cell05": "",
"cell06": "",
}
}
]
]
});
これを user.js に反映させます。
次に、「2カラムテーブル」というボタンをクリックしたときに追加されるフィールドを定義します。
一番最初に作成した template_source_header
という名前のグローバルモジュールをカスタマイズしてきます。
96行目辺りに <mt:Ignore>=== END 基本的なフィールド ===</mt:Ignore>
というコメントがありますので、その下に、下記のコードを挿入します。
<mt:Ignore>=== 2カラムテーブル ===</mt:Ignore>
<template v-else-if="item.type === '2column-table'">
<div class="row" v-bind:id="item.id">
<div class="col-md-6">
<table class="table mt-table">
<thead>
<tr>
<th>table1-1</th>
<th>table1-2</th>
<th>table1-3</th>
</tr>
</thead>
<tbody>
<th><input class="form-control" type="text"></th>
<th>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</th>
<th>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</th>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table mt-table">
<thead>
<tr>
<th>table1-1</th>
<th>table1-2</th>
<th>table1-3</th>
</tr>
</thead>
<tbody>
<th><input class="form-control" type="text"></th>
<th>
<select class="form-control">
<option value=""> - </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</th>
<th>
<select class="form-control">
<option value=""> - </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</th>
</tbody>
</table>
</div>
</div>
</template>
<mt:Ignore>=== END 2カラムテーブル ===</mt:Ignore>
これで 2カラムテーブル ボタンを押せば下図のようにフィールドが追加されます。まだ順番を並べ替えるボタンなどは動きません。
次に、データ保存できるようにします。今回追加する予定の input:text
と select
に、下記のように v-model="item.data.cell01"
のような形で v-model 属性をセットしていきます。この "item.data.cell01"
は先程決めたデータの持たせ方に依存します。
<mt:Ignore>=== 2カラムテーブル ===</mt:Ignore>
<template v-else-if="item.type === '2column-table'">
<div class="row" v-bind:id="item.id">
<div class="col-md-6">
<table class="table mt-table">
<thead>
<tr>
<th>table1-1</th>
<th>table1-2</th>
<th>table1-3</th>
</tr>
</thead>
<tbody>
<th><input class="form-control" type="text" v-model="item.data.cell01"></th>
<th>
<select class="form-control" v-model="item.data.cell02">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</th>
<th>
<select class="form-control" v-model="item.data.cell03">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</th>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table mt-table">
<thead>
<tr>
<th>table1-1</th>
<th>table1-2</th>
<th>table1-3</th>
</tr>
</thead>
<tbody>
<th><input class="form-control" type="text" v-model="item.data.cell04"></th>
<th>
<select class="form-control" v-model="item.data.cell05">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</th>
<th>
<select class="form-control" v-model="item.data.cell06">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</th>
</tbody>
</table>
</div>
</div>
</template>
<mt:Ignore>=== END 2カラムテーブル ===</mt:Ignore>
これでデータが保存できるようになります。
追加したテンプレートの前後を、
<template v-else-if="item.type === '2column-table'">
</template>
で囲むのを忘れずに。
追加したフィールドの一番外枠の要素(上記の例では div.row
)に v-bind:id="item.id"
をつける。
<div class="row" v-bind:id="item.id">
汎用性を持たせようとすると大変になるので、今回の例のように案件用に HTML やデータの形を決めて固定した方が簡単です。
この程度のオリジナルフィールドであれば、 Vue.js の知識がなくても上記のお作法に沿って作れば意外と簡単に拡張できるのが分かっていただけたら嬉しいです。ぜひお試しください。
より複雑なフィールドが必要な場合は bit part に問い合わせください。
以上です。