複数テキスト入力欄（textarea）をテーブルに変更し、値を JSON に変換して元の欄に保存します。

使い方

$('foo').MTAppJSONTable({
    inputType: 'input',
    caption: 'bit part menbers',
    header: {nickname: 'ニックネーム', firstname: '名', lastname: '姓', sex: '性別'},
    headerPosition: 'top',
    headerOrder: ['nickname','firstname','lastname','sex'],
    footer: true,
    edit: false,
    add: true,
    clear: false,
    debug: false
});

foo には MTAppJSONTable を適用させたい textarea のセレクタを設定します。
オプション設定は下記の通りです。

保存される JSON のサンプル

下図の場合に保存される JSON は、それぞれ下記のようになります。
※実際には1行になります。

{
  "items": [
    {
      "nickname": "tinybeans",
      "firstname": "Tomohiro",
      "lastname": "Okuwaki",
      "sex": "male"
    },
    {
      "nickname": "mersy",
      "firstname": "Masashi",
      "lastname": "Yanagiya",
      "sex": "female"
    },
    {
      "nickname": "bitpart",
      "firstname": "bit part",
      "lastname": "合同会社",
      "sex": "male"
    }
  ]
}

{
  "items": [
    {
      "platform": "Movable Type",
      "name": "MTAppjQuery",
      "rating": "★★★★★"
    },
    {
      "platform": "Sublime Text 2",
      "name": "MTML Completions",
      "rating": "★★★★"
    }
  ]
}

保存した値をテンプレートで取り出す方法

MTAppJSONTable を利用して保存した JSON の値をテンプレートで取り出す方法を紹介します。

MTAppJSONTable は headerPosition オプションで1行目が見出しの表組み（top）か1列目が見出しの表組み（left）かを指定できますが、その設定によってテンプレートの取り出し方も変わってきます。

なお、ここでは記事の概要欄（MTEntryExcerpt）で MTAppJSONTable を使っているとします。

MTAppJSONTable のJSON文字列をMTタグで扱えるハッシュに変換する

はじめに、MTAppJSONTable で保存されたJSON文字列をMTタグで扱える配列・ハッシュ変数に変換する必要があります。

MTAppjQuery にはJSON文字列を配列・ハッシュ変数に変換するには、下記のように MTAppjQuery によって拡張された json_decode モディファイを利用します。

<mt:EntryExcerpt convert_breaks="0" json_decode="1" setvar="json">

保存されたJSON文字列を余計な情報のないプレーンなテキストとして扱うために convert_breaks="0" を付けることがポイントです。これで JSON 文字列がMTタグで扱える配列・ハッシュに変換されます。

そして、MTAppJSONTable で利用される JSON のルートのキーは items となりますので、下記のようにして変数 items にセットします。

<mt:Var name="json" key="items" setvar="items">

この２行を最初に書いて置けば、その後は 配列 items の中に各 JSON 要素のハッシュが入っている入れ子状態の変数になります。

変換した JSON を構造的に出力して確認する

MTAppjQuery では、MTDumper というファンクションタグが提供されています。このタグを利用すれば、上記のように json_decode モディファイアで変換したJSONを構造的に出力して確認することができます。

<MTDumper name="json">

一つの値をピンポイントで取り出す

管理画面で下図のように値が保存されているとします。

この中から、一人目のニックネームを取り出したい場合は下記のようなコードになります。

<mt:Var name="items" index="0" setvar="person">
<p><mt:Var name="person" key="nickname"></p>

これで「tinbyeans」と出力されます。1番目の要素が index="0" となるのがポイントです。

headerPosition: 'top'（1行目が見出しの表組み）の場合

1行目が見出しの表組みを、管理画面の見た目と同じような表組みで出力するテンプレートは下記のようになります。

<mt:Ignore>theadとtfootに入れるtrをセット [start]</mt:Ignore>
<mt:SetVar name="order">
<mt:SetVar name="order" function="push" value="nickname">
<mt:SetVar name="order" function="push" value="firstname">
<mt:SetVar name="order" function="push" value="lastname">
<mt:SetVar name="header" key="nickname" value="ニックネーム">
<mt:SetVar name="header" key="firstname" value="姓">
<mt:SetVar name="header" key="lastname" value="名">
<mt:SetVarBlock name="header_tr">
<tr>
<mt:Loop name="order">
  <th class="<mt:Var name="__value__">"><mt:Var name="header" key="$__value__"></th>
</mt:Loop>
</tr>
</mt:SetVarBlock>
<mt:Ignore>theadとtfootに入れるtrをセット [ end ]</mt:Ignore>
<mt:Ignore>tbodyに入れるtrをセット [start]</mt:Ignore>
<mt:SetVarBlock name="tbody_tr">
<mt:SetVar name="items_index" value="0">
<mt:Loop name="items">
  <tr>
  <mt:Var name="items" index="$items_index" setvar="item">
  <mt:SetVar name="order_index" value="0">
  <mt:Loop name="order">
    <mt:Var name="__value__" setvar="key">
    <mt:Var name="order" index="$order_index" setvar="key">
    <td class="<mt:Var name="key">"><mt:Var name="item" key="$key"></td>
    <mt:SetVar name="order_index" op="++">
  </mt:Loop>
  </tr>
  <mt:SetVar name="items_index" op="++">
</mt:Loop>
</mt:SetVarBlock>
<mt:Ignore>tbodyに入れるtrをセット [ end ]</mt:Ignore>
<mt:Ignore>最後にtableを出力 [start]</mt:Ignore>
<table class="table table-striped" border="1">
  <thead>
    <mt:Var name="header_tr">
  </thead>
  <tfoot>
    <mt:Var name="header_tr">
  </tfoot>
  <tbody>
    <mt:Var name="tbody_tr">
  </tbody>
</table>
<mt:Ignore>最後にtableを出力 [ end ]</mt:Ignore>

headerPosition: 'left'（1列目が見出しの表組み）の場合

1列目が見出しの表組みを、管理画面の見た目と同じような表組みで出力するテンプレートは下記のようになります。

<mt:Ignore>見出し要素を出力するための変数をセット [start]</mt:Ignore>
<mt:SetVar name="order">
<mt:SetVar name="order" function="push" value="platform">
<mt:SetVar name="order" function="push" value="name">
<mt:SetVar name="order" function="push" value="rating">
<mt:SetVar name="header" key="platform" value="プラットフォーム">
<mt:SetVar name="header" key="name" value="製品名">
<mt:SetVar name="header" key="rating" value="評価">
<mt:Ignore>見出し要素を出力するための変数をセット [ end ]</mt:Ignore>
<mt:Ignore>tbodyに入れるtrをセット [start]</mt:Ignore>
<mt:SetVarBlock name="tbody_tr">
<mt:Loop name="order">
<mt:Var name="__value__" setvar="key">
<tr>
  <th class="<mt:Var name="key">"><mt:Var name="header" key="$key"></th>
  <mt:SetVar name="items_index" value="0">
  <mt:Loop name="items">
    <mt:Var name="items" index="$items_index" setvar="item">
    <td class="<mt:Var name="key">"><mt:Var name="item" key="$key"></td>
    <mt:SetVar name="items_index" op="++">
  </mt:Loop>
</tr>
</mt:Loop>
</mt:SetVarBlock>
<mt:Ignore>tbodyに入れるtrをセット [ end ]</mt:Ignore>
<mt:Ignore>最後にtableを出力 [start]</mt:Ignore>
<table class="table table-striped" border="1">
  <tbody>
    <mt:Var name="tbody_tr">
  </tbody>
</table>
<mt:Ignore>最後にtableを出力 [ end ]</mt:Ignore>

MTAppJSONTableSave カスタムイベント

例えば、

$('#jsontable').MTAppJSONTable({
  // 省略
});

というように設定していた場合、

$('#jsontable').trigger('MTAppJSONTableSave');

とすれば、任意のタイミングで JSONTable の保存処理（注1）を走らせることができます。

（注1）ここでいう保存処理とは、JSONTable の表の中の値を解析して JSON に加工し、MTAppJSONTable を適用した元のフィールド（ textarea ）にその JSON を入れることを指します。

オプション

$(foo).MTAppJSONTable({
    "inputType": "textarea",
    "caption": null,
    "header": null,
    "headerOrder": [],
    "headerPosition": "top",
    "footer": false,
    "edit": true,
    "add": false,
    "clear": true,
    "sortable": false,
    "cellMerge": false,
    "listingCheckbox": false,
    "listingCheckboxType": "checkbox",
    "listingTargetKey": null,
    "listingTargetEscape": false,
    "cbAfterBuild": null,
    "cbBeforeAdd": null,
    "cbAfterAdd": null,
    "cbAfterSelectRow": null,
    "cbAfterSelectColumn": null,
    "optionButtons": null,
    "itemsRootKey": "items",
    "nest": false,
    "debug": false
});

$('foo').MTAppJSONTable({
    inputType: 'input'
});

$('#excerpt').MTAppJSONTable({
    "inputType": {
        "optionsName": "input",
        "optionsType": "input",
        "optionsText": "textarea"
    },
    "header": {
        "optionsName": "名前",
        "optionsType": "種類",
        "optionsText": "説明"
    },
    "headerOrder": [
        "optionsName",
        "optionsType",
        "optionsText"
    ]
});

$('foo').MTAppJSONTable({
    caption: 'bit part members'
});

$('foo').MTAppJSONTable({
    header: {
        nickname: 'ニックネーム',
        firstname: '名',
        lastname: '姓',
        sex: '性別'
    }
});

$('foo').MTAppJSONTable({
    headerOrder: ['nickname','firstname','lastname','sex']
});

function(cb, $container){
  // do something
}

function(cb, $td){
  // do something
}

function(cb, $container){
  // do something
}

function(cb, $tr, checked){
  // do something
}

function(cb, $td, checked){
  // do something
}

[
  {
    classname: "action1", // ボタンに振られるクラス名
    text: "button action 1" // ボタンのテキスト
  },
  {
    classname: "action2",
    text: "button action 2"
  }
]

$('foo').MTAppJSONTable({
    debug: true
});