jquery obtains information from the background via Ajax and displays the implementation class _ajax related on the table

In the previous article to introduce jquery through Ajax from the background to get information displayed on the table and Support row selection, now, take a moment they processed, so that no need to write code every time, you can save a lot of time, specific see below:

The specific code is as follows:

Gets the data and displays the data table 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 (the 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 = ' <td> ' + formatjsondata (Json[index][fileds[i]]) +
    ' </td> ';
   }
   });
   TR = "</tr>";
  Tbody + = TR;
  });
  Table.children (' tbody '). Append (tbody);
   if (chlickevent) {//If necessary to support row-checked event Table.children (' Tbody '). addclass (' sel '); Table.children (' Tbody.sel '). Children (' tr '). Click (Function (Event) {$ (this). Siblings (' tr '). Removeclass (' active ') //Delete the selected effect of the other rows $ (this). addclass (' active ');//Increase the selected effect Chlickevent ($ (this). Children (' td:eq (0) ').Text ());/Add click event});
 }). Fail (function () {alert ("ERR");
});
 }//Format JSON data, such as Date function Formatjsondata (jsondata) {if (jsondata==null) {return ' no data '); else if (/\/date\ (\d+\)/.exec (jsondata)) {var date = new Date parseint (Jsondata.replace ("/date (", ""). Replace (")/", "" "
  ), 10);
 return date.tolocalestring ();
return jsondata; }

The writing is very simple, the function is very few, but I use temporarily enough. Meet simple needs.

The HTML code must be in the following format, the JSON data must be retrieved by post, the address is written to Data-url, and the data column name is written in Data-field.

Support for 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" > Name </th>
  <th data-field= "Remark" > Profile </th>
 </tr>
 </thead>
 <tbody></tbody >
</table>
<script>
 jQuery (document). Ready (function ($) {
 gettabledata (' # Rolegrouptable ', function (ID) {
  alert (ID)
 };
 })
; </script>

The above code is easy to understand, jquery through Ajax from the background to get information and display on the form of the implementation class is done, I hope you like.