利用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 cookie插件代码类
May 26 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
小程序数据通信方法大全(推荐)
Apr 15 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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
js一组验证函数
2008/12/20 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
gulp构建小程序的方法步骤
2019/05/31 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
经典c++面试题二
2015/08/14 面试题
六查六看剖析材料
2014/02/15 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL