看标签,你是web,估计不容易做到。
进度条是没办法弄的,就算弄出来也是不准确的,你可以弄个“正在导出,请稍候的提示”
点击导出我弹出了一个层提醒等待,可是弹出对话框后那个提醒等待的层不能隐藏、麻烦看一下
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frmBugListShow.aspx.cs" Inherits="WorkFlow_frmBugListShow" %>
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
<%@ OutputCache Location="None" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>BugList问题信息</title>
<link rel="stylesheet" href="../Source/CSS/W3Style/formset.css" type="text/css" />
<link rel="stylesheet" href="../Source/CSS/W3Style/jTip.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Source/CSS/W3Style/widget.css" />
<script type="text/javascript" defer="defer" src="../Source/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" language="Javascript">
var reinitIframeSonTime = undefined;
function reinitIframeSon()
{
if(document.readyState == "complete")
{
$('divProgress').style.height = document.body.scrollHeight;
$('divProgress').style.width = document.body.clientWidth;
$('frameSolute').style.height = document.body.scrollHeight;
$('frameSolute').style.width = document.body.clientWidth;
if(reinitIframeSonTime != undefined)
{
clearInterval(reinitIframeSonTime);
}
}
}
reinitIframeSonTime = window.setInterval("reinitIframeSon()",10);
var stepInterval = undefined;
var showProcessInterval = undefined;
function $(id)
{
return (document.getElementById) ? document.getElementById(id) : document.all[id] ;
}
function setControlDisplay(id,opration)
{
var control = $(id);
if (control != undefined)
{
control.style.display = opration;
}
if(showProcessInterval != undefined)
{
clearInterval(showProcessInterval);
}
}
function setProcessText(htmlText)
{
$('divWaitInfo').innerHTML = htmlText;
if(stepInterval != undefined)
{
window.clearInterval(stepInterval);
//setControlDisplay('divProgressPanel','none');
}
}
function setDataNow()
{
setControlDisplay('divProgressPanel','block');
stepInterval = window.setInterval("setProcessText(' ')",0);
}
function exportExcel()
{
setControlDisplay('divProgressPanel','block');
stepInterval = window.setInterval("setProcessText('系统正在导出表格,请耐心等待...')",1000);
}
function delayShowProcess(time,opration,id)
{
showProcessInterval = window.setInterval("setControlDisplay('" + id + "','" + opration + "')",time);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<table align="left" border="0" cellspacing="0" style="border-collapse: collapse;
width: 1180px; height: 1px;">
<tr id="RecordItem0" runat="server">
<td style="height: 25px">
<table style="border-collapse: collapse;" align="left" width="100%">
<tr>
<td class="tdselect" rowspan="2" style="width:10%;">
<asp:Button ID="btnRefurbish" runat="server" Visible="false" CssClass="button" Height="20px" Text="导出"
Style="margin-left: 10px;" Width="80px" OnClick="btnRefurbish_Click" OnClientClick="exportExcel();"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnRefurbish" />
<asp:PostBackTrigger ControlID="btnguide" />
<asp:AsyncPostBackTrigger ControlID="btnSelect" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnDelete" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ddlTrranceChoose" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="ddltkeywords" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<tabel>
<tr>
<td colspan="3">
<div id="divProgressPanel" style="display: none; position: absolute; z-index: 140;
left: 0px; top: 0px; width: 800px;" runat="server">
<div id="divProgress" style="position: absolute; z-index: 180; background-color: white;
width: 100%; height: 100%; top: 0px; left: 0px; filter: alpha(opacity=30); -moz-opacity: 0.0;">
<iframe id="frameSolute" style="position: absolute; z-index: 181; width: 100%; height: 100%;
top: 0px; left: 0px; background-color: Transparent; filter: alpha(opacity=00);
-moz-opacity: 0.0;"></iframe>
</div>
<div style="width: 800px; background-color: Transparent; text-align: center; left: 0px;
top: 20%; margin-top: 20%; height: 100%; z-index: 182; position: absolute;">
<div style="width: 350px; height: auto; background-color: White; margin: auto; padding: 10px;">
<div style="margin-top: 20px; margin-bottom: 10px;">
<img src="../Source/Image/w3/loading.gif" border="0" /></div>
<div id="divWaitInfo">正在启动导出处理...</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
你要实现这个不容易啊,告诉你一个投机取巧的方法。用JS写一个页面遮罩,在遮罩上放一个表示数据载入的GIF的小图片,就OK了。
利用JavaScript實現蒙板的效果,如下是重要的代碼,LZ可參考:
1.頁面中有一個按鈕的Click事件
<asp:Button ID="btnQuery" runat="server" Text="查詢" ValidationGroup="Query" OnClick="BtnQuery_Click" />
2.頁面加載方法中
protected void Page_Load(object sender, EventArgs e)
{
// 查詢按鈕添加事件
this.btnQuery.Attributes["onclick"] += "ShowIfame
('" +this.ifmQuery.ClientID + "');";
// 初始化IFrame,
this.ifmQuery.Style["display"] = "none";
Page.ClientScript.RegisterStartupScript(GetType(), "", "InitFrame
('" + this.ifmQuery.ClientID + "')", true);
}
3.前臺iframe用於遮罩
<iframe src="PageProcessing.htm" id="ifmQuery" width="100%" runat="server" style="position: absolute;top: 0; left: 0; display: none; filter: alpha(opacity=80);" height="0">
</iframe>
4.相關js代碼
// 頁面加載時,設置iframe高度 function InitFrame(iframeID) { var heightFrame = 0; if(document.documentElement.clientHeight >= document.body.offsetHeight - 4) { heightFrame = document.documentElement.clientHeight; } else { heightFrame = document.body.offsetHeight - 4; }
// 賦值iframe高度 document.getElementById(iframeID).height = heightFrame; } |
// 程式處理過程中顯示遮罩頁面 function Page_ClientValidate_AllPass(validationGroup) { if (typeof(Page_Validators) == "undefined") { return true; }
var index;
for (index = 0; index < Page_Validators.length; index++) { var val = Page_Validators[index]; val.isvalid = true;
if ((typeof(val.enabled) == "undefined" || val.enabled) && IsValidationGroupMatch(val, validationGroup)) { if (typeof(val.evaluationfunction) == "function") { val.isvalid = val.evaluationfunction(val); } } } ValidatorUpdateIsValid();
return Page_IsValid; } |
// 程式處理過程中顯示遮罩頁面 function ShowIfame(iframeID) { if(Page_ClientValidate_AllPass('Query')) document.getElementById(iframeID).style.display='inline'; } |