$(foo).MTAppListing() | MTAppjQuery v1 ドキュメント

Last modified date : 2019/01/31

JSON を読み込んでリストアップし、その一覧から選択する事ができます。
Data API や外部の API から取得した JSON の情報を記事に関連付けたりすることができます。

サンプル動画

使い方

$('foo').MTAppListing({
  url: 'https://your-host/your-mt-api.cgi/v1/sites/1/entries',
  data: {
    fields: 'id,title',
    limit: 9999999
  },
  jsontable: {
    header: {
      id: 'ID',
      title: 'タイトル'
    },
    headerOrder: ['id', 'title'],
    itemsRootKey: 'items',
    listingCheckboxType: 'checkbox',
    listingTargetKey: 'id',
    listingTargetEscape: false
  }
});

foo には MTAppListing を適用させたい input:text または textarea のセレクタを設定します。

保存される値

MTAppListing では、一覧で選択した項目の jsontable.listingTargetKey オプションに設定した値が、MTAppListing を適用したフィールドにカンマ区切りで保存されます。

例えば jsontable.listingTargetKey オプションの設定値が id で、ID が 1 から 3 までの記事が選択された場合、元のフィールドには ,1,2,3, と保存されます。最初と最後にもカンマが付きます。

change.MTAppListing イベント

MTAppListing ダイアログで OK をクリックしたとき、MTAppListing を適用しているフィールドで change.MTAppListing を実行されます。

したがって、下記のようにすれば後述するコールバック系のオプションを使わなくても選択時の処理を設定することができます。

$(foo)
    .MTAppListing({
        // MTAppListingのオプション
    })
    .on('change.MTAppListing', function(){
        // MTAppListingダイアログのOKボタンが押され、
        // 選択された項目の値が入力欄に反映されたあとに
        // 実行される処理
    });

オプション

$(foo).MTAppListing({
    "url": null,
    "data": null,
    "dataType": "json",
    "cache": false,
    "dialogTitle": "",
    "l10n": null,
    "cbAfterOpenDialogFirst": null,
    "cbProcessResponse": null,
    "cbAjaxDoneFilterJSONTable": null,
    "cbAjaxDone": null,
    "cbAjaxFail": null,
    "cbAfterCancel": null,
    "cbAfterOK": null,
    "cbAfterSearch": null,
    "cbAfterSearchReset": null,
    "cbAfterOpenDialogLast": null,
    "cbAfterSelectRowUpperTable": null,
    "cbAfterSelectRowLowerTable": null,
    "jsontable": {
        header: null,
        headerOrder: [],
        itemsRootKey: 'items',
        listingCheckboxType: 'checkbox',
        listingTargetKey: 'id',
        listingTargetEscape: false
    }
});

url 必須

Type : String, Default : null

MTAppListing でリストアップする情報の JSON の URL を指定します。

例：Data API を利用してIDが1のブログ記事をリストアップする

url: 'https://your-host/your-mt-api.cgi/v1/sites/1/entries'

data

Type : String, Default : null

url オプションで指定した URL に渡すパラメータをプレーンオブジェクトで指定します。

data: {
  search: 'mtappjquery',
  fields: 'id,title',
  limit: 9999999
}

dataType

Type : String, Default : "json"

url オプションで指定した URL から取得するデータの型を指定します。初期値は 'json' です。
指定できる値の詳細は jQuery のドキュメントを参照してください。

cache

Type : Boolean, Default : false

url オプションで指定した URL から取得するデータの通信結果をキャッシュしたい場合は true を設定します。

指定できる値の詳細は jQuery のドキュメントを参照してください。

dialogTitle

Type : String, Default :

ダイアログウィンドウのタイトルを指定します。何も設定しない場合は「項目を選択」となります。

l10n

Type : Plane Object, Default : null

ダイアログに表示されているボタン名やテキストを変更したい場合に設定します。設定できる項目と初期値は下記の通りです。

l10n: {
  title: '項目を選択',
  search: '検索',
  reset: 'リセット',
  ok: 'OK',
  cancel: 'キャンセル',
  select: '選択',
  selectedItems: '選択された項目',
  returnDialogTop: 'ダイアログのトップへ戻る',
  noItems: '該当するデータがありません',
  ajaxFail: 'データを取得できませんでした'
}