5

デフォルト設定を使用して、Webグリッドを簡単に接続し、それにajaxを追加できます。しかし、私が理解するのに苦労していることの1つは、グリッドがajaxを介してソートまたはページングしているときに、ロードインジケーターを追加する方法です。

ajaxローディングインジケーターをオフにするのに最適なコールバック関数が組み込まれていますが、どうすれば簡単にオンにできますか？

以下は、現在Webグリッド用に使用しているコードです。

@{
    var grid = new WebGrid(rowsPerPage: Model.CountPerPage, ajaxUpdateContainerId: "GridArea");
    grid.Bind(Model.Users,
              autoSortAndPage: false,
              rowCount: Model.TotalCount
            );
    grid.Pager(WebGridPagerModes.All);
}
<div id="GridArea">
    @grid.GetHtml(htmlAttributes: new {id ="UserGrid"},
        columns: new [] {
        grid.Column("ID", canSort: false),
        grid.Column("FirstName"),
        grid.Column("LastName"),
        grid.Column("Email"),
        grid.Column("FullName", canSort: false)
        }
    )
</div>

私は以下を使ってみましたが、どちらもうまくいきませんでした。

<script>
    $(function () {
        $("#UserGrid").live("ajaxStart", function () {
            alert("start");
        });
    });
</script>

これは初めて機能しますが、グリッドが最初のajaxリフレッシュを実行した後は機能しません。

<script>
    $(function () {
        $('#UserGrid').ajaxStart(function () {
            alert("start");
        });
    });
</script>
4

2 に答える 2

9

これはうまくいくはずです。

$(document).ajaxStart(function(){
     //Show your progressbar here
}).ajaxStop(function(){
     //Hide your progressbar here
});

最初の ajax 応答の後、DOM が再作成され、.ajaxStart イベント バインディングが失われるため、2 番目のアプローチは機能しません。それをグローバルドキュメントオブジェクトと結びつけると、常にそこにあります。

于 2012-10-22T03:09:07.010 に答える
1

はい、上記の答えはあなたを助けるはずです。基本的に、クライアントからサーバーへの ajax リクエストを処理する Jquery API があります。したがって、ajax操作を行うと、関数がトリガーされます。カスタム css/images または ajax 操作のインジケーターとして呼び出すことができる関数を配置できます。

于 2012-10-22T04:26:49.343 に答える