Blog

Movable Typeの気づいた点などの紹介

2018.11.09

MTAppJSONTableの表組みを逆から出力される

MTAppJSONTableに限らずですが、値となるJSONをデクリメントさせる方法を紹介します。
mt:Forにはincrementというモディファイアが備わっていますが、残念ながらデクリメントはモディファイアとしてありません。

今回はMTAppjQuery v1にあるMTAppJSONTableの表組みを逆から出力させる方法を紹介します。
この実装にあたりわかったことは、mt:Loopのsort_byのreverseはあくまでも文字数で逆になるということでした。
表組みなどの出力順を操作することはできないため、今回はmt:Forでデクリメントを実装してみました。

MTAppjQueryのuser.js実装

まずは、見出し・テキストという単純なJSONTableを実装してみます。
カスタムフィールド名は、「info」にしています。

  
  $('#customfield_info').MTAppJSONTable({
    inputType: {
      info_title: 'input',
      info_textarea: 'textarea'
    },
    header: {info_title: '見出し', info_textarea: '本文'},
    headerPosition: 'top',
    headerOrder: ['info_title','info_textarea'],
    add: true,
    cellMerge: false,
    clear: true,
    sortable: false,
    edit: true,
    footer: false,
    caption: null,
    debug: false
  });
  

MTMLの実装

本来であればJSONは上から順に表示されるのが多いと思いますが、
MTAppJSONTableの新規セルの追加は下に入る仕様になりますので、追加した値を上に移動すれば意図した順にソートさせることはできます。しかし、運用としては追加したものが最新になっていく仕様で出力してほしいという要望もあったりします。
ここから本題のMTMLでデクリメント処理させる方法になります。
キーになるのは、mt:Forで通常どおりに回しJSONが格納されている
itemsをindexでitemに格納するときに最初に定義した 変数l の最大値を格納し出力していきます。
最後に <mt:SetVar name="l" op="--" />l の値を op でデクリメントしていけば逆順のループになります。
出来たMTMLは以下になります。デクリメント処理が必要なときは以下を使ってみてはいかがでしょうか。

  
  <mt:Ignore>** JSONTableを当てたカスタムフィールド(info) **</mt:Ignore>
  <mt:info convert_breaks="0" no_generate="1" json_decode="1" setvar="json_info" />
  <mt:Ignore>** JSONTableを当てたカスタムフィールド **</mt:Ignore>
  <mt:Var name="json_info" key="items" setvar="items" />
  <mt:Var name="items" function="count" op="--" setvar="l" />
  <mt:If name="items">
    <mt:For var="i" from="0" to="$l">
      <mt:Var name="items" index="$l" setvar="item" />
      <mt:If name="__first__">
        <div>
          <ul>
      </mt:If>
      <mt:If name="item" key="info_textarea">
        <mt:If name="item" key="info_title">
          <li class="item">
            <h1 class="title">
              <mt:Var name="item" key="info_title" />
            </h1>
            <p class="text">
              <mt:Var name="item" key="info_textarea" />
            </p>
          </li>
        </mt:If>
      </mt:If>
      <mt:If name="__last__">
          </ul>
        </div>
      </mt:If>
      <mt:Ignore>変数lをデクリメントする</mt:Ignore>
      <mt:SetVar name="l" op="--" />
    </mt:For>
  </mt:If>
  

参考にした記事とドキュメント

  • Facebook
  • Twitter
  • はてなブックマーク
CATEGORY BACK