Use jQuery and AJAX technology to regularly update a certain column of GridView data

Use jQuery and AJAX technology to regularly update a certain column of GridView data_jquery

WBOY

Release： 2016-05-16 15:27:44

Original

1331 people have browsed it

I saw a problem: regularly update the status text in a column of the GridView. An idea immediately came to mind: GridView will eventually generate a table, so we update the columns of the table through Ajax on the page to achieve the effect of ajax updating GridView.

Detailed implementation:

Prepare an xml file to store the data to be updated, start a timer in the page, and call a function every 5 seconds. The function uses $.ajax to obtain the data in the xml, parse the xml, and traverse the table. Rows that match the data to be updated are updated.

getuserlist.xml

Define the root node of a UserList. Each UserItem below corresponds to a piece of data. UID can be understood as the primary key, and UStatus is the latest status.

<&#63;xml version="1.0" encoding="utf-8" &#63;>
<UserList>
<UserItem><UID>1</UID><UStatus>关闭</UStatus></UserItem>
<UserItem><UID>2</UID><UStatus>关闭</UStatus></UserItem>
<UserItem><UID>3</UID><UStatus>开放</UStatus></UserItem>
</UserList>

Copy after login

test.html

The specific logic is written here.

<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>

Copy after login

Finally, place the required files under a browsable site and open test.html.
Wait for 5 seconds and you will see the effect.

Due to a problem with IE, opening it directly in a folder will cause the problem of being unable to parse the xml file (parsererror), so it is recommended to put it under a site that can be run, or open it with another browser.

PS: GridView is the successor control of DataGrid. In framework 2, although DataGrid still exists, GridView has come to the forefront of history, and the trend of replacing DataGrid is unstoppable. GridView and DataGrid have similar functions. They both display data from the data source on the web page, and display a row of data in the data source, that is, a record, as a row in the output table on the web page.
Compared with DataGrid, GridView has the following advantages and is richer in functions. Because it provides a smart tag panel (that is, show smart tag), it is easier to use and more convenient. Commonly used operations such as sorting, paging, updating, and deletion can be implemented with zero code! With the PagerTemplate attribute, the user navigation page can be customized, which means that the control of paging is more arbitrary. GridView and DataGrid also have many differences in event models. The DataGrid control triggers a single event, while the GridView control triggers two events, one before the operation and one after the operation. The event before the operation is multiple. ***ing event, the event after the operation is multiple ***ed events, such as Sorting event and sorted event, RowDeleting and RowDeleted event.
The way to refresh the interface of Listview and Gridview is to call adapter.notifyDataSetChanged() to refresh the interface.
However, this method has its drawbacks. It refreshes all the data in the interface, regardless of whether the data has changed or not.