1

jqGrid の editPopup にドロップダウンが表示されるまでに数秒かかる場合があります。読み込みメッセージを表示する最良の方法は何ですか (通常のフォームが読み込まれているときにポップアップする読み込みメッセージに似ています)

たとえば、これが私のグリッドの列である場合

 { name: "Parent", index: "Parent", width: 250, editable: true, edittype: "select", editoptions: { dataUrl: "/OrganisationalUnit/GetSelectData" }, editrules: { required: false} },

および dataUrl (この場合: dataUrl: "/OrganisationalUnit/GetSelectData" )

現在、このメソッドからデータが返される前に、ロードに時間がかかります。データが取り込まれた空のドロップダウンがあるように見え、何かがロードされていることを示す視覚的なインジケータはありません。

4

1 に答える 1

0

フォーム編集で使用する場合dataUrl、jqGrid は要求を$.jgrid.createEl行うメソッドを内部的に呼び出します(コード フラグメントを参照)。またはコールバックを使用しないでください。これは、入力されていることを表すプロパティでオプションを使用します。$.ajaxdataUrl$.ajaxbeforeSendcompletecontextelem<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>

于 2013-11-03T20:23:50.267 に答える