JQuery通过AJAX从后台获取信息显示在表格上并支持行选中

不想用Easyui的样式，但是想要他的表格功能，本来一开始是要到网上找相关插件的，但是没找到就开始自己写，没想到这么简单。

后台代码：（这个不重要）

public ActionResult GetDictTypes（）{var data = from a in dbo.DictTypesselect new DictTypeListViewModel{ID = a.ID,Name = a.Name,LastChangeUser = a.LastChangeUser,LastChangeDate = a.LastChangeDate,Remark = a.Remark};return Json（data.ToList（））;}

页面代码：

<table class="table" id="DictTypeTable"> <thead><tr> <th>ID</th> <th>标题</th> <th>简介</th></tr> </thead> <tbody class="sel"></tbody></table>

javascript代码：（需要在 $（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（）;//这里是绑定事件 }） .fail（function （） { alert（"Err"）; }）;}

要在表格生成之后再绑定事件：

function BindDictTypeTableEvent（） {$（"#DictTypeTable tbody.sel"）.children（"tr"）.click（function （event） {$（this）.siblings（"tr"）.removeClass（"active"）;//删除其他行的选中效果$（this）.addClass（"active"）;//增加选中效果var id = $（this）.children（"td:eq（0）"）.text（）;//获取IDShowDictData（id）;//操作代码，这里是显示另一个表格数据}）;}

最后这里是获取选中条目ID的代码：

function GetTypeTableSelectId（） {return $（"#DictTypeTable tbody.sel tr.active td:eq（0）"）.text（）;}