ajax获取选中行的id,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());

}

页面代码：

ID标题简介

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 += "

" + el.ID + "";

tr += "

" + el.Name + "";

tr += "

" + el.Remark + "";

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

}