利用jQuery及AJAX技术定时更新GridView的某一列数据
看到一个问题:定时更新GridView的某一列中的状态文本。马上就有了思路:GridView最后会生成表格,所以我们在页面中通过Ajax更新表格的列,从而达到ajax更新GridView的效果。
具体实现:
准备一个xml文件,用于存储要更新的数据,在页面中启动一个定时器,每隔5秒钟调用一个函数,函数里边通过$.ajax获取xml中的数据,解析xml,遍历表格行,匹配要更新的数据,更新。
getuserlist.xml
定义一个UserList的根节点,下边每个UserItem对应一条数据,UID可以理解成主键,UStatus是最新的状态。
<?xmlversion="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>AjaxUpdateTableColumn</title> <scriptsrc="jquery-1.3.1.min.js"type="text/javascript"></script> <scripttype="text/javascript"> window.onload=function(){ //每隔5秒检查一下数据 window.setInterval(checkStatus,5000); }; //检查数据 functioncheckStatus(){ //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 $("#userListTabletr").each(function(){ //获取行的第一列,这里边保存了XML中对应的UID信息 vartrID=$(this).find("td").eq(0).text(); //数据的新状态 vartrStatus=""; //遍历xml中的UserItem $(xml).find("UserList>UserItem").each(function(){ //获取UID和UStatus的值 varuid=$(this).find("UID").text(); varustatus=$(this).find("UStatus").text(); //比对当前行的ID和UID,如果相等,给数据的新状态赋值 if(trID==uid){ trStatus=ustatus; } }); //如果数据的新状态不为空,则更新单元格中现实的文本 if(trStatus!=""){ $(this).find("td").eq(2).text(trStatus); } }); } }); } </script> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> </head> <body> <!-- 这个表格有三列 ID:数据的ID,相当于主键,用于从xml中查询新数据 Name:只是显示 Status:要更新的列 --> <tableborder="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的后继控件,在framework2中,虽然还存在DataGrid,但是GridView已经走上了历史的前台,取代DataGrid的趋势已是势不可挡。GridView和DataGrid功能相似,都是在web页面中显示数据源中的数据,将数据源中的一行数据,也就是一条记录,显示为在web页面上输出表格中的一行。
GridView相对于DataGrid来说,具有如下优势,功能上更加丰富,因为提供了智能标记面板(也就是showsmarttag)更加易用方便,常用的排序、分页、更新、删除等操作可以零代码实现!具有PagerTemplate属性,可以自定义用户导航页面,也就是说分页的控制更加随心所欲。GridView和DataGrid在事件模型上也多有不同之处,DataGrid控件引发的都是单个事件,而GridView控件会引发两个事件,一个在操作前发生,一个在操作后发生,操作前的事件多位***ing事件,操作后的事件多位***ed事件,比如Sorting事件和sorted事件,RowDeleting和RowDeleted事件。
Listview和Gridview的刷新界面的方式是调用adapter.notifyDataSetChanged()进行界面刷新。
但是此方法有其弊端,他是将界面中的数据全部刷新一遍,不论数据有没有变化。