classe d'implémentation jquery qui obtient des informations de l'arrière-plan via AJAX et les affiche sur la table

La classe d'implémentation de jquery pour obtenir des informations en arrière-plan via AJAX et les afficher sur la table est écrite séparément, afin que les programmeurs n'aient pas besoin d'écrire du code à chaque fois et puissent gagner beaucoup de temps. jetez un oeil.

Dans le dernier article, je vous ai présenté que JQuery obtient des informations en arrière-plan via AJAX, les affiche sur la table et prend en charge la sélection de lignes. Maintenant, prenez le temps de les traiter, afin que vous n'ayez pas besoin d'écrire du code à chaque fois. Cela peut vous faire gagner beaucoup de temps. Veuillez voir ci-dessous pour plus de détails :

Le code spécifique est le suivant :

//获取数据并显示数据表格
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;
}

Il. est très simple à écrire et a peu de fonctions, mais c'est suffisant pour mon propre usage pour le moment. Répondre à des besoins simples.

Le code HTML doit être au format suivant. Les données JSON doivent être obtenues via POST. L'adresse d'acquisition doit être écrite dans l'URL des données et le nom de la colonne de données doit être écrit dans le champ de données.

Prend en charge les événements de clic.

Utilisation :

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

JQuery Ajax génère dynamiquement des tables

Une brève analyse de l'utilisation d'Ajax dans Asp.net MVC

Réaliser le positionnement du téléphone mobile basé sur h5 ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!