jquery implementation class that obtains information from the background through AJAX and displays it on the table

jquery uses AJAX to obtain information from the background and display it on the form. The implementation class is written separately, so that programmers do not need to write code every time and can save a lot of time. Friends who are interested should take a look.

In the last article, I introduced you to JQuery using AJAX to obtain information from the background, display it on the table, and support row selection. Now, take some time to deal with it, so that you don’t need to write code every time. It can save a lot of time. Please see below for details:

The specific code is as follows:

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

It is very simple to write and has few functions, but it is enough for my own use for the time being. Meet simple needs.

HTML code must be in the following format. JSON data must be obtained through POST. The acquisition address must be written in the data-url, and the data column name must be written in the data-field.

Support click events.

Usage:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JQuery Ajax dynamically generates Table tables

A brief analysis of the use of Ajax in Asp.net MVC

Realizing mobile phone positioning based on h5 ajax

The above is the detailed content of jquery implementation class that obtains information from the background through AJAX and displays it on the table. For more information, please follow other related articles on the PHP Chinese website!