GridView 分页 显示加载进度

简介:

 

js:

 
    
<script type="text/javascript">
        
function onUpdating() {
            
var updateProgressDiv = document.getElementById('upCustomer');
            
var gridView = document.getElementById('gvUpdateProgress');

            
var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
            
var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);

            
var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2- Math.round(updateProgressDivBounds.width / 2);
            
var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2- Math.round(updateProgressDivBounds.height / 2);

            Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);

        }     
    
</script>

<div>
        
<asp:ScriptManager ID="ScriptManager1" runat="server">
        
</asp:ScriptManager>
        
<table border="0" cellpadding="0" cellspacing="0" width="100%">
            
<tbody>
            
<tr>
             
<td style=" width: 100%; ">
             
<asp:UpdateProgress ID="upCustomer" AssociatedUpdatePanelID="upnlCustomer" runat="server">
              
<ProgressTemplate>
               
<div id="imgdivLoading" align="center" valign="middle" runat="server"  >
               
<asp:Image ID="imgLoading" runat="server" ImageUrl="Images/loading.gif"  />
              
</div>
               
</ProgressTemplate>
              
</asp:UpdateProgress>
             
</td>
           
</tr>
               

            
<tr>
            
<td style="width: 100%">
             
<asp:UpdatePanel ID="upnlCustomer" runat="server">
             
<ContentTemplate>
               
<asp:GridView ID="gvUpdateProgress"  .... </asp:GridView>
              
</ContentTemplate>
             
</asp:UpdatePanel>
            
</td>
            
</tr>
            
</tbody>
        
</table>
    
</div>

 

 

 

protected void Page_Load(object sender, EventArgs e)
    {
        gvUpdateProgress.Attributes.Add("onclick", " onUpdating();");
        bindGrid();
    }

 

 

 private void bindGrid()
    {
        SqlConnection conn = new SqlConnection("");
        conn.ConnectionString = "Trusted_Connection=yes;Addr=Localhost;Initial Catalog=Northwind";
        SqlCommand cmdCustomer = new SqlCommand("select CustomerID,CompanyName,ContactName,City,PostalCode,Country,Phone from Customers", conn);
        SqlDataAdapter adptCustomer = new SqlDataAdapter(cmdCustomer);
        DataSet dsCustomer = new DataSet();
        adptCustomer.Fill(dsCustomer,"Customer");
        gvUpdateProgress.DataSource = dsCustomer.Tables["Customer"].DefaultView;
        gvUpdateProgress.DataBind();

    }

 

protected void gvUpdateProgress_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        System.Threading.Thread.Sleep(3000); // waiting period
        gvUpdateProgress.PageIndex = e.NewPageIndex;
        gvUpdateProgress.DataBind();
    }



    本文转自曾祥展博客园博客,原文链接:http://www.cnblogs.com/zengxiangzhan/archive/2010/02/19/1669420.html,如需转载请自行联系原作者

相关文章
|
12月前
|
安全 Go 调度
探索Go语言的并发之美:goroutine与channel的实践指南
在本文中,我们将深入探讨Go语言的并发机制,特别是goroutine和channel的使用。通过实际的代码示例,我们将展示如何利用这些工具来构建高效、可扩展的并发程序。我们将讨论goroutine的轻量级特性,channel的同步通信能力,以及它们如何共同简化并发编程的复杂性。
|
监控 Java 应用服务中间件
详解tomcat中的jmx监控
详解tomcat中的jmx监控
310 1
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的居民健康监测系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的居民健康监测系统附带文章源码部署视频讲解等
93 0
|
Dubbo Java 应用服务中间件
Dubbo日志链路追踪TraceId选型
开发排查系统问题用得最多的手段就是查看系统日志,但是在分布式环境下使用日志定位问题还是比较麻烦,需要借助全链路追踪ID把上下文串联起来,本文主要分享基于Spring Boot + Dubbo框架下日志链路追踪ID的实现方案选型思路
5062 0
Dubbo日志链路追踪TraceId选型
|
SQL 数据库 Python
Python3 notes
Python3 notes
|
人工智能 物联网 开发者
AI绘画——本地配置webui启动器教程,支持一键启动/修复/更新/模型下载管理+Lora模型推荐(一)
AI绘画——本地配置webui启动器教程,支持一键启动/修复/更新/模型下载管理+Lora模型推荐
559 0
|
存储 SQL 负载均衡
冷热分离之OTS表格存储实战[云栖版]
为什么要冷热分离由于2020疫情的原因,在线教育行业提前被大家所重视,钉钉教育已经服务超过21万所学校、700万教师和1.4亿学生用户,每天大量的教育数据产生。整体数据量:随着时间的积累,数据量越来直大,庞大的数据量对稳定性与性能是一个很大的挑战。当前策略:分库分表,对于大单表的场景,第一个能跳出脑海的就是分库分表。在中国互联网技术圈流传着这么一个说法:MySQL 单表数据量大于 2000 万行,
1778 0
冷热分离之OTS表格存储实战[云栖版]
|
弹性计算 应用服务中间件 运维
阿里云服务器ECS、轻量应用服务器和云虚拟主机的区别及对比
阿里云服务器ECS、轻量应用服务器和云虚拟主机的区别及对比
|
SQL 关系型数据库 数据库
PostgreSQL 10.1 手册_部分 II. SQL 语言_第 5 章 数据定义_5.3. 约束
5.3. 约束 5.3.1. 检查约束 5.3.2. 非空约束 5.3.3. 唯一约束 5.3.4. 主键 5.3.5. 外键 5.3.6. 排他约束 数据类型是一种限制能够存储在表中数据类别的方法。
1130 0