$.MTAppFieldSort() の使い方 - MTAppjQuery でフィールドを簡単に並び替える

$.MTAppFieldSort() とは

$.MTAppFieldSort() とは、ブログ記事の作成・編集画面内のメインカラムの各フィールドを簡単に並べ替えることができる jQuery プラグインです。

フィールドの並べ替えについては、Movable Type 5 から標準の機能でもできるようになりましたが、タイトル、本文には対応していません。このプラグインを使えば、タイトル、本文も含めて並べ替えることができます。カスタムフィールドにも対応しています。

使い方

基本的な書き方は次のようになります。

if($('body#edit-entry').length){
    $.MTAppFieldSort({
        sort: 'title,text,tags,excerpt,keywords'
              // title,text,tags,excerpt,keywords またはカスタムフィールドのbasenameを並び順にカンマ区切りで書く
    });
}

なお、この if($('body#edit-entry').length){} は、ブログ記事の作成・編集画面のみに適用させるための記述になります。この if 文を入れないと、他のページで不具合が発生しますのでご注意ください。

もし、他のページにも適用させる場合は、$.MTAppDebug() の機能を使って、条件分岐文を書き出すと便利です（後日説明文を公開します）。

オプションの設定は以下のとおりです。

sort : string（必須）

並べ替えたい順番に、各フィールドのベースネームをカンマ区切りで設定します。ここで指定したフィールドが、メインカラムの頭から順番に並び、指定しなかったフィールドがその後ろに続きます。

デフォルトのフィールドのベースネームは、以下のようになります。「本文」「続き」のベースネームが $.MTAppCustomize() の使い方とは違うので注意してください。

• title : タイトル
• text : 本文・続き
• tags : タグ
• keywords : キーワード
• excerpt : 概要

カスタムフィールドの場合は、ベースネームの頭に「 c: 」を付けてください。

カスタムフィールドのベースネームは、カスタムフィールドの編集画面で確認できます。

もし Firebug などで直接ソースで確認する場合は、そのフィールドの一番親の div 要素の id 属性から確認できます。以下の例で言えば「price」がベースネームになります。

<div id="customfield_price-field" class="field field-top-label ">
    省略
</div>

なお、ここで説明しているベースネームは、ブログ記事の作成・編集画面のものですが、他の管理画面のページでも、ベースネームを指定すれば基本的には同様に並べ替えることができます。

ただし、他の管理画面のページでフィールドを並べ替える場合は、次に説明する insertID オプションの設定をする必要があります。

insertID : string（任意）

$.MTAppFieldSort() は、基本的にはブログ記事の作成・編集画面に利用することを前提としています。しかし、それ以外の管理画面のページでも、$.MTAppFieldSort() を利用してフィールドを並べ替えることができます。

その場合は、この insertID オプションで、並べ替えたいフィールドを包含するボックスの id 属性を指定します。例えば、テンプレートの編集画面のフィールドを並べ替えたいときは、以下のように記述します。

// テンプレートの編集
if($('body#edit-template-index').length){
    $.MTAppFieldSort({
        sort: 'revision-note,outfile,title',
        insertID: 'template-listing-form'
    });
}

サンプル

例えば、メインカラムを以下の順番に並べたいとします。

1. キーワード（ keywords ）
2. テキストフィールドというカスタムフィールド（ c:textfield ）
3. タイトル（ title ）

この場合は次のように書きます。

$.MTAppFieldSort({
    sort: 'keywords,c:textfield,title'
});

【2010-08-13 追記】

ブログ記事の作成・編集画面以外の管理画面のページに適用する場合の記述と、insertID オプションについての説明を追加しました。

以上です。