jquery通过AJAX从后台获取信息并显示在表格上的实现类
在上篇文章给大家介绍了JQuery通过AJAX从后台获取信息显示在表格上并支持行选中，现在，抽个时间他们处理了一下，这样就不需要每次写代码了，可以节省大量的时间，具体请看下文：
具体代码如下：
//获取数据并显示数据表格
functionGetTableData(tableId,ChlickEvent){
vartable=$(tableId);
varurl=table.data('url');
$.ajax({
url:url,
type:'post',
dataType:'json',
})
.done(function(json){
varfileds=newArray();
table.children('thead').children('tr').children('th').each(function(index,el){
varfield=$(this).data('field');
fileds[index]=field;
});
vartbody='';
$.each(json,function(index,el){
vartr="<tr>";
$.each(fileds,function(i,el){
if(fileds[i]){
tr+='<td>'+formatJsonData(json[index][fileds[i]])+'</td>';
}
});
tr+="</tr>";
tbody+=tr;
});
table.children('tbody').append(tbody);
if(ChlickEvent){//如果需要支持行选中事件
table.children('tbody').addClass('sel');
table.children('tbody.sel').children('tr').click(function(event){
$(this).siblings('tr').removeClass('active');//删除其他行的选中效果
$(this).addClass('active');//增加选中效果
ChlickEvent($(this).children('td:eq(0)').text());//新增点击事件
});
}
}).fail(function(){
alert("Err");
});
}
//格式化JSON数据，比如日期
functionformatJsonData(jsondata){
if(jsondata==null){
return'无数据';
}
elseif(/\/Date\(\d+\)/.exec(jsondata)){
vardate=newDate(parseInt(jsondata.replace("/Date(","").replace(")/",""),10));
returndate.toLocaleString();
}
returnjsondata;
}
写的非常简单，功能也很少，但是我自己用暂时足够了。满足简单需求。
HTML代码必须以下格式，必须以POST方式获取JSON数据，获取地址写到data-url里，数据列名写到data-field里。
支持点击事件。
用法：
<tableid="RoleGroupTable"class="table"data-url="@Url.Action("GetRoleGroups","Account")">
<thead>
<tr>
<thdata-field="ID">ID</th>
<thdata-field="Name">名称</th>
<thdata-field="Remark">简介</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
jQuery(document).ready(function($){
GetTableData('#RoleGroupTable',function(id){
alert(id)
});
});
</script>
以上代码简单易懂，jquery通过AJAX从后台获取信息并显示在表格上的实现类就这样完成了，希望大家喜欢。