利用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 相关文章推荐
jquery插件制作教程 txtHover
Aug 17 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
微信小程序实现多选功能
Nov 04 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脚本的10个技巧(2)
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
php简单提示框alert封装函数
2010/08/08 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python日志记录模块实例及改进
2017/02/12 Python
Python中is与==判断的区别
2017/03/28 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
django实现用户登陆功能详解
2017/12/11 Python
Python反转序列的方法实例分析
2018/03/21 Python
详解Python中is和==的区别
2019/03/21 Python
Python读写文件基础知识点
2019/06/10 Python
简单了解python反射机制的一些知识
2019/07/13 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python自省及反射原理实例详解
2020/07/06 Python
机电专业大学生求职信
2013/10/04 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
学生自我评价范文
2014/02/02 职场文书
机关党员公开承诺书
2014/08/30 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
工作违纪检讨书范文
2015/01/26 职场文书