利用jQuery及AJAX技术定时更新GridView的某一列数据


Posted in Javascript onDecember 04, 2015

看到一个问题:定时更新GridView的某一列中的状态文本。马上就有了思路:GridView最后会生成表格,所以我们在页面中通过Ajax更新表格的列,从而达到ajax更新GridView的效果。

具体实现:

准备一个xml文件,用于存储要更新的数据,在页面中启动一个定时器,每隔5秒钟调用一个函数,函数里边通过$.ajax获取xml中的数据,解析xml,遍历表格行,匹配要更新的数据,更新。

getuserlist.xml

定义一个UserList的根节点,下边每个UserItem对应一条数据,UID可以理解成主键,UStatus是最新的状态。

<?xml version="1.0" encoding="utf-8" ?>
<UserList>
<UserItem><UID>1</UID><UStatus>关闭</UStatus></UserItem>
<UserItem><UID>2</UID><UStatus>关闭</UStatus></UserItem>
<UserItem><UID>3</UID><UStatus>开放</UStatus></UserItem>
</UserList>

test.html

具体的逻辑都写到这里边了。

<html>
 <head>
 <title>Ajax Update Table Column</title>
 <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
  window.onload=function(){
  //每隔5秒检查一下数据
  window.setInterval(checkStatus,5000);
  };
 
  //检查数据
  function checkStatus(){
  //ajax请求数据
  $.ajax({
   //换成你的文件,构造xml格式的数据就行了
  url: 'getuserlist.xml',
  //请求类型
  type: 'GET',
  //数据格式
  dataType: 'xml',
  //超时时间:1秒
  timeout: 2000,
  //加载数据发生错误
  error:function (XMLHttpRequest, textStatus, errorThrown) {
   alert("XMLHttpRequest="+XMLHttpRequest.responseText+"\ntextStatus="+textStatus+"\nerrorThrown="+errorThrown);
  },
  //成功加载数据
  success: function(xml){

//遍历表格的行,需要给表格定义一个ID
   $("#userListTable tr").each(function(){

//获取行的第一列,这里边保存了XML中对应的UID信息
    var trID=$(this).find("td").eq(0).text();

//数据的新状态
    var trStatus="";

//遍历xml中的UserItem
    $(xml).find("UserList > UserItem").each(function(){

//获取UID和UStatus的值
   var uid = $(this).find("UID").text();
   var ustatus = $(this).find("UStatus").text();

//比对当前行的ID和UID,如果相等,给数据的新状态赋值
    if(trID==uid){
     trStatus=ustatus;
    }
    });

//如果数据的新状态不为空,则更新单元格中现实的文本
    if(trStatus!=""){
   $(this).find("td").eq(2).text(trStatus);
    }
   });
  }
   });
  }
 </script>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>

<!--

这个表格有三列

ID:数据的ID,相当于主键,用于从xml中查询新数据

Name:只是显示

Status:要更新的列

-->
 <table border="1" id="userListTable">
  <tr><th>ID</th><th>Name</th><th>Status</th></tr>
  <tr><td>1</td><td>张三</td><td>开放</td></tr>
  <tr><td>2</td><td>李四</td><td>开放</td></tr>
  <tr><td>3</td><td>王五</td><td>开放</td></tr>
 </table>
 </body>
</html>

最后将所需文件放到一个可以浏览的站点下边,打开test.html。
等待5秒钟,就可以看到效果了。

因为IE的问题,直接在文件夹下打开会出现不能解析xml文件(parsererror)的问题,所以建议放到可以运行的站点下边,或者用别的浏览器打开。

PS:GridView 是 DataGrid的后继控件,在 framework 2 中,虽然还存在DataGrid,但是GridView已经走上了历史的前台,取代DataGrid的趋势已是势不可挡。GridView和DataGrid功能相似,都是在web页面中显示数据源中的数据,将数据源中的一行数据,也就是一条记录,显示为在web页面上输出表格中的一行。
GridView相对于DataGrid来说,具有如下优势,功能上更加丰富,因为提供了智能标记面板(也就是show smart tag)更加易用方便,常用的排序、分页、更新、删除等操作可以零代码实现!具有PagerTemplate属性,可以自定义用户导航页面,也就是说分页的控制更加随心所欲。GridView和DataGrid在事件模型上也多有不同之处,DataGrid控件引发的都是单个事件,而GridView控件会引发两个事件,一个在操作前发生,一个在操作后发生,操作前的事件多位***ing事件,操作后的事件多位***ed事件,比如Sorting 事件和sorted 事件,RowDeleting和RowDeleted事件。
Listview和Gridview的刷新界面的方式是调用adapter.notifyDataSetChanged()进行界面刷新。
但是此方法有其弊端,他是将界面中的数据全部刷新一遍,不论数据有没有变化。

Javascript 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 #Javascript
给before和after伪元素设置js效果的方法
Dec 04 #Javascript
全面解析Bootstrap手风琴效果
Apr 17 #Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 #Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 #Javascript
浅析2种JavaScript继承方式
Dec 04 #Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 #Javascript
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
PDO::errorCode讲解
2019/01/28 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
Python外星人入侵游戏编程完整版
2020/03/30 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
医院总经理岗位职责
2014/02/04 职场文书
全国文明单位申报材料
2014/05/31 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
聘任书的格式及模板
2019/10/28 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers