easyUI中datagrid如何展示对象下属性的多个子属性

easyUI版本:1.4.2

由于easyUI在设置field的时候使用的对象的属性名,若该属性具有多个子属性且在页面需要同时展示时就会出现展示数据一样的困扰,例如:

队员 person

名称

name

电话号码

phoneNum

所属队伍

team

队伍 team

队伍名称

name

队伍类型

teamType

在查询时想展示的效果:


js代码

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这个参数上下手了,将代码修改为如下:

{
  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;
    }
  },
},

 在次查看数据就是我们需要的样子了 


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-贫寒豌豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值