实现效果图:
代码:
$(function(){
$.getJSON(
"/homeofcar/user/getjson",
function(data) {
var list = data;
//循环
$.each(list,function(i,user){
//构建行
var $tr = $("<tr></tr>");
//复选框
$tr.append('<td><input type="checkbox"/></td>');
//用户
$tr.append("<td>"+user.realname+"</td>");
//角色
var juese = '<td><table cellspacing="0" cellpadding="0" border="1" style="border-collapse: collapse;border-width:0px; border-style:hidden;">';
$.each(user.listRole,function(j,role){
juese = juese + "<tr><td>"+role.rolename+"</td></tr>";
});
juese+="</table></td>";
$tr.append(juese);
//权限
var quanxian = '<td><table cellspacing="0" cellpadding="0" border="1" style="border-collapse: collapse;border-width:0px; border-style:hidden;">';
var index=["[系统管理:]","[仓库管理:]","[统计管理:]","[销售管理:]","[客户管理:]"];
$.each(user.listRole,function(j,role){
quanxian+="<tr><td>";
$.each(role.listModule,function(k,module){
if (module.paretid != 0) {
if (module.paretid != role.listModule[k-1].paretid)
quanxian+=" "+index[module.paretid-1];
quanxian+=" "+module.modulename;
}
});
quanxian+="</td></tr>";
});
quanxian+="</table></td>";
$tr.append(quanxian);
//编辑 <td><a href="/user/userupdate/id">编辑</a></td>
$tr.append('<td><a href="user/userupdate?userid='+user.userid+'">编辑</a></td>');
//构建行追加
$("#tablemax").append($tr);
});
});//getJSON
});
利用在中嵌套table实现多级显示(合并单元格)