利用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实现预览待上传的本地图片
Mar 15 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
js实现一键复制功能
Mar 16 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 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读写文件的方法(生成HTML)
2006/11/27 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python简易版停车管理系统
2019/08/12 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
建筑专业毕业生自荐信
2014/05/25 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
费用申请报告范文
2015/05/15 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
nginx静态资源的服务器配置方法
2022/07/07 Servers