修改控件值【从表】
最后更新于：2022-04-02 07:18:51
# Online之JS增强-关联修改控件值【从表】
>[info] 功能说明：在online主从表单中，当从表某控件值改变的时候关联改变从表的其他控件的值。
[TOC]
## 示例说明
**【以下说明仅限于从表】**
当改变字段 `学校(school)` 的时候，对应联动改变字段 `描述(note)`。
* 子表表名：`a_sub_kua`
* 子表数据字段如下(省略部分字段)
字段名 | 描述 |
---|---|
school | 学校 |
note | 备注 |
## 配置步骤
1.配置form的增强JS:[（JS增强定义见online基础篇）](http://jeecg-boot.mydoc.io/?t=345055)
代码如下：
```
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(otherValues,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.测试：
## 注意事项
配置form表单JS增强 -主从表实现从表的关联change有如下几点需要注意（如1图例子）
1. 方法名规则是：`表名_onlChange`,每张表对应一个方法
2. 上述方法会返回一个对象，对象中的属性名和数据库的字段名保持一致，上述1定义表示：当school字段内容改变的时候会触发school方法
3. 每个字段方法内有两个内置参数`that`和`event`，`that`指向当前页面的vue实例对象,`event`对象包含属性如下表
4. 使用`getAction`发起请求
5. 使用`that.triggleChangeValues(values,id,target)`改变其他控件的值，values是一个对象可以配置多个控件的值
> event对象描述如下
| 属性名 | 描述 |
| --- | --- |
| type | 当前操作控件的类型 |
| row | 当前行的数据,通过row.id可以获取当前行的id值 |
| column | 当前列的配置信息,通过column.key 获取当前字段名称 |
| value | 当前控件的值 |
| target | 当前控件所在table的target对象,调用triggleChangeValues用到 |
';