jquery-Implementierungsklasse, die über AJAX Informationen aus dem Hintergrund abruft und in der Tabelle anzeigt

Die Implementierungsklasse für JQuery, um Informationen aus dem Hintergrund über AJAX abzurufen und in der Tabelle anzuzeigen, wird separat geschrieben, sodass Programmierer nicht jedes Mal Code schreiben müssen und interessierte Freunde viel Zeit sparen können Werfen Sie einen Blick darauf.

Im letzten Artikel habe ich Ihnen vorgestellt, dass JQuery Informationen aus dem Hintergrund über AJAX erhält, diese in der Tabelle anzeigt und die Zeilenauswahl unterstützt. Nehmen Sie sich nun etwas Zeit, um damit umzugehen. Damit Sie nicht jedes Mal Code schreiben müssen, können Sie viel Zeit sparen. Weitere Informationen finden Sie unten:

Der spezifische Code lautet wie folgt:

//获取数据并显示数据表格
function GetTableData(tableId,ChlickEvent) {
 var table = $(tableId);
 var url=table.data('url');
 $.ajax({
  url: url,
  type: 'post',
  dataType: 'json',
 })
 .done(function (json) {
  var fileds = new Array();
  table.children('thead').children('tr').children('th').each(function (index, el) {
   var field = $(this).data('field');
   fileds[index] = field;
  });
  var tbody = '';
  $.each(json, function (index, el) {
   var tr = "<tr>";
   $.each(fileds, function (i, el) {
    if (fileds[i]) {
     tr += &#39;<td>&#39; + formatJsonData(json[index][fileds[i]]) + &#39;</td>&#39;;
    }
   });
   tr += "</tr>";
   tbody += tr;
  });
  table.children(&#39;tbody&#39;).append(tbody);
  if (ChlickEvent) {//如果需要支持行选中事件
   table.children(&#39;tbody&#39;).addClass(&#39;sel&#39;);
   table.children(&#39;tbody.sel&#39;).children(&#39;tr&#39;).click(function (event) {
    $(this).siblings(&#39;tr&#39;).removeClass(&#39;active&#39;);//删除其他行的选中效果
    $(this).addClass(&#39;active&#39;);//增加选中效果
    ChlickEvent($(this).children(&#39;td:eq(0)&#39;).text());//新增点击事件
   });
  }
 }).fail(function () {
  alert("Err");
 });
}
//格式化JSON数据，比如日期
function formatJsonData(jsondata){
 if(jsondata==null){
  return &#39;无数据&#39;;
 }
 else if(/\/Date\(\d+\)/.exec(jsondata)){
  var date = new Date(parseInt(jsondata.replace("/Date(", "").replace(")/", ""), 10));
  return date.toLocaleString();
 }
 return jsondata;
}

Es ist sehr Einfach zu schreiben und mit wenigen Funktionen ausgestattet, aber für meinen eigenen Gebrauch reicht es vorerst aus. Erfüllen Sie einfache Bedürfnisse.

HTML-Code muss im folgenden Format vorliegen. Die Erfassungsadresse muss in die Daten-URL geschrieben werden und der Datenspaltenname muss in das Datenfeld geschrieben werden.

Klickereignisse unterstützen.

Verwendung:

<table id="RoleGroupTable" class="table" data-url="@Url.Action("GetRoleGroups", "Account")">
 <thead>
 <tr>
  <th data-field="ID">ID</th>
  <th data-field="Name">名称</th>
  <th data-field="Remark">简介</th>
 </tr>
 </thead>
 <tbody></tbody>
</table>
<script>
 jQuery(document).ready(function ($) {
 GetTableData(&#39;#RoleGroupTable&#39;, function (id) {
  alert(id)
 });
 });
</script>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JQuery Ajax generiert dynamisch Tabellen

Eine kurze Analyse der Verwendung von Ajax in Asp.net MVC

Basierend auf h5 Ajax, um die Positionierung von Mobiltelefonen zu erreichen

Das obige ist der detaillierte Inhalt vonjquery-Implementierungsklasse, die über AJAX Informationen aus dem Hintergrund abruft und in der Tabelle anzeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!