Heim > Artikel > Web-Frontend > Verwenden Sie die jQuery- und AJAX-Technologie, um eine bestimmte Spalte von GridView data_jquery regelmäßig zu aktualisieren

Verwenden Sie die jQuery- und AJAX-Technologie, um eine bestimmte Spalte von GridView data_jquery regelmäßig zu aktualisieren

WBOYOriginal: 2016-05-16 15:27:441252Durchsuche

Ich habe ein Problem gesehen: Aktualisieren Sie regelmäßig den Statustext in einer Spalte der GridView. Mir kam sofort eine Idee in den Sinn: GridView wird irgendwann eine Tabelle generieren, also aktualisieren wir die Spalten der Tabelle über Ajax auf der Seite, um den Effekt einer Ajax-Aktualisierung von GridView zu erzielen.

Detaillierte Umsetzung:

Bereiten Sie eine XML-Datei vor, um die zu aktualisierenden Daten zu speichern, starten Sie einen Timer auf der Seite und rufen Sie alle 5 Sekunden eine Funktion auf. Die Funktion verwendet $.ajax, um die Daten in der XML abzurufen, die XML zu analysieren und zu durchlaufen Die Zeilen, die mit den zu aktualisierenden Daten übereinstimmen, werden aktualisiert.

getuserlist.xml

Definieren Sie den Stammknoten einer UserList. Jedes UserItem unten entspricht einem Datenelement, das als Primärschlüssel verstanden werden kann, und UStatus ist der neueste 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>

test.html

Die spezifische Logik wird hier geschrieben.

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

Platzieren Sie abschließend die erforderlichen Dateien auf einer durchsuchbaren Site und öffnen Sie test.html.
Warten Sie 5 Sekunden und Sie werden den Effekt sehen.

Aufgrund eines Problems mit dem IE führt das direkte Öffnen in einem Ordner dazu, dass die XML-Datei nicht analysiert werden kann (Parserfehler). Es wird daher empfohlen, sie auf einer ausführbaren Site abzulegen oder zu öffnen mit einem anderen Browser.

PS: GridView ist das Nachfolgesteuerelement von DataGrid. Obwohl DataGrid immer noch existiert, ist GridView an die Spitze der Geschichte gerückt und der Trend, DataGrid zu ersetzen, ist nicht aufzuhalten. GridView und DataGrid haben ähnliche Funktionen. Beide zeigen Daten aus der Datenquelle auf der Webseite an und zeigen eine Datenzeile in der Datenquelle, also einen Datensatz, als Zeile in der Ausgabetabelle auf der Webseite an.
Im Vergleich zu DataGrid bietet GridView die folgenden Vorteile und ist funktionsreicher: Da es ein Smart-Tag-Panel bietet (dh Smart-Tags anzeigen), ist es einfacher zu verwenden und häufig verwendete Vorgänge wie Sortieren, Paginieren und Aktualisieren , und das Löschen kann ohne Code implementiert werden! Mit dem PagerTemplate-Attribut kann die Benutzernavigationsseite angepasst werden, was bedeutet, dass die Steuerung des Pagings willkürlicher ist. GridView und DataGrid weisen auch viele Unterschiede in den Ereignismodellen auf. Das DataGrid-Steuerelement löst ein einzelnes Ereignis aus, während das GridView-Steuerelement zwei Ereignisse auslöst, eines vor der Operation und eines nach der Operation Das Ereignis nach der Operation besteht aus mehreren ***-Ereignissen, z. B. Sortierereignissen und sortierten Ereignissen, RowDeleting- und RowDeleted-Ereignissen.
Die Möglichkeit, die Schnittstelle von Listview und Gridview zu aktualisieren, besteht darin, adapter.notifyDataSetChanged() aufzurufen, um die Schnittstelle zu aktualisieren.
Allerdings hat diese Methode ihre Nachteile: Sie aktualisiert alle Daten in der Schnittstelle, unabhängig davon, ob sich die Daten geändert haben oder nicht.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Seiteninitialisierungs- und Ladeereignisse in jQuery mobile web development_jqueryNächster Artikel：Seiteninitialisierungs- und Ladeereignisse in jQuery mobile web development_jquery

In Verbindung stehende Artikel

Mehr sehen