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;
}
},
},
在次查看数据就是我们需要的样子了