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