フォーム編集で使用する場合dataUrl
、jqGrid は要求を$.jgrid.createEl
行うメソッドを内部的に呼び出します(コード フラグメントを参照)。またはコールバックを使用しないでください。これは、入力されていることを表すプロパティでオプションを使用します。$.ajax
dataUrl
$.ajax
beforeSend
complete
context
elem
<select>
したがって、私の提案はajaxSelectOptions
、 jqGrid のオプションbeforeSend
とcomplete
コールバックを使用することです。コールバック内で、ロード アニメーションの一部またはbeforeSend
一部を作成できます。アニメーションを実装する方法は、単純な gif から始まり、CSS3アニメーションと@keyframesの使用が進行するまで、さまざまな方法があります(こちらを参照)。<div>
<span>
jQuery UI 1.8.2の ui-anim_basic_16x16.gifを使用して、次の CSS クラスを定義しました。
.my-select-loading {
background: white url('ui-anim_basic_16x16.gif') right center no-repeat;
height: 16px;
width: 16px;
margin-left: .5em;
display: inline-block;
}
ajaxSelectOptions
私がそう定義したjqGridのオプション
ajaxSelectOptions: {
beforeSend: function () {
var context = this;
if (context.elem) { // if it called by $.jgrid.createEl
context.loading = true;
setTimeout(function () {
if (context.loading) {
$("<span>").addClass("my-select-loading")
.insertAfter($(context.elem));
}
}, 50);
}
},
complete: function() {
if (this.elem) {
this.loading = false;
var $span = $(this.elem).next("span.ui-autocomplete-loading");
$span.remove();
}
}
}
上記のコードは、クラスを<select>
持つ空の<span>
要素を追加しますmy-select-loading
。これは、サーバーが 50 ミリ秒以内に応答しない場合にのみ行わdataUrl
れます ( のオプション 50 を参照setTimeout
)。の内部ではcomplete
、失敗の場合と成功の場合の両方で呼び出されdataUrl
ます。その結果、ユーザーには次のようなものが表示されます

上記のコードは、実装の単なる例です。でアニメーション要素を作成した方が良いでしょうposition: absolute
。上記のコードを使用する場合に見栄えを良くするために、フォームのサイズは、挿入されたアニメーション gifwidth
を表示するのに十分な大きさにする必要があります。<span>