15

Ajax で Select2 プラグイン (v 3.5.2) を使用して、リスト内の要素を動的に読み込みます。

Select2 の初期化 (ajax ヘルパーで URL プロパティが設定されている場所) と ajax 呼び出しが行われる時間の間に問題があり、この URL を変更する必要がある場合があります。

だから私はこのようなものを持っています:

$box.select2({
    containerCssClass: "form-control"
    minimumInputLength: 0,
    allowClear: true,
    ajax: {
       url: someUrl,
       dataType: 'json',
       quietMillis: 100,
...
}

ajax.url値を起動する前に、いつ、どこで、どのように値を変更すればよいかわかりません。

Select2 のヘルプには次のように書かれています。

Select2 は、デフォルトで jQuery の$.ajax関数を使用してリモート呼び出しを実行します。代替transport関数を設定で指定するか、ajax ヘルパーを使用する代わりにajaxカスタム関数を提供することで、完全にカスタムの実装を構築できます。query

しかし、それを行う方法の例が見つかりません。

助けてくれてありがとう。とても有難い。

4

2 に答える 2

27

起動前に ajax.url の値を変更する方法、タイミング、場所がわかりません。

このajax.urlオプションは、Select2 3.5.x と 4.0.0 の両方で静的文字列またはそれを返すメソッドとして指定できます。

$("select").select2({
  ajax: {
    url: function () {
      return UrlHelper.RemoteAPI();
    }
  }
});

これは、ベース URLを変更する場合に便利です。たとえば、URL が実行時に決定される場合や、別の方法で自動的に生成される場合です。検索語の送信に使用されるパラメータなど、クエリ パラメータを変更する必要がある場合は、ajax.dataオプションをオーバーライドする必要があります。

$("select").select2({
  ajax: {
    data: function (args) {
      // args is the search term in 3.5.x

      // args is an object containing the query parameters in 4.0.0
      // args.term is the search term in 4.0.0
      return {
        search: args.term || args;
      };
    }
  }
});

ここのデータは、デフォルトでクエリ パラメータとして追加され、メソッド タイプがGET（デフォルト）から他のものに変更された場合、リクエスト ボディとして送信されます。

Select2 は、デフォルトで jQuery の $.ajax 関数を使用してリモート呼び出しを実行します。代替トランスポート関数を ajax 設定で指定するか、ajax ヘルパーを使用する代わりにカスタム クエリ関数を提供することで、完全にカスタムの実装を構築できます。

しかし、それを行う方法の例が見つかりません。

Select2 では、オプションを変更することで、別の AJAX トランスポートを使用ajax.transportできます。

3.5.2 では、これは互換性のあるメソッドである必要があるため、およびコールバック$.ajaxを含むオブジェクトを取得できる必要があります。successfailure

$("select").select2({
  ajax: {
    transport: function (args) {
      // args.success is a callback
      // args.failure is a callback

      // should return an object which has an `abort` method.
      return $.ajax(args);
    }
  }
});

4.0.0 では、これはparamsオブジェクト ( に渡されるものと同じajax.data)、successコールバック、およびコールバックを受け取るメソッドである必要がありfailureます。

$("select").select2({
  ajax: {
    transport: function (params, success, failure) {
      var $request = $.ajax(params);

      $request.then(success);
      $request.fail(failure);

      return $request;
    }
  }
});
于 2015-05-21T13:22:10.670 に答える