Jquery uses AJAX to obtain information from the background and display it on the table. Row selection is supported ., Jqueryajax

Jquery uses AJAX to obtain information from the background and display it on the table. Row selection is supported ., Jqueryajax

I didn't want to use the Easyui style, but I wanted to use the table function. I first wanted to find the relevant plug-ins on the Internet, but I did not find them. I didn't expect it to be that simple.

 

Background Code: (this is not important)

public ActionResult GetDictTypes(){    var data = from a in dbo.DictTypes                select new DictTypeListViewModel                {                    ID = a.ID,                    Name = a.Name,                    LastChangeUser = a.LastChangeUser,                    LastChangeDate = a.LastChangeDate,                    Remark = a.Remark                };    return Json(data.ToList());}

Page code:

<Table class = "table" id = "DictTypeTable"> <thead> <tr> <th> ID </th> <th> title </th> <th> introduction </th> </tr> </thead> <tbody class = "sel"> </tbody> </table>

Javascript code: (it needs to be called in $ (document). ready (function ($)

Function ShowDictType () {$ ('# dicttypetable '). children ('tbody '). empty (); $. ajax ({url: GetDictTypes_URL, type: 'post', dataType: 'json '}). done (function (data) {var tbody = ""; $. each (data, function (index, el) {var tr = "<tr>"; tr + = "<td>" + el. ID + "</td>"; tr + = "<td>" + el. name + "</td>"; tr + = "<td>" + el. remark + "</td>"; tr + = "</tr>"; tbody + = tr;}); $ ('# dicttypetable '). children ('tbody '). append (tbody); BindDictTypeTableEvent (); // here is the binding event }). fail (function () {alert ("Err ");});}

To bind an event after the table is generated:

Function BindDictTypeTableEvent () {$ ('# DictTypeTable tbody. sel '). children ('tr '). click (function (event) {$ (this ). siblings ('tr '). removeClass ('active'); // Delete the selected effect of other rows $ (this ). addClass ('active'); // Add the selected var id = $ (this ). children ('td: eq (0 )'). text (); // obtain the ID ShowDictData (id); // operation code, where another table data is displayed });}

Finally, the Code for obtaining the ID of the selected entry is as follows:

function GetTypeTableSelectId() {    return $('#DictTypeTable tbody.sel tr.active td:eq(0)').text();}