easyUI这样获取Json的内嵌数据
先给出返回的json数据。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | { "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里面的信息时,我使用了 如下的方式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | { 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’,再运行一次,竟然得到了我想要的结果。
下面是完整的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | < 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 > |
最后运行效果如下:
作者:程序旅途
出处:https://www.cnblogs.com/nianming/archive/2011/08/31/2160270.html
版权:本站使用「CC BY 4.0」创作共享协议,转载请在文章明显位置注明作者及出处。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· Open-Sora 2.0 重磅开源!