利用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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
vue实现搜索过滤效果
May 28 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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实现通过cookie换肤的方法
2015/07/13 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
理解Python中的类与实例
2015/04/27 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
Python中生成ndarray实例讲解
2021/02/22 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
本科毕业生专业自荐书范文
2014/02/05 职场文书
小学生植树节活动总结
2014/07/04 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js