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

悠悠 2022-08-05 01:22 153阅读 0赞

easyUI版本：1.4.2

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

队员 person

<table> 
 <tbody> 
  <tr> 
   <td> <p>名称</p> </td> 
   <td> <p>name</p> </td> 
  </tr> 
  <tr> 
   <td> <p>电话号码</p> </td> 
   <td> <p>phoneNum</p> </td> 
  </tr> 
  <tr> 
   <td> <p>所属队伍</p> </td> 
   <td> <p>team</p> </td> 
  </tr> 
 </tbody> 
</table>

队伍 team

<table> 
 <tbody> 
  <tr> 
   <td> <p>队伍名称</p> </td> 
   <td> <p>name</p> </td> 
  </tr> 
  <tr> 
   <td> <p>队伍类型</p> </td> 
   <td> <p>teamType</p> </td> 
  </tr> 
 </tbody> 
</table>

在查询时想展示的效果：

![Center][]

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

虽然我们在队伍的不同属性返回时设置了不同的返回值，但是页面展示的效果却是

![Center 1][]

发现最后两列的内容是一样。

那么如何才能展示呢，查看了一下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;
        }
      },
    },

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

![Center 2][]

[Center]: /images/20220805/669de09f1d754165beba4501f62461f6.png
[Center 1]: /images/20220805/44c286357c5b453e9e85c9ab0ccfa36b.png
[Center 2]: /images/20220805/cac9c5fc4c9e479598047d8d67b820f2.png