MTAppJSONTableでテーブルを初期状態で表作る方法（改良版）

Posted on:2017-05-08

この記事は、以前にQiitaに投稿した記事を自前にブログに移植したものになります。【Tips】MTAppJSONTableでテーブルを初期状態で表作る方法（改良版）

以前【Tips】MTAppJSONTableのテーブルを初期状態で表作る方法という方法を教えてもらい書いたのですが、必須の時にエラーなどを出すとカスタムフィールドに設定したJSONがいるテーブルが消えてしまうことに気づき、別の方法を教えてもらったのでメモとしてのこしておきます。

結論としては、JSの中にオブジェクトを変数にセットしておきそれをテーブル予定のカスタムフィールドのtextareaに渡すという方法になります。

パターン1：文字列として定義し置換してvalで代入

  • textareaが空のときにだけ実行するように分岐させておく
  • MTAppJSONTableで使用するJSONを文字列として変数にセットしておく
  • " を \" を置換する
  • textareaに置換した変数を代入
  • 代入後、MTAppJSONTableを初期化
user.js
// MTAppJSONTableを実行する前に入れる
// textareaが空のときだけにする（ID名はカスタムフィールド名）
if (!$("#customfield_jsontable").val()) {
  // 初期値用の値をセットする
  var json_table =
    '{"items":[{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""}]}';
  var str_table = json_table.replace(/"/g, '"');
  // textareaに変換した値を代入する
  $("#customfield_jsontable").val(str_table);
}
// MTAppJSONTable を初期化
$("#customfield_jsontable").MTAppJSONTable({
  // 処理
});

パターン2：JSON.stringifyを使ってvalで代入

  • textareaが空のときにだけ実行するように分岐させておく
  • オブジェクトとして変数にセットしておく
  • JSON.stringifyでオブジェクトをJSONに変換させる
  • \" を "、\[ を [、]" を ] に置換する
  • textareaに置換した変数を代入
  • 代入後、MTAppJSONTableを初期化
user.js
// MTAppJSONTableを実行する前に入れる
// textareaが空のときだけにする（ID名はカスタムフィールド名）
if (!$("#customfield_jsontable").val()) {
  // 初期値用の値をセットする
  // 通常のオブジェクトとして変数に定義
  var json_table = {
    items: [
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
      { table_item: "" },
    ],
  };
  // stringifyでオブジェクトをJSONに変換する
  var str_table = JSON.stringify(json_table);
  str_table = str_table
    .replace(/\\"/g, '"')
    .replace(/"\[/g, "[")
    .replace(/\]"/g, "]");
  // textareaに変換した値を代入する
  $("#customfield_jsontable").val(str_table);
}
// MTAppJSONTable を初期化
$("#customfield_jsontable").MTAppJSONTable({
  // 処理
});