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

This article mainly introduces JQuery's use of AJAX to obtain information from the background that is displayed in a table and supports relevant information in row selection. If you need it, you can refer to the Easyui style you don't want to use, however, if I wanted his table function, I had to go to the Internet to find the relevant plug-ins at the beginning, but I did not find it and I started to write it myself. I didn't expect it to be so 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:

 
 
 
  
  
 
   
 
    
ID
 
    
Title
 
    
Introduction
 
   
 
  
 
  
  

 
 

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 + =""+ El. ID +""; Tr + =""+ El. Name +""; Tr + =""+ El. Remark +""; 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();}