跳到主要内容

JS增强和CSS增强

version 1.3.79及以上版本 date 20210820 功能说明：对查询区域的条件控件作一些JS事件控制【JS增强】、CSS样式修改【CSS增强】。

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)
    })
})
}

api代码示例

/**
 * 三级联动参考代码
 *
 * @param pid
 * @return
 */
@GetMapping("/customSelect")
public List<Map<String, String>> customSelect(@RequestParam(value = "pid", required = false) String pid) {

    Map<String, String> map = new HashMap<>();
    List<Map<String, String>> list = new ArrayList<>();
    if (StringUtils.isEmpty(pid)) {
        map.put("text", "北京市");
        map.put("value", "1001");
        list.add(map);
        //下面步骤相当于根据父级id获取数据
    } else if ("1001".equals(pid)) {
        map.put("text", "市辖区");
        map.put("value", "10011002");
        list.add(map);
    } else if ("10011002".equals(pid)) {
        map.put("text", "朝阳区");
        map.put("value", "10011002");
        list.add(map);
    }
    return list;
}

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

4、设置预览不自动加载数据​

4.1 演示效果​

进入预览界面后不自动加载报表，手动点击查询或重置才会加载

4.2 设计步骤​

版本支持version 1.6.7+ date 20231229 进入设计页面，配置js增强

function init(){
    this.notLoadDataWhenShow();
}

4.3 功能说明​

  • 调用方法： notLoadDataWhenShow，该方法无参。