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: '真实姓名',
                     60,
                    formatter: function (value, rec) {
                        return rec.account.realName;
                    }
                }, {
                    field: 'account',
                    title: '账号类型',
                     60,
                    formatter: function (value, rec) {
                        return rec.account.accountType;
                    }
                }, {
                    field: 'account',
                    title: '性别',
                     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: '电话',
                     100,
                    rowspan: 2
                }, {
                    field: 'certificateCode',
                    title: '身份证号',
                     120,
                    rowspan: 2
                }, {
                    title: '账户',
                    colspan: 9
                }, {
                    field: 'externalAccess',
                    title: '外部访问',
                     60,
                    rowspan: 2
                }, {
                    field: 'opTime',
                     120,
                    rowspan: 2
                }, {
                    field: 'interAccess',
                    title: '内部访问',
                     60,
                    rowspan: 2
                }
                ],
                [{
                    field: 'account.realName',
                    title: '真实姓名',
                     60,
                    formatter: function (value, rec) {
                        return rec.account['realName'];
                    }
                }, {
                    field: 'account.mobile',
                    title: '电话',
                     80,
                    formatter: function (value, rec) {
                        return rec.account['mobile'];
                    }
                }, {
                    field: 'account.certificateCode',
                    title: '身份证号',
                     120,
                    formatter: function (value, rec) {
                        return rec.account['certificateCode'];
                    }
                }, {
                    field: 'certificateType',
                    title: '证件类型',
                     60,
                    formatter: function (value, rec) {
                        return rec.account['certificateType'];
                    }
                }, {
                    field: 'account.accountType',
                    title: '账号类型',
                     60,
                    formatter: function (value, row) {
                        return row.account.accountType;
                    }
                }, {
                    field: 'account.gender',
                    title: '性别',
                     50,
                    formatter: function (value, row) {
                        return row.account.gender;
                    }
                }, {
                    field: 'address',
                    title: '地址',
                     150,
                    formatter: function (value, row) {
                        return row.account.address;
                    }
                }, {
                    field: 'name',
                    title: '用户名',
                     100,
                    formatter: function (value, row) {
                        return row.account.name;
                    }
                }, {
                    field: 'id',
                    title: 'Id',
                     60,
                    formatter: function (value, row) {
                        return row.account.id;
                    }
                }]],
                pagination: true,
                rownumbers: true
            });
        });
    </script>
</head>
<body>
    <table id="ry">
    </table>
</body>

最后运行效果如下:

原文地址:https://www.cnblogs.com/nianming/p/2160270.html