# 在線增強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|