# 在线增强JS和CSS > 功能说明：对查询区域的条件控件作一些JS事件控制【**JS增强**】、CSS样式修改【**CSS增强**】。 [TOC] ## CSS增强 ### 1.效果 > `查询按钮`的背景颜色改变  ### 2.进入设计页面,在其他设置中点击增强配置  ### 3.重点来了->为`查询按钮`设置样式 > 在css栏下编写样式代码，使`按钮背景颜色变成红色，边框也变成白色`  ~~~ .jm-query-form .ivu-btn-primary{ background-color: red; border-color: red; } ~~~ ### 4.注意事项 > 需要先找到按钮的原class即`.ivu-btn-primary`，然后加上表单顶层样式类`.jm-query-form`即可 > 如下图演示，先F12打开调试工具找到`元素（ELements）`，再定位  ## JS增强示例 ### 1、实现三级联动 本例通过JS增强实现三级联动效果，来讲解JS增强用法。 #### 1.1 效果展示  #### 1.2 设计步骤 > 进入数据集配置页面，控件类型设置为`自定义下拉框`,编码为`pca`  > 回到设计页面配置js增强  JS增强示例代码: 先定义一个init方法，在里面编写JS脚本。 ~~~ function init(){ // 加载第1个下拉框数据 $http.metaGet('http://localhost:8080/jeecg-boot/ces/ai/customSelect').then(res=>{ let options = res.data; this.updateSelectOptions('pca', 'pro', options) }) // 监听第1个下拉框改变事件 加载第2个下拉框数据 /* * pca为数据源的key,pro是数据源key为pca的字段 **/ this.onSearchFormChange('pca', 'pro', (value)=>{ let params = {params: {pid: value}} $http.metaGet('http://localhost:8080/jeecg-boot/ces/ai/customSelect', params ).then(res=>{ let options = res.data; this.updateSelectOptions('pca', 'city', options) }) }) // 监听第2个下拉框改变事件 加载第3个下拉框数据 this.onSearchFormChange('pca', 'city', (value)=>{ let params = {params: {pid: value}} $http.metaGet('http://localhost:8080/jeecg-boot/ces/ai/customSelect', params ).then(res=>{ let options = res.data; this.updateSelectOptions('pca', 'area', options) }) }) } ~~~ #### 1.3 功能说明 * 只能定义一个function，名称叫init * 发起请求使用`$http.metaGet`,请求参数格式如：`let params = {params: {pid: value}}` * 监听控件值改变，使用`this.onSearchFormChange`参数依次为： 数据集编码、字段名、回调事件，回调事件携带参数可获取到控件的值。*（这里只是说可以获取到控件的值，不一定是控件的值，也有可能是event对象）* * 修改下拉框的选项：`this.updateSelectOptions`参数依次为：数据集编码、字段名、下拉选项数据 ~~~ 下拉选项数据格式为： [{ value: '001', text: '北京市' },{ value: '002', text: '天津市' }] ~~~ * 接口最后返回的数据格式同上述下拉选项数据格式 * * * ### 2、实现修改查询表单初始值 #### 2.1 效果展示 > 通过`js`增强设置`sex`为女 >  #### 2.2 设计步骤 > 进入数据集配置页面，编码为`de`，并设置`sex`的查询默认值为`男`  > 进入预览页面，查看数据显示效果  > 进入设计页面，配置js增强  ~~~ // 增强代码 function init(){ this.updateSearchFormValue('de', 'sex', '女') } ~~~ 进入预览页面，再次查看数据显示效果  #### 2.3 功能说明 * 调用方法：**updateSearchFormValue**，该方法三个参数，说明如下： | 参数 | 描述 | | --- | --- | | dbCode | 数据集编码，如上例中的test | | fieldName | 数据集字段名称，如上例中的id | | value | 查询初始值，如上例中的2 | * 如果是数值的范围查询可以通过|拼接开始结束值  ~~~ function init(){ this.updateSearchFormValue('dbCode', 'fieldName', '1|5') } ~~~ * 如果是日期的范围查询，同上，只不过有个格式化需要配置，保证默认值的格式和配置的日期格式一致  ~~~ function init(){ this.updateSearchFormValue('dbCode', 'fieldName', '2021-08-01|2021-08-23') } ~~~ * * * ### 3、设置下拉单选默认值的第一项 #### 3.1 演示效果 > `sex`下拉框选中第一个`男`  #### 3.2 设计步骤 > 版本支持`version 1.4.0``date 20211020` > 进入数据集配置页面，配置字段字典code、查询模式。【必须配置】  > 进入设计页面，配置js增强 >  ~~~ function init(){ let ops = this.getSelectOptions('de', 'sex'); if(ops && ops.length>0){ this.updateSearchFormValue('de', 'sex', ops[0].value) } } ~~~ #### 3.3 功能说明 * 调用方法：**getSelectOptions**，该方法两个参数，说明如下： | 参数 | 描述 | | --- | --- | | dbCode | 数据集编码，如上例中的test | | fieldName | 数据集字段名称，如上例中的name | * 调用方法：**updateSearchFormValue**，该方法三个参数，说明如下： | 参数 | 描述 | | --- | --- | | dbCode | 数据集编码，如上例中的test | | fieldName | 数据集字段名称，如上例中的name | | value | 查询初始值，如上例中的ops\[0\].value |