# 在线增强JS和CSS > `version 1.3.79及以上版本` `date 20210820` > 功能说明：对查询区域的条件控件作一些JS事件控制【**JS增强**】、CSS样式修改【**CSS增强**】。 [TOC] ## CSS增强 ### 1.效果 >`查询按钮`的背景颜色改变  ### 2.进入设计页面,在其他设置中点击增强配置  ### 3.重点来了->为`查询按钮`设置样式 > 在css栏下编写样式代码，使`按钮背景颜色变成红色，边框也变成白色`  ``` .jm-query-form .ivu-btn-primary{ background-color: red; border-color: red; } ``` ### 4.注意事项 >[danger] 需要先找到按钮的原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') } ``` * 日期范围查询条件配置当前月第一天及最后一天  ``` function init(){ var date=new Date(); //获取当月第一天 date.setDate(1); var month = parseInt(date.getMonth() + 1); var day = date.getDate(); if (month < 10) { month = '0' + month } if (day < 10) { day = '0' + day } var start = date.getFullYear() + '-' + month + '-' + day; //获取当月最后一天 var currentMonth=date.getMonth(); var nextMonth=++currentMonth; var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1); var oneDay=1000*60*60*24; var end = new Date(nextMonthFirstDay-oneDay) //赋值 this.updateSearchFormValue('dbCode', 'fieldName', start+'|'+end) } ``` ---- ### 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|