Utilisez la technologie jQuery et AJAX pour mettre régulièrement à jour une certaine colonne de GridView data

Utilisez la technologie jQuery et AJAX pour mettre régulièrement à jour une certaine colonne de GridView data_jquery

WBOY

Libérer： 2016-05-16 15:27:44

original

1286 Les gens l'ont consulté

J'ai vu un problème : mettre régulièrement à jour le texte de statut dans une colonne du GridView. Une idée m'est immédiatement venue à l'esprit : GridView finira par générer un tableau, nous mettons donc à jour les colonnes du tableau via Ajax sur la page pour obtenir l'effet de mise à jour ajax de GridView.

Mise en œuvre détaillée :

Préparez un fichier XML pour stocker les données à mettre à jour, démarrez un minuteur dans la page et appelez une fonction toutes les 5 secondes. La fonction utilise $.ajax pour obtenir les données dans le XML, analyser le XML et parcourir. le tableau. Les lignes qui correspondent aux données à mettre à jour sont mises à jour.

getuserlist.xml

Définissez le nœud racine d'une UserList. Chaque UserItem ci-dessous correspond à une donnée UID peut être comprise comme la clé primaire, et UStatus est le dernier statut.

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

Copier après la connexion

test.html

La logique spécifique est écrite ici.

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

Copier après la connexion

Enfin, placez les fichiers requis sous un site consultable et ouvrez test.html.
Attendez 5 secondes et vous verrez l'effet.

En raison d'un problème avec IE, l'ouvrir directement dans un dossier entraînera le problème de l'impossibilité d'analyser le fichier xml (parsererror), il est donc recommandé de le placer sous un site pouvant être exécuté, ou de l'ouvrir avec un autre navigateur.

PS : GridView est le contrôle successeur de DataGrid. Dans le framework 2, bien que DataGrid existe toujours, GridView est passé au premier plan de l'histoire et la tendance au remplacement de DataGrid est imparable. GridView et DataGrid ont des fonctions similaires. Ils affichent tous deux les données de la source de données sur la page Web et affichent une ligne de données dans la source de données, c'est-à-dire un enregistrement, sous forme de ligne dans la table de sortie de la page Web.
Par rapport à DataGrid, GridView présente les avantages suivants et est plus riche en fonctions. Parce qu'il fournit un panneau de balises intelligentes (c'est-à-dire afficher la balise intelligente), il est plus facile à utiliser et plus pratique pour les opérations couramment utilisées telles que le tri, la pagination et la mise à jour. , et la suppression peut être mise en œuvre sans code ! Avec l'attribut PagerTemplate, la page de navigation de l'utilisateur peut être personnalisée, ce qui signifie que le contrôle de la pagination est plus arbitraire. GridView et DataGrid présentent également de nombreuses différences dans les modèles d'événements. Le contrôle DataGrid déclenche un seul événement, tandis que le contrôle GridView déclenche deux événements, un avant l'opération et un après l'opération. L'événement avant l'opération est multiple. , l'événement après l'opération est constitué de plusieurs événements ***, tels que l'événement Sorting et l'événement trié, l'événement RowDeleting et RowDeleted.
La façon d'actualiser l'interface de Listview et Gridview consiste à appeler adapter.notifyDataSetChanged() pour actualiser l'interface.
Cependant, cette méthode a ses inconvénients : elle actualise toutes les données de l'interface, que les données aient changé ou non.