加载大量数据时的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

 

好了，测试数据准备完毕，现在我们用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 >

后台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);
            Grid View1.DataBind();
        }
    }
}

 

效果图如下：

使用过程中发现最后的时候会有点卡，导致loading的图片卡住了，不知道为什么，有可能是数据太多，浏览器卡了。呵呵。

转载于:https://www.cnblogs.com/sandals/archive/2010/05/03/1726268.html