怎样修改JHipster的下拉框以及表格中的关联字段

在jHipster中通过JDL生产的页面默认是绑定到id列的.这种结果不仅客户接受不了,开发也是接受不了的.试想如果数据库有2000个关联对象,你展开一个下拉框后发现2000个编号.你是不是要抓狂.所以我们是绝不能容许这种事情发生的.

下面以Job 和 Employee为例,他们的关系是

public class Job implements Serializable {
...
@ManyToOne
private Employee employee;
...
}

而在JobDTO类中仅仅存在了

public class JobDTO implements Serializable {
...
private Long employeeId;
//getter() & setter()
...
}

我们必须把他修改为:

public class JobDTO implements Serializable {
...
private Long employeeId;
private Long employeeFName;
private Long employeeLName;
//getter() & setter()
...
}

这样我们的view层就可以访问到job对象中的这2个值了,但是Domain 对象的数据并没有和 DTO对象进行绑定,所以需要将他们链接起来.通过查询代码发现,只需要做如下修改

/**
* Mapper for the entity Job and its DTO JobDTO.
*/
@Mapper(componentModel = "spring", uses = {TaskMapper.class, })
public interface JobMapper {
@Mapping(source = "employee.id", target = "employeeId")
JobDTO jobToJobDTO(Job job);
....
}

修改为

/**
* Mapper for the entity Job and its DTO JobDTO.
*/
@Mapper(componentModel = "spring", uses = {TaskMapper.class, })
public interface JobMapper {
@Mapping(source = "employee.id", target = "employeeId")
@Mapping(source = "employee.firstName", target = "employeeFName")
@Mapping(source = "employee.lastName", target = "employeeLName")
JobDTO jobToJobDTO(Job job);
....
}

注意新增加的2行代码对数据进行了匹配.

这时候我们还需要去修改我们的前端页面.

在jobmySuffix-detail.html文件中修改如下代码

<dt><span data-translate="userCenterApp.job.employee">Employee</span></dt>
<dd>
<a ui-sref="employeemySuffix-detail({id:vm.job.employeeId})">{{vm.job.employeeid}}</a>
</dd>

<dt><span data-translate="userCenterApp.job.employee">Employee</span></dt>
<dd>
<a ui-sref="employeemySuffix-detail({id:vm.job.employeeId})">{{vm.job.employeeFName}}.{{vm.job.employeeLName}}</a>
</dd>

这时候页面绑定的下拉框就会显示你需要绑定的信息了,注意不要修改前面的vm.job.employeeId 前面的Id 是作为关联值保存到数据库的.

对于有下拉框的页面(jobmySuffix-dialog.html)

<div class="form-group">
<label data-translate="userCenterApp.job.employee" for="field_employee">Employee</label>
<select class="form-control" id="field_employee" name="employee" ng-model="vm.job.employeeId" ng-options="employee.lastName +'.'+ employee.firstName  as employee.lastName +'.'+ employee.firstName for employee in vm.employees"            >
<option value=""></option>
</select>
</div>

即修改

ng-model="vm.job.employeeId" ng-options="employee.id  as employee.id for employee in vm.employees"            >

为

ng-model="vm.job.employeeId" ng-options="employee.lastName +'.'+ employee.firstName  as employee.lastName +'.'+ employee.firstName for employee in vm.employees"            >