easyUI这样获取Json的内嵌数据
先给出返回的json数据。
{
"total":3,
"rows":[
{ "mobile":"13788888888",
"certificateCode":"370682xxxxxxxxxxxx",
"account":{
"realName":"刘德华",
"mobile":null,
"certificateCode":"370682xxxxxxxxxxxx",
"certificateType":"身份证",
"accountType":"教工",
"gender":"男",
"address":"青岛校区\\网络管理中心",
"name":"0701468004",
"id":37932
},
"externalAccess":true,
"opTime":1314673484000,
"wlan":{
"name":"移动",
"id":1
},
"interAccess":true,
"id":19
}
]
}
昨天遇到这样一个问题，在取account里面的信息时，我使用了 如下的方式：
{
field: 'account',
title: '真实姓名',
width: 60,
formatter: function (value, rec) {
return rec.account.realName;
}
}, {
field: 'account',
title: '账号类型',
width: 60,
formatter: function (value, rec) {
return rec.account.accountType;
}
}, {
field: 'account',
title: '性别',
width: 50,
formatter: function (value, rec) {
return rec.account.gender;
}
}
这样可以取出realName的值，但是账号类型,性别也显示realName的值。不知道问题出在哪，在网上搜索，看到给出的解决办法都是返回 rec.account.realName这样，但是只返回一个字段，这样肯定可以返回正确的值了，但是我要返回的是很多个字段。真是没办法了，就随便试试吧，我把field:’account’改成field:’account.realName’，再运行一次，竟然得到了我想要的结果。
下面是完整的代码：
<head>
<title></title>
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script src="easyui/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.1.2.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#ry").datagrid({
height: 500,
nowrap: true,
striped: true,
url: 'data.json',
columns: [[{
field: 'mobile',
title: '电话',
width: 100,
rowspan: 2
}, {
field: 'certificateCode',
title: '身份证号',
width: 120,
rowspan: 2
}, {
title: '账户',
colspan: 9
}, {
field: 'externalAccess',
title: '外部访问',
width: 60,
rowspan: 2
}, {
field: 'opTime',
width: 120,
rowspan: 2
}, {
field: 'interAccess',
title: '内部访问',
width: 60,
rowspan: 2
}
],
[{
field: 'account.realName',
title: '真实姓名',
width: 60,
formatter: function (value, rec) {
return rec.account['realName'];
}
}, {
field: 'account.mobile',
title: '电话',
width: 80,
formatter: function (value, rec) {
return rec.account['mobile'];
}
}, {
field: 'account.certificateCode',
title: '身份证号',
width: 120,
formatter: function (value, rec) {
return rec.account['certificateCode'];
}
}, {
field: 'certificateType',
title: '证件类型',
width: 60,
formatter: function (value, rec) {
return rec.account['certificateType'];
}
}, {
field: 'account.accountType',
title: '账号类型',
width: 60,
formatter: function (value, row) {
return row.account.accountType;
}
}, {
field: 'account.gender',
title: '性别',
width: 50,
formatter: function (value, row) {
return row.account.gender;
}
}, {
field: 'address',
title: '地址',
width: 150,
formatter: function (value, row) {
return row.account.address;
}
}, {
field: 'name',
title: '用户名',
width: 100,
formatter: function (value, row) {
return row.account.name;
}
}, {
field: 'id',
title: 'Id',
width: 60,
formatter: function (value, row) {
return row.account.id;
}
}]],
pagination: true,
rownumbers: true
});
});
</script>
</head>
<body>
<table id="ry">
</table>
</body>
最后运行效果如下：
