Online之JS增强-关联修改控件值【从表】
功能说明:在online主从表表单中,当表表单某一控件值改变从的时候关联改变其他控件的值,【以下说明仅限于从表】示例说明:当改变学校字段(school)的时候对应的描述字段(note)跟着改变 ,步骤如下
1.配置form的增强JS:(JS增强定义见online基础篇)代码如下:
a_sub_kua_onlChange(){
return {
school(){
let id = event.row.id
let value = event.value
let targrt = event.target
let columnKey = event.column.key
getAction('/test/jeecgDemo/getNote',{school:value}).then(res=>{
let otherValues = {'note':res}
that.triggleChangeValues(otherValue,id,targrt)
})
}
}
}
2.编写后台代码接收请求代码如下:
@Autowired
private ISysDictService sysDictService;
@GetMapping("/getNote")
public String getNote(@RequestParam(name="school") String school) {
//TODO 业务自定义 此处下拉框的value是字典项的编码需要将其转换成名称
String schoolName = sysDictService.queryDictTextByKey("school", school);
return schoolName+"是一所学校";
}
3.测试:
Summary:配置form表单JS增强 -主子表实现子表的关联change有如下几点需要注意(如1图例子)
- 方法名规则是:表名+'_onlChange',每张表对应一个一个方法
- 上述方法会返回一个对象,对象中的属性名和数据库的字段名保持一致,上述1定义表示:当school字段内容改变的时候会触发school方法
- 每个字段方法内有两个内置参数that和event,that指向当前页面的vue实例对象,event对象包含属性如下表
- 使用getAction发起请求
- 使用that.triggleChangeValues(values,id,target)改变其他控件的值,values是一个对象可以配置多个控件的值
event对象描述如下
属性名 | 描述 |
---|---|
type | 当前操作控件的类型 |
row | 当前行的数据,通过row.id可以获取当前行的id值 |
column | 当前列的配置信息,通过column.key 获取当前字段名称 |
value | 当前控件的值 |
target | 当前控件所在table的target对象,调用triggleChangeValues用到 |
当前内容版权归 Jeecg-Boot 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Jeecg-Boot .