加载大量数据时的loading制作
首先创建数据库，导入测试数据。数据库很简单，结构如下：
使用如下sql语句导入30000条记录：
declare @i int
set @i=0
while(@i<30000)
Begin
set @i=@i+1
insert into LargeData(col1,col2,col3) values('第一列数据','第二列数据','第三列数据' );
End
go
set @i=0
while(@i<30000)
Begin
set @i=@i+1
insert into LargeData(col1,col2,col3) values('第一列数据','第二列数据','第三列数据' );
End
go
好了，测试数据准备完毕，现在我们用GridView来显示这30000条数据
Default.aspx的代码如下：
代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Loading</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body style="font-size:9pt;">
<div id="progressBar" style="position:absolute; left:400px; top:100px; font-size:11pt;">加载中，请稍候<img alt="加载中..." src="24.gif"/></div>
<form id="form1" runat="server">
<div id="content" style="display:none">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EnableViewState="False">
<Columns>
<asp:BoundField DataField="col1" HeaderText="COL1" />
<asp:BoundField DataField="col2" HeaderText="COL2" />
<asp:BoundField DataField="col3" HeaderText="COL3" />
</Columns>
</asp:GridView>
</div>
</form>
<script type="text/javascript">
$("#content").show();
$("#progressBar").fadeOut(1000);
</script>
</body>
</html>
<!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">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Loading</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body style="font-size:9pt;">
<div id="progressBar" style="position:absolute; left:400px; top:100px; font-size:11pt;">加载中，请稍候<img alt="加载中..." src="24.gif"/></div>
<form id="form1" runat="server">
<div id="content" style="display:none">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EnableViewState="False">
<Columns>
<asp:BoundField DataField="col1" HeaderText="COL1" />
<asp:BoundField DataField="col2" HeaderText="COL2" />
<asp:BoundField DataField="col3" HeaderText="COL3" />
</Columns>
</asp:GridView>
</div>
</form>
<script type="text/javascript">
$("#content").show();
$("#progressBar").fadeOut(1000);
</script>
</body>
</html>
后台Default.aspx.cs很简单，代码如下：
代码
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
private const string SQL_GET_NUM = "SELECT * FROM [Demo].[dbo].[LargeData]";
protected void Page_Load(object sender, EventArgs e)
{
Response.Flush();
Bind();
}
private void Bind()
{
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Sql2005ConStr"].ConnectionString))
{
SqlCommand cmd = new SqlCommand(SQL_GET_NUM, con);
cmd.Connection.Open();
Response.Flush();
GridView1.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
GridView1.DataBind();
}
}
}
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
private const string SQL_GET_NUM = "SELECT * FROM [Demo].[dbo].[LargeData]";
protected void Page_Load(object sender, EventArgs e)
{
Response.Flush();
Bind();
}
private void Bind()
{
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Sql2005ConStr"].ConnectionString))
{
SqlCommand cmd = new SqlCommand(SQL_GET_NUM, con);
cmd.Connection.Open();
Response.Flush();
GridView1.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
GridView1.DataBind();
}
}
}
效果图如下：
使用过程中发现最后的时候会有点卡，导致loading的图片卡住了，不知道为什么，有可能是数据太多，浏览器卡了。呵呵。
