JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单。
后台代码:(这个不重要)
publicActionResultGetDictTypes() { vardata=fromaindbo.DictTypes selectnewDictTypeListViewModel { ID=a.ID, Name=a.Name, LastChangeUser=a.LastChangeUser, LastChangeDate=a.LastChangeDate, Remark=a.Remark }; returnJson(data.ToList()); }
页面代码:
<tableclass="table"id="DictTypeTable"> <thead> <tr> <th>ID</th> <th>标题</th> <th>简介</th> </tr> </thead> <tbodyclass="sel"></tbody> </table>
javascript代码:(需要在$(document).ready(function($){}里调用)
functionShowDictType(){ $('#DictTypeTable').children('tbody').empty(); $.ajax({ url:GetDictTypes_URL, type:'post', dataType:'json' }) .done(function(data){ vartbody=""; $.each(data,function(index,el){ vartr="<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"); }); }
要在表格生成之后再绑定事件:
functionBindDictTypeTableEvent(){ $('#DictTypeTabletbody.sel').children('tr').click(function(event){ $(this).siblings('tr').removeClass('active');//删除其他行的选中效果 $(this).addClass('active');//增加选中效果 varid=$(this).children('td:eq(0)').text();//获取ID ShowDictData(id);//操作代码,这里是显示另一个表格数据 }); }
最后这里是获取选中条目ID的代码:
functionGetTypeTableSelectId(){ return$('#DictTypeTabletbody.seltr.activetd:eq(0)').text(); }