利用jQuery及AJAX技术定时更新GridView的某一列数据

时间：2021-05-25

看到一个问题：定时更新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()进行界面刷新。
但是此方法有其弊端，他是将界面中的数据全部刷新一遍，不论数据有没有变化。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章