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