显示进度条,直到Web网格完全加载,并在MVC中分页到Web网格中的下一页或上一页
本文关键字:Web 网格 一页 分页 MVC 加载 直到 显示 并在 | 更新日期: 2023-09-27 18:29:29
我正在尝试显示进度条,直到我的网格完全加载,我看到了各种基于按钮点击的方法,但我无法想出一种方法来显示进度条。这是我第一次使用webgrid,我不知道它触发在页面上显示图像的方法的事件。
我想在页面上显示这个div,直到我的网络网格完全加载或更改
@<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70); display: none">
<p style="position: absolute; top: 30%; left: 45%; color: White;">
Loading, please wait...<img src="../../Content/themes/base/images/ajax-loading.gif">
</p>
</div>
这是我显示webgrid 的代码
@Using Html.BeginForm()
@<div>
@Code
Dim grid = New WebGrid(Nothing, ajaxUpdateContainerId:="gridContent")
Dim pageSize As Integer = ViewBag.PageSize
If pageSize = 0 Then
grid.Bind(ViewBag.GridData, autoSortAndPage:=True)
Else
grid.Bind(ViewBag.GridData, , rowCount:=pageSize, autoSortAndPage:=False)
End If
@<div id="gridContent">
@grid.GetHtml(tableStyle:="gridView",
headerStyle:="gridViewheader",
alternatingRowStyle:="alternateItemStyle",
columns:=grid.Columns(grid.Column("emp_NO", "emp Number", canSort:=True),
grid.Column("emp_TYPE_CODE", "emp Type Code" canSort:=False),
grid.Column("emp_NAME", "emp Name", canSort:=False),
grid.Column("ADDRESS", "Address", canSort:=False),
</div>
End code
</div>
End Using
试试这个::
div #spinner {
display: none;
width: auto;
height: auto;
position: fixed;
background: url(spinner.gif) no-repeat center #fff;
text-align: center;
padding: 10px;
font: bold 16px Tahoma, Geneva, sans-serif;
border: 1px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index: 2;
overflow: auto;
}
function showProgress() {
if (!spinnerVisible) {
$("#spinner").fadeIn("fast");
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
var spinner = $("#spinner");
spinner.stop();
spinner.fadeOut("fast");
spinnerVisible = false;
}
};
$(document).ajaxStart(function () {
showProgress();
}).ajaxStop(function () {
hideProgress();
});