jQuery 및 AJAX 기술을 사용하여 GridView data_jquery의 특정 열을 정기적으로 업데이트합니다.
- WBOY원래의
- 2016-05-16 15:27:441251검색
문제를 발견했습니다. 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>
테스트.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()를 호출하여 인터페이스를 새로 고치는 것입니다.
그러나 이 방법에는 단점이 있습니다. 데이터 변경 여부에 관계없이 인터페이스의 모든 데이터를 새로 고칩니다.