jimureport积木报表-JS增强&CSS增强

目录

一、简述

二、CSS增强

1、查询栏CSS增强

2、工具栏CSS增强

三、JS增强

1、实现三级联动

2、实现修改查询表单初始值

---

一、简述

        主要介绍了如何通过JavaScript和CSS来增强和美化积木报表中的表格。文章详细讲解了表格的自定义样式、交互效果以及数据展示的优化方法。通过具体的代码示例，用户可以学习如何添加复杂的样式、实现动态效果、以及如何通过CSS和JS提升报表的可读性和美观度。

---

二、CSS增强

目前最新的积木报表对于报表的增强区域，只有查询栏和工具栏这两个区域

1、查询栏CSS增强

F12打开开发者工具，找到需要增强的查询栏控件，然后加上表单顶层样式类.jm-query-form即可：

打开右下角其他配置中，点击增强配置：

CSS片段代码：

  .jm-query-form .ivu-btn-primary{
    background-color: red;
    border-color: red;
   }

将CSS片段代码写入CSS增强配置框中 ：

 效果如下：

2、工具栏CSS增强

类似查询栏CSS操作流程，也是要找到工具栏对应的class名称或者id名称

#PDF{
display:none
}
#PDF图像{
display:none
}
#图片{
display:none
}
.ty-slider-container{
display:none
}
.j-report-table {
  width: 100%;
  /* 其他需要的样式 */
}

 将CSS代码片段写入CSS增强配置中：

效果如下：

---

三、JS增强

JS增强主要还是针对查询栏进行增强

1、实现三级联动

进入数据集配置页面，控件类型设置为自定义下拉框，编码为pca

回到设计页面配置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)
    })
})
}

效果如下： 

2、实现修改查询表单初始值

 进入数据集配置页面，编码为de，并设置sex的查询默认值为男

 进入预览页面，查看数据显示效果

进入设计页面，配置js增强

// 增强代码 
//dbCode-数据集编码，如上例中的test
//fieldName-数据集字段名称，如上例中的id
//value-查询初始值，如上例中的2
function init(){
    this.updateSearchFormValue('de', 'sex', '女')
}

进入预览页面，再次查看数据显示效果

---