# Online之JS增强-关联修改控件值【从表】 >[info] 功能说明:在online主从表单中,当从表某控件值改变的时候关联改变从表的其他控件的值。 [TOC] ## 示例说明 **【以下说明仅限于从表】** 当改变字段 `学校(school)` 的时候,对应联动改变字段 `描述(note)`。 * 子表表名:`a_sub_kua` * 子表数据字段如下(省略部分字段) 字段名 | 描述 | ---|---| school | 学校 | note | 备注 | ## 配置步骤 1.配置form的增强JS:[(JS增强定义见online基础篇)](http://jeecg-boot.mydoc.io/?t=345055) ![](https://img.kancloud.cn/89/f0/89f02f638f4408f7faad00cf0780092d_905x598.png) 代码如下: ``` 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.编写后台代码接收请求 ![](https://img.kancloud.cn/0d/56/0d566490044c06f26b9bcf97b2b408d1_848x422.png) 代码如下: ``` @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.测试: ![](https://img.kancloud.cn/61/3e/613ead5cb657cd4cbfb2212feefdccdc_1642x810.png) ## 注意事项 配置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用到 |