jQuery 및 AJAX 기술을 사용하여 GridView data_jquery의 특정 열을 정기적으로 업데이트합니다.-JS 튜토리얼-php.cn

jQuery 및 AJAX 기술을 사용하여 GridView data_jquery의 특정 열을 정기적으로 업데이트합니다.

WBOY

풀어 주다： 2016-05-16 15:27:44

원래의

1313명이 탐색했습니다.

문제를 발견했습니다. GridView 열의 상태 텍스트를 정기적으로 업데이트하는 것입니다. 아이디어가 즉시 떠올랐습니다. GridView는 결국 테이블을 생성하므로 페이지에서 Ajax를 통해 테이블의 열을 업데이트하여 Ajax가 GridView를 업데이트하는 효과를 얻습니다.

상세 구현:

업데이트할 데이터를 저장할 xml 파일을 준비하고 페이지에서 타이머를 시작하고 5초마다 함수를 호출합니다. 이 함수는 $.ajax를 사용하여 xml의 데이터를 가져오고 xml을 구문 분석하고 트래버스합니다. 업데이트할 데이터와 일치하는 행이 업데이트됩니다.

getuserlist.xml

UserList의 루트 노드를 정의합니다. 아래의 각 UserItem은 UID가 기본 키로 이해될 수 있으며 UStatus는 최신 상태입니다.

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

로그인 후 복사

테스트.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의 후속 컨트롤입니다. 프레임워크 2에서는 DataGrid가 여전히 존재하지만 GridView는 역사의 최전선에 올랐으며 DataGrid를 대체하는 추세는 거침이 없습니다. GridView와 DataGrid는 둘 다 웹 페이지에 데이터 소스의 데이터를 표시하고, 데이터 소스의 데이터 행, 즉 레코드를 웹 페이지의 출력 테이블에 행으로 표시합니다.
DataGrid에 비해 GridView는 다음과 같은 장점이 있고 기능이 풍부합니다. 스마트 태그 패널(즉, 스마트 태그 표시)을 제공하므로 정렬, 페이징, 업데이트 등 일반적으로 사용되는 작업이 더 쉽고 편리합니다. , 삭제는 제로 코드로 구현 가능합니다! PagerTemplate 속성을 사용하면 사용자 탐색 페이지를 사용자 정의할 수 있습니다. 즉, 페이징 제어가 더욱 임의적으로 이루어집니다. GridView와 DataGrid는 이벤트 모델에서도 많은 차이점이 있습니다. DataGrid 컨트롤은 단일 이벤트를 트리거하는 반면, GridView 컨트롤은 작업 전 이벤트와 작업 후 이벤트를 여러 개 트리거합니다. , 작업 후 이벤트는 Sorting 이벤트 및 Sorted 이벤트, RowDeleting 및 RowDeleted 이벤트와 같은 여러 개의 *** 이벤트입니다.
Listview와 Gridview의 인터페이스를 새로 고치는 방법은 Adapter.notifyDataSetChanged()를 호출하여 인터페이스를 새로 고치는 것입니다.
그러나 이 방법에는 단점이 있습니다. 데이터 변경 여부에 관계없이 인터페이스의 모든 데이터를 새로 고칩니다.