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.