# 在线增强JS和CSS > `version 1.3.79及以上版本` `date 20210820` > 功能说明:对查询区域的条件控件作一些JS事件控制【**JS增强**】、CSS样式修改【**CSS增强**】。 [TOC] ## CSS增强 ### 1.效果 >`查询按钮`的背景颜色改变 ![](https://img.kancloud.cn/2c/9a/2c9a926fea5b7e5db9dceabc0460e0e3_1466x126.png) ### 2.进入设计页面,在其他设置中点击增强配置 ![](https://img.kancloud.cn/4f/32/4f32ede3d8bd43abd15f511760cebaa0_286x629.png) ### 3.重点来了->为`查询按钮`设置样式 > 在css栏下编写样式代码,使`按钮背景颜色变成红色,边框也变成白色` ![](https://img.kancloud.cn/94/b6/94b6b1c4b287d47275a23bcda3b574d6_996x449.png) ``` .jm-query-form .ivu-btn-primary{ background-color: red; border-color: red; } ``` ### 4.注意事项 >[danger] 需要先找到按钮的原class即`.ivu-btn-primary`,然后加上表单顶层样式类`.jm-query-form`即可 >如下图演示,先F12打开调试工具找到`元素(ELements)`,再定位 ![](https://img.kancloud.cn/0f/81/0f814453c35adb5ce4370c7f560bc044_1910x709.gif) ## JS增强示例 ### 1、实现三级联动 本例通过JS增强实现三级联动效果,来讲解JS增强用法。 #### 1.1 效果展示 ![](https://img.kancloud.cn/ef/14/ef14085438ef8635bdf9870cf030a05a_1910x278.gif) #### 1.2 设计步骤 >进入数据集配置页面,控件类型设置为 `自定义下拉框`,编码为`pca` ![](https://img.kancloud.cn/f4/19/f419cc4e6f4ed05742320a3d6a669166_1838x652.png) >回到设计页面配置js增强 ![](https://img.kancloud.cn/52/3b/523b9a06d6a2965256d9ac09f43ac1f8_1462x638.png) 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`为女 ![](https://img.kancloud.cn/ce/32/ce325b978604b01572c68425045577cc_940x342.png) #### 2.2 设计步骤 >进入数据集配置页面,编码为`de`,并设置`sex`的查询默认值为`男` ![](https://img.kancloud.cn/2b/be/2bbe22fabc64f5212faa013a35734df8_1920x907.png) >进入预览页面,查看数据显示效果 ![](https://img.kancloud.cn/36/9e/369e087f823a4c26fbf2ef9286b7b7d3_927x313.png) >进入设计页面,配置js增强 ![](https://img.kancloud.cn/ec/b9/ecb99590e44733c888d810392dd1d842_1253x564.png) ``` // 增强代码 function init(){ this.updateSearchFormValue('de', 'sex', '女') } ``` 进入预览页面,再次查看数据显示效果 ![](https://img.kancloud.cn/8d/b8/8db85fdd6b0ba9bff5f147a10da3f205_927x351.png) #### 2.3 功能说明 - 调用方法: **updateSearchFormValue**,该方法三个参数,说明如下: | 参数 | 描述 | | --- | --- | | dbCode | 数据集编码,如上例中的test | | fieldName| 数据集字段名称,如上例中的id | | value| 查询初始值,如上例中的2| - 如果是数值的范围查询可以通过|拼接开始结束值 ![](https://img.kancloud.cn/53/8c/538c6b62042d7b0eab467f027dd4e9f7_1106x122.png) ``` function init(){ this.updateSearchFormValue('dbCode', 'fieldName', '1|5') } ``` - 如果是日期的范围查询,同上,只不过有个格式化需要配置,保证默认值的格式和配置的日期格式一致 ![](https://img.kancloud.cn/e2/01/e201c3c71771b93e9d4a8b96f3c22f2a_1153x158.png) ``` function init(){ this.updateSearchFormValue('dbCode', 'fieldName', '2021-08-01|2021-08-23') } ``` * 日期范围查询条件配置当前月第一天及最后一天 ![](https://img.kancloud.cn/8e/90/8e90f6bdd5784faf8b2abb00c13e3d04_1782x148.png) ``` 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`下拉框选中第一个`男` ![](https://img.kancloud.cn/3d/e3/3de3682997491bfbae82314e173eb6a2_968x367.png) #### 3.2 设计步骤 >版本支持`version 1.4.0` `date 20211020` >进入数据集配置页面,配置字段字典code、查询模式。【必须配置】 ![](https://img.kancloud.cn/df/08/df0895a7bc8c655a7f96685622e4b4be_1920x900.png) > 进入设计页面,配置js增强 ![](https://img.kancloud.cn/c1/40/c140cd4419b8c59c32e7dc31dd3ce0ba_1257x559.png) ``` 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|