5

我可以使用默认设置轻松连接 webgrid 并添加 ajax。但是我一直在努力弄清楚的一件事是如何在网格通过 ajax 排序或分页时添加加载指示器。

有一个内置的回调函数可以很好地关闭 ajax 加载指示器，但我怎样才能轻松地打开它呢？

以下是我目前为我的 webgrid 提供的代码。

@{
    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 事件绑定丢失。将它与全局文档对象绑定，它会一直存在。

于 2012-10-22T03:09:07.010 回答
1

是的，上面的答案应该对您有所帮助。基本上有一个 Jquery API 可以处理从客户端到服务器的任何 ajax 请求。因此，当您执行任何 ajax 操作时，它将调用触发该函数。您可以将您的自定义 css/图像或一些您可以调用的函数作为 ajax 操作的指示器。

于 2012-10-22T04:26:49.343 回答