easyUI这样获取Json的内嵌数据

最新推荐文章于 2023-12-01 00:18:17 发布

weixin_34347651

最新推荐文章于 2023-12-01 00:18:17 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nianming/archive/2011/08/31/2160270.html

本文讨论了一种使用EasyUI实现表格时，处理包含嵌套数据结构的问题，特别是如何正确显示账户信息中的多个字段。通过修改字段定义为特定属性（如account.realName），作者成功解决了在表格中显示不同账户属性的问题。示例代码展示了如何在数据网格中灵活配置字段，以适应复杂的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>

最后运行效果如下：