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

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

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

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());}

页面代码：

<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();//获取ID    ShowDictData(id);//操作代码，这里是显示另一个表格数据  });}

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

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

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