【Tips】MTAppJSONTableのテーブルを初期状態で表作る方法

3318 ワード
MovableType MTAppjQuery MovableType テキストリンク

MTAppJOSONTableを初めて使ったのでメモTipsとして残しておきます。
個人的にmtAppJSONTableのイメージは追加で行や列を追加していくものだと思っていました。
要件として、新規記事を押した段階ですでに既存行や列が出た状態で表示させるという仕様があったためbit partの皆さんにやり方を教えて頂きました。
（たぶん、これからいっぱい触る機会あると思うので、技術メモをストックとして残していければいいなって思っています。。）

要件

  • 新規作成時に決められた行・列のテーブルを表示させる

解決方法

  • 新規で作成するカスタムフィールドに決めた行や列のJSONをフィールドに入れる
  • 行や列を追加できない状態でMTAppJSONTableを初期化する

手順

簡単に説明するとデフォルトの段階で表示するデータ（JSON）をカスタムフィールドに入れておき、MTAppjQueryで初期化してあげれば完成します。記事作成時には、自分が想定する行や列が表示されています。

カスタムフィールドを作成する

  • カスタムフィールドのタイプは、ブログ（今回のケースの場合）
  • 種類は複数行（JSONを入れるため）
  • ベースネームとテンプレートタグを設定する
  • 既定値に表示させたいテーブルのJSONをいれる

テーブルに出力するためのJSONを用意する

  • keyを指定（任意）
  • valueを指定（ここに入る値がtableのtdに出力されるため、既存の値がある場合はいれておくと良いかもしれません。）
{
  "items": [
    {
      "number01": "既存のテキスト表示",
      "number02": "",
      "number03": "",
      "number04": ""
    },
    {
      "number01": "既存のテキスト表示",
      "number02": "",
      "number03": "",
      "number04": ""
    },
    {
      "number01": "既存のテキスト表示",
      "number02": "",
      "number03": "",
      "number04": ""
    },
    {
      "number01": "既存のテキスト表示",
      "number02": "",
      "number03": "",
      "number04": ""
    }
  ]
}

サンプルのJSONデータを用意しておきます。
手書きで書いたので、以下のジェネレータサイトが使いやすかったので簡易的にJSONを書く際は使ってみるのはよいかもしれませんね。

user.jsを記述する

出来上がったカスタムフィールドをuser.jsに組み込む

  • ブログのテンプレートにuser.jsとuser.cssをインストール
  • user.jsに以下のソースを組み込む（addをfalseしておけばOKのようです。）
  • ※thやtdの幅を変える場合は、user.cssで行うことができます。
(function($){
  $('カスタムフィールドのクラス名をセット').MTAppJSONTable({
    headerPosition: 'top',  // 見出しの位置をセット
    inputType: {
      number01: "textarea",  // tdに入る値は、input or textarea
      number02: "textarea",
      number03: "input",
      number04: "textarea"
    },
    header: {
      number01: "見出し1",  // thのラベルを指定する
      number02: "見出し2",
      number03: "見出し3",
      number04: "見出し4"
    },
    headerOrder: [
      "number01",  // headerOederはkeyの並び順を指定します。
      "number02",
      "number03",
      "number04"
    ],
    add:   false,    // add（追加）できないようにセットすること
    clear: false    // add・checkboxを出していないので意味はありませんが、削除もfalseしておきます。念のため
    // cbAfterBuild: function(cb, $container){
      // コールバック関数
    // },
  });
})(jQuery);

cbAfterBuildは、tableが構築し終わったときに呼ばれる関数のようです。
案件ではプルダウンとか実装があったので記述しました。（サンプルでは不要）

user.jsを再構築をして完成になります。（新規記事作成画面でtableが表示される）

やり方を教えて頂いた bit part の皆さんに感謝致します。m(_ _)m