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

 不想用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();

}