利用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 相关文章推荐
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
DWR中各种java方法的调用
May 04 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
php中final关键字用法分析
2016/12/07 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
Python读写Redis数据库操作示例
2014/03/18 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
使用Python实现分别输出每个数组
2019/12/06 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python绘制封闭多边形教程
2020/02/18 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
打造完美自荐信
2014/01/24 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
殡葬服务心得体会
2014/09/11 职场文书
高中开学感言
2015/08/01 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers