首先：建立两个类，一个是用来与资料进行连接（数据层），另一个是用来关联前一个类与页面的（逻辑层）
新建一个jscsrip.js 文件
代码如下：
复制代码 代码如下:
function setpgb(pgbid, pgbvalue,pvalues)
{
if ( pgbvalue {
if (lblobj = document.getelementbyid(pgbid+'_label'))
{
lblobj.innerhtml =math.ceil((pgbvalue/pvalues)*100) + '%'; // change the label value
}
if ( pgbobj = document.getelementbyid(pgbid) )
{
var divchild = pgbobj.children[0];
pgbobj.children[0].style.width = math.ceil((pgbvalue/pvalues)*240);//pgbvalue;
}
window.status = 数据读取第 + pgbvalue+条，请稍候;
}
if ( pgbvalue == pvalues )
{
window.status = 数据读取已经完成;
probar.style.display=none;
table1.style.display=none;
}
}
建立一个 common.css
代码如下：
复制代码 代码如下:
.bi-loading-status
{
/**//*position: absolute;*/
width: 250px;
padding: 1px;
overflow: hidden;
}
.bi-loading-status .text{
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
padding: 1px;
}
.bi-loading-status .progress-bar {
border: 1px solid threedshadow;
background: window;
height: 10px;
width: 100%;
padding: 1px;
overflow: hidden;
}
.bi-loading-status .progress-bar div {
background: highlight;
overflow: hidden;
height: 100%;
filter: alpha(opacity=0, finishopacity=100, style=1, startx=0, starty=0, finishx=100, finishy=0);
}
建立一个 progressbar.htm
代码如下：
复制代码 代码如下:
建立一个 default.aspx 文件
前台代码如下：
复制代码 代码如下:
后台代码如下：
复制代码 代码如下:
public partial class _default : system.web.ui.page
{
dataset ds;
text ts = new text();
int count = 0;
#region page_load
private void page_load(object sender, system.eventargs e)
{
if (!page.ispostback)
{
ds = getgridview();
count = ds.tables[0].rows.count;
response.write(count= + count);
string strfilename = server.mappath(progressbar.htm);
streamreader sr = new streamreader(strfilename, system.text.encoding.default);
string strhtml = sr.readtoend();
response.write( + strhtml +
);
sr.close();
response.flush();
thread thread = new thread(new threadstart(threadproc));
thread.start();
loaddata(ds);
// getgridview();
//load数据
thread.join();
}
}
#endregion fixedheader
#region getgridview
protected dataset getgridview()
{
ds = ts.queryprocs(2009/07, xxxx);//这个是逻辑层中的一个方法
return ds;
}
#endregion
#region threadproc
private void threadproc()
{
string strscript = ;
for (int i = 0; i {
system.threading.thread.sleep(80);
response.write(string.format(strscript, i));
response.flush();
}
}
#endregion loaddata
#region loaddata
private void loaddata(dataset dds)
{
for (int m = 0; m {
for (int i = 0; i {
}
}
this.gridview1.datasource = dds.tables[0].defaultview;
this.gridview1.databind();
}
#endregion web form designer generated code
#region web form designer generated code
override protected void oninit(eventargs e)
{
//
// codegen: this call is required by the asp.net web form designer.
//
initializecomponent();
base.oninit(e);
}
/**/
///
/// required method for designer support - do not modify
/// the contents of this method with the code editor.
///
private void initializecomponent()
{
//this.load += new system.eventhandler(this.page_load);
}
#endregion
}
启动加载页面时如下图所示。
加载完后会自动显示你要显示的数据。