EasyUI 中 DataGrid 控制元件 列 如何繫結物件中的屬性

EasyUI 中 DataGrid 控制元件 是我們經常用到的控制元件之一，

但是 DataGrid 控制元件 在繫結顯示列時卻不支援物件屬性繫結。

 

模型如下：

 

public class Manager implements java.io.Serializable {

    private Integer id;
    private Role role;
    private String loginName;
    private String password;
    private int status;
    private Date lastDate;
    private Date createAt;
    private String remarks;

         //省略 get and  set
}

 其中Role 是一個物件

 

 

 

 

<table id="manager_datagrid">
 <thead>
    <tr>
      <th data-options="field:'loginName'">帳號</th>
      <th data-options="field:'role',formatter:managerRoleFormat">所屬崗位</th>
      <th data-options="field:'createAt'">建立時間</th>
      <th data-options="field:'lastDate'">最後登入時間</th>
      <th data-options="field:'status',formatter:managerStatusFormat">狀態</th>
      <th data-options="field:'remarks'">備註</th>
    </tr>
 </thead>
</table>

 

 

 

function managerRoleFormat(val,row){
    if(val) return val.roleName;
    else return "";
}

 

function managerStatusFormat(val,row){

switch(val){
  case 0: return '停用';
  case 1: return '正常';
  default: return '';
  }
}

 

 

這樣通過 EasyUI 給我們提供的 formatter  函式 我們就可以實現 物件屬性的繫結.