MTAppjQuery の mtapp.multiField v2 で初期値をセットしたり始めからフィールドを表示させたりする方法をご紹介します。
MTAppjQuery の mtapp.multiField v2 で初期値をセットしたり始めからフィールドを表示させたりする方法をステップバイステップでご紹介します。
まずは user.js
に下記のように普通に mtapp.multiField
を適用させます。
(function($){
mtapp.multiField({
version: 2, // 忘れないように!
id: 26, // 適宜変更してください。
label: '初期値有りテーブルサンプル',
showViewRawDataButton: true, // 始めは true にします。
fieldBlocks: {
sampleTable: {
type: 'table-vertical-fixed', label: '初期値有りテーブル', data: {}, fields: [
'text', 'tinymce', 'image'
]
}
},
fieldGroups: [
['sampleTable']
]
})
})(jQuery);
次に「フィールドを追加」→「初期値有りテーブル」でフィールドブロックを表示し、「保存データを表示」をクリックします。そして、表示された JSON の値をコピーします。
ステップ01 のコードの上に初期表示フィールドをセットするためのコードを挿入します。ここでは sampleTableDefault
という変数に、先ほどコピーした値を代入します。
代入する際に、id
の値の文字列を mtapp.randomString()
に、ts
の値を (new Date()).getTime()
に書き換えます。
(function($){
// 初期値の値
const sampleTableDefault = {"items":[{"data":{"text":"","tinymce":"","image":{"id":"","url":"","thumbnail":""}},"handle":"sampleTable","id":mtapp.randomString()}],"version":2,"ts":(new Date()).getTime()};
mtapp.multiField({
version: 2, // 忘れないように!
id: 26, // 適宜変更してください。
label: '初期値有りテーブルサンプル',
showViewRawDataButton: true, // 始めは true にします。
fieldBlocks: {
sampleTable: {
type: 'table-vertical-fixed', label: '初期値有りテーブル', data: {}, fields: [
'text', 'tinymce', 'image'
]
}
},
fieldGroups: [
['sampleTable']
]
})
})(jQuery);
これで先ほどのマルチフィールドを適用した画面をリロードしても表が表示されているハズです。
下記のように sampleTableDefault
を代入するところで初期値を入れれば各フィールドに初期値をセットすることもできます。
(function($){
// 初期値の値
const sampleTableDefault = {
"items":[
{
"data":{
"text":"初期値です",
"tinymce":"<p><strong>リッチ初期値です</strong></p>",
"image":{
"id":"66",
"url":"/files/pakutasho-01.jpg",
"thumbnail":"/mt/mt.cgi?__mode=thumbnail_image&width=80&ts=20211223123754&blog_id=5&id=66&height=120"
}
},
"handle":"sampleTable",
"id":"mtapp.randomString()"
}
],
"version":2,
"ts":"(new Date()).getTime()"
};
// 新規作成の場合に初期値をテキストエリアに入れる(26部分はフィールドIDに変更してください)
const $contentField26 = $('[name="content-field-26"]');
if ($contentField26.val() === '') {
$contentField26.val(Object.toJSON(sampleTableDefault));
}
mtapp.multiField({
version: 2, // 忘れないように!
id: 26, // 適宜変更してください。
label: '初期値有りテーブルサンプル',
showViewRawDataButton: true, // 始めは true にします。
fieldBlocks: {
sampleTable: {
type: 'table-vertical-fixed', label: '初期値有りテーブル', data: {}, fields: [
'text', 'tinymce', 'image'
]
}
},
fieldGroups: [
['sampleTable']
]
})
})(jQuery);
最後に showViewRawDataButton
に false
をセットしておきましょう。
以上です。簡単ですので是非ご活用ください。