easyui field 获取对象子属性的值

2023-11-11

我们从服务器获取的数据格式如下:
{“total”:10,”rows”:[{“orderId”:”4”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:2,”createTime”:1510029825000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:”已付款”,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null},{“orderId”:”6”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:2,”createTime”:1510029825000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:”已付款”,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null},{“orderId”:”8”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:4,”createTime”:1510029825000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:”已发货”,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null},{“orderId”:”9”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:7,”createTime”:1510029825000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:null,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null},{“orderId”:”12”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:3,”createTime”:1510029825000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:”未发货”,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null},{“orderId”:”31”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:2,”createTime”:1510029825000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:”已付款”,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null},{“orderId”:”32”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:1,”createTime”:1510029825000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:”未付款”,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null},{“orderId”:”3”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:2,”createTime”:1510029784000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:”已付款”,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null},{“orderId”:”2”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:2,”createTime”:1510029769000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:”已付款”,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null},{“orderId”:”1”,”payment”:”1”,”paymentType”:1,”postFee”:”1”,”status”:1,”createTime”:1509986257000,”updateTime”:1509986263000,”paymentTime”:1510072665000,”consignTime”:1510245468000,”endTime”:1510331880000,”closeTime”:1510331883000,”shippingName”:”中通快递”,”shippingCode”:”34343131231”,”userId”:7,”buyerMessage”:”尽快发货”,”buyerNick”:”zhl”,”buyerRate”:null,”formatStatus”:”未付款”,”user”:{“id”:7,”username”:”zhangsan”,”password”:”e10adc3949ba59abbe56e057f20f883e”,”phone”:”13488888888”,”email”:”aa@a”,”created”:1428311035000,”updated”:1428311035000,”isadmin”:0},”orderDetails”:null}]}

现在我们要从user中获取id,username,phone

<th field='userID1',width:100"  data-options="formatter:function(val,row){

                if (row.user.id){
               return   row.user.id;
           }}" >用户ID</th>  
            <th field="userName1" data-options="formatter:function(val,row){
                if (row.user.username){
               return   row.user.username;
           }  
              }",width:100" >用户 </th>
            <th field='userPhone1',width:150"  data-options="formatter:function(val,row){
                if (row.user.phone){
               return   row.user.phone;
           }}" >用户电话</th> 

filed可以随便起 ,不要用user,这样会覆盖后面的属性,用户和phone都会变成id

easyUI版本:1.4.2
由于easyUI在设置field的时候使用的对象的属性名,若该属性具有多个子属性且在页面需要同时展示时就会出现展示数据一样的困扰,例如:
队员 person
名称
name
电话号码
phoneNum
所属队伍
team
队伍 team
队伍名称
name
队伍类型
teamType
在查询时想展示的效果:

js代码
[javascript] view plain copy
columns: [[
{
field: ‘name’,
title: ‘姓名’,
width: 100,
},
{
field: ‘phoneNum’,
title: ‘电话号码’,
width: 100,
},
{
field: ‘team’,
title: ‘所属队伍’,
width: 100,
formatter:function(val){
if(val){
return val.teamName;
}
},
},
{
field: ‘team’,
title: ‘队伍类型’,
width: 100,
formatter:function(val){
if(val){
return val.teamType;
}
},
]],
虽然我们在队伍的不同属性返回时设置了不同的返回值,但是页面展示的效果却是

发现最后两列的内容是一样。
那么如何才能展示呢,查看了一下api,发现formatter中function的参数可以是function(value,row,index),那我们就可以从row这个参数上下手了,将代码修改为如下:
[javascript] view plain copy
{
field: ‘teamName’,
title: ‘所属队伍’,
width: 100,
formatter:function(val, row, index){
if(row.teamInfo){
returnrow.teamInfo.teamName;
}
},
},
{
field: ‘teamType’,
title: ‘队伍类型’,
width: 100,
formatter:function(val, row, index){
if(row.teamInfo){
return row.teamInfo.teamType;
}
},
},
在次查看数据就是我们需要的样子了

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

easyui field 获取对象子属性的值 的相关文章

随机推荐

  • 转---30 分钟学会 Flex 布局

    正文从这开始 Flex 基本概念 在 flex 容器中默认存在两条轴 水平主轴 main axis 和垂直的交叉轴 cross axis 这是默认的设置 当然你可以通过修改使垂直方向变为主轴 水平方向变为交叉轴 这个我们后面再说 在容器中的
  • 使用three.js加载obj+mtl模型

    已经有比较好的博客介绍如何加载模型 使用three js加载obj mtl模型完整案例 有一点小问题 会导致模型加载不成功 需要修改两处地方 1 将 Detector js 替换为 WebGL js 根据Three js中Detector
  • 自动登录远程服务器脚本,iTerm2使用脚本自动登录远程服务器

    在iTerm2下ssh不能自动登录 不自动登录每次输入命令太麻烦了 这里介绍一个采取expect脚本的方式实现iTerm2下ssh自动登录 新建一个expect脚本 login exp usr bin expect if llength a
  • 从无监督构建词库看「最小熵原理」,套路是如何炼成的

    作者丨苏剑林 单位丨广州火焰信息科技有限公司 研究方向丨NLP 神经网络 个人主页丨kexue fm 在深度学习等端到端方案已经逐步席卷 NLP 的今天 你是否还愿意去思考自然语言背后的基本原理 我们常说 文本挖掘 你真的感受到了 挖掘 的
  • Unity iOS打开AppStore评星页面,浅谈Application.OpenURL()方法。

    http fairwoodgame com blog p 38 Unity iOS打开AppStore评星页面 浅谈Application OpenURL 方法 Posted in Unity on August 6 2013Comment
  • 8、工厂方法

    文章目录 概念 demo 概念 定义一个创建对象的接口 让其子类自己决定实例化哪一个工厂类 工厂模式使其创建过程延迟到子类进行 demo package com cn go designpattern public class Factor
  • 同步、异步、阻塞、非阻塞的理解

    同步 异步 阻塞 非阻塞的理解 有关这四个概念总会混淆 前几天特意查了下 简单理解了下这四个概念 若理解的不对 希望大家指正 一 同步异步 同步是调用者发出请求后 一直等待被调用者响应 如果被调用者没有响应那会一直不返回 以买书为例 如下
  • counterfactual generation network——因果推断用于提高分类器鲁棒性

    因果推断本是一个小众方向 但是感觉近几年突然火了起来 本文便是2021年发表于ICLR的一篇将因果推断用于提高图像分类的文章 本文出发点 先说一下本文针对的问题 我们知道图像分类任务就是将输入网络的图像尽量映射成我们想要的输出结果 通常是一
  • 2021江西省icpc(A,B,D,F,G,H,J,K,L)

    K Many Littles Make a Mickle 签到题 任意门 先从最简单的签到题开始吧 include
  • IPIDEA的使用方式

    文章目录 一 平台介绍 1 前言 2 简单介绍 3 适用场景 4 特色功能 二 获取代理ip池 1 注册信息 2 获取代理API 3 获取代理信息并检测代理可用性 三 代理爬取数据 1 编写功能代码 2 插入到代理代码 四 使用感受 一 平
  • Mac OS X 上干净卸载软件

    英文参考文章地址 http www cultofmac com 90060 how to completely uninstall software under mac os x macrx 在Mac OS X上卸载软件一般都很简单 在 应
  • 【Sentry使用】自定义transaction

    在使用Sentry时 你会发现有两种颜色的柱形图 一个是紫色的 在上面 一个是灰色的 在下面 这两类柱形图分别代表error和transaction 而在Python脚本环境下 不会自动进行transaction的记录 也就是说只会在出现异
  • YOLO的XML和TXT标注文本解释

    XML和TXT标注文本解释 转换函数 xml 左上角坐标和右下角坐标 转换为txt txt 中心点坐标 比例 宽 比例 高 比例 0到1之间 转换函数
  • aix安装bff_AIX的yum安装

    之前在AIX上安装yum是按照步骤一步步来做 今天找到一个脚本 可以很方便的执行脚本来做 ftp ftp software ibm com aix freeSoftware aixtoolbox ezinstall ppc 可惜的是很多时候
  • 中小研发团队架构实践之统一应用分层

    中小研发团队架构实践之统一应用分层 原文 中小研发团队架构实践之统一应用分层 一 写在前面 应用分层这件事情看起来很简单 但每个程序员都有自己的一套 哪怕是初学者 如何让一家公司的几百个应用采用统一的分层结构 并得到大部分程序员的认同呢 这
  • RabbitMQ死信队列

    目录 一 概念 二 出现死信的原因 三 实战 一 代码架构图 二 消息被拒 三 消息TTL过期 四 队列达到最大长度 一 概念 先从概念解释上搞清楚这个定义 死信 顾名思义就是无法被消费的消息 字面意思可以这样理解 一般来说 produce
  • 同心聚合力,开局谋发展——云孚科技参加哈工大青企联首届年会

    3月2日 云孚科技CEO张文斌先生受邀参加了历时3天的哈尔滨工业大学青年企业家联合会 以下称青企联 首届年会 并参与龙江行活动 哈工大党委常务副书记安实出席青企联年会并致辞 哈工大原副校长郭斌出席青企联年会并参加了赴香坊区调研座谈会 张文斌
  • Python 中的json模块dumps参数详解

    1 什么是JSON 维基百科中的定义 JSON JavaScript Object Notation JavaScript对象表示法 是一种由道格拉斯 克罗克福特构想和设计 轻量级的资料交换语言 该语言以易于让人阅读的文字为基础 用来传输由
  • 如何使用百度的GPU来跑自己的项目

    请先阅读如下两篇文章 并先读完我的文章再决定你是否要动手安装 因为有很多坑 白嫖百度GPU TeslaV100笔记 在 AI Studio 上使用 tensorflow 和 pytorch 的方法 亲测可用 免费使用谷歌GPU 这里谷歌是需
  • easyui field 获取对象子属性的值

    我们从服务器获取的数据格式如下 total 10 rows orderId 4 payment 1 paymentType 1 postFee 1 status 2 createTime 1510029825000 updateTime 1