积木报表js增强（1.6.6）查询条件

精通Hello World点war

已于 2024-06-14 15:48:59 修改

阅读量1.2k

点赞数 29

文章标签： javascript 前端开发语言

于 2024-01-11 15:45:53 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_48817925/article/details/135530460

版权

引入积木报表（1.6.6），本项目是若依单体架构（多数据源），采用的是积木报表单独外库，使用租户实现多数据源区分。
在制作报表时，发现点击预览就会直接进行一次查询，于是就要设置默认值才能防止查询到过多的数据，从而导致进入预览报表的时间过长，但是在预览报表中，用户可以删除输入框的内容然后点击查询，就会导致一样的结果，查看积木报表官方有无专门对于查询条件这边的限制，比如设置条件为必填等情况，网上找了一圈还是没有类似的操作，只能自己去揣摩了，发现了积木报表的js增强可以使用，于是照猫画虎，通过输入框的值去实现

目录

js增强功能说明

1.绑定输入框和查询按钮，重置按钮

2.监听输入框的值

3.根据值去判断，如果值为空我们可以将查询按钮状态赋值为disabled，使其变为不可操作（也就是说实现输入的必填效果）

4.输入框中还有点击x一键删除的操作，所以要加上&& value.data !== undefined

5.同时在重置的时候我们也需要将查询按钮的状态恢复为正常

最后附上代码，希望对你有帮助

多条件代码版本（代码有点简陋请注意斟酌）

js增强功能说明

只能定义一个function，名称叫init
发起请求使用 $http.metaGet,请求参数格式如：let params = {params: {pid: value}}
监听控件值改变，使用this.onSearchFormChange 参数依次为：数据集编码、字段名、回调事件，回调事件携带参数可获取到控件的值。（这里只是说可以获取到控件的值，不一定是控件的值，也有可能是event对象）
修改下拉框的选项：this.updateSelectOptions参数依次为：数据集编码、字段名、下拉选项数据

其实也有试过验证表单的方式的，但是function init()第一次进来时dom还没加载完的，form是不存在的所以不可行，也试过直接给输入框加入必填元素，还是不行
进入正题，在积木报表的文档中onSearchFormChange的参数是监听控件值改变的，我们可以利用这里去实现后面的代码注入，onSearchFormChange中有三个参数，第一个是数据集编码就是在创建SQL数据源时候的数据集编码，第二个参数就是查询参数的名称，第三个就是回调事件

1.绑定输入框和查询按钮，重置按钮

var name= document.querySelector('.ivu-input-default');
var queryButton = document.querySelector('.ivu-btn-primary');
var resetButton = document.querySelector('.ivu-btn-default');

2.监听输入框的值

var inputValue = name.value.trim();

3.根据值去判断，如果值为空我们可以将查询按钮状态赋值为disabled，使其变为不可操作（也就是说实现输入的必填效果）

        // 根据输入框的值设置查询按钮的可点击状态
        if (inputValue) {
            queryButton.removeAttribute('disabled');
        } else {
            queryButton.setAttribute('disabled', 'disabled');
        }

4.输入框中还有点击x一键删除的操作，所以要加上&& value.data !== undefined

        // 根据输入框的值设置查询按钮的可点击状态
        if (inputValue && value.data !== undefined) {
            queryButton.removeAttribute('disabled');
        } else {
            queryButton.setAttribute('disabled', 'disabled');
        }

5.同时在重置的时候我们也需要将查询按钮的状态恢复为正常

    // 绑定重置按钮点击事件
    resetButton.addEventListener('click', function () {
        // 在重置按钮点击时去除查询按钮的 disabled 属性
        queryButton.removeAttribute('disabled');
    });

最后附上代码，希望对你有帮助

function init(){
this.queryPanel = '1';
 this.onSearchFormChange('demo2', 'name', (value)=>{
var name= document.querySelector('.ivu-input-default');
var queryButton = document.querySelector('.ivu-btn-primary');
var resetButton = document.querySelector('.ivu-btn-default');
   // 获取输入框的值并去除首尾空格
   var inputValue = name.value.trim();
        // 根据输入框的值设置查询按钮的可点击状态
        if (inputValue && value.data !== undefined) {
            queryButton.removeAttribute('disabled');
        } else {
            queryButton.setAttribute('disabled', 'disabled');
        }
    // 绑定重置按钮点击事件
    resetButton.addEventListener('click', function () {
        // 在重置按钮点击时去除查询按钮的 disabled 属性
        queryButton.removeAttribute('disabled');
    });
            })
    }

多条件代码版本（代码有点简陋请注意斟酌）

    function init(){
        this.queryPanel = '1';
        this.onSearchFormChange('demo1', 'name', (value)=>{
// 获取客户输入框
            var customerInput = document.querySelector('.ivu-form-item-content input[placeholder="请输入客户"]');
// 获取单元房号输入框
            var unitNumberInput = document.querySelector('.ivu-form-item-content input[placeholder="请输入单元房号"]');
// 获取物业地址输入框
            var propertyAddressInput = document.querySelector('.ivu-form-item-content input[placeholder="请输入物业地址"]');
            var queryButton = document.querySelector('.ivu-btn-primary');
            var resetButton = document.querySelector('.ivu-btn-default');
            var customerValue = customerInput.value.trim();
            var unitNumberValue = unitNumberInput.value.trim();
            var propertyAddressValue = propertyAddressInput.value.trim();
            // 判断三个输入框是否都为空
            console.log(value.data);
            console.log(customerValue);
            console.log(unitNumberValue);
            console.log(propertyAddressValue);
            if (!customerValue && !unitNumberValue && !propertyAddressValue||(value.data == undefined&&unitNumberValue==""&& propertyAddressValue==""&&value.data !== null)) {
                queryButton.setAttribute('disabled', 'disabled');
            } else {
                queryButton.removeAttribute('disabled');
            }
            // 绑定重置按钮点击事件
            resetButton.addEventListener('click', function () {
                // 在重置按钮点击时去除查询按钮的 disabled 属性
                queryButton.removeAttribute('disabled');
            });
        })
        this.onSearchFormChange('demo1', 'room', (value)=>{
// 获取客户输入框
            var customerInput = document.querySelector('.ivu-form-item-content input[placeholder="请输入客户"]');
// 获取单元房号输入框
            var unitNumberInput = document.querySelector('.ivu-form-item-content input[placeholder="请输入单元房号"]');
// 获取物业地址输入框
            var propertyAddressInput = document.querySelector('.ivu-form-item-content input[placeholder="请输入物业地址"]');
            var queryButton = document.querySelector('.ivu-btn-primary');
            var customerValue = customerInput.value.trim();
            var unitNumberValue = unitNumberInput.value.trim();
            var propertyAddressValue = propertyAddressInput.value.trim();
            // 判断三个输入框是否都为空
            console.log(value.data);
            console.log(customerValue);
            console.log(unitNumberValue);
            console.log(propertyAddressValue);
            if (!customerValue && !unitNumberValue && !propertyAddressValue||(value.data == undefined&&customerValue==""&& propertyAddressValue==""&&value.data !== null)) {
                queryButton.setAttribute('disabled', 'disabled');
            } else {
                queryButton.removeAttribute('disabled');
            }
        })
        this.onSearchFormChange('demo1', 'address', (value)=>{
// 获取客户输入框
            var customerInput = document.querySelector('.ivu-form-item-content input[placeholder="请输入客户"]');
// 获取单元房号输入框
            var unitNumberInput = document.querySelector('.ivu-form-item-content input[placeholder="请输入单元房号"]');
// 获取物业地址输入框
            var propertyAddressInput = document.querySelector('.ivu-form-item-content input[placeholder="请输入物业地址"]');
            var queryButton = document.querySelector('.ivu-btn-primary');
            var customerValue = customerInput.value.trim();
            var unitNumberValue = unitNumberInput.value.trim();
            var propertyAddressValue = propertyAddressInput.value.trim();
            // 判断三个输入框是否都为空
            console.log(value.data);
            console.log(customerValue);
            console.log(unitNumberValue);
            console.log(propertyAddressValue);
            if (!customerValue && !unitNumberValue && !propertyAddressValue||(value.data == undefined&&unitNumberValue==""&& customerValue==""&&value.data !== null)) {
                queryButton.setAttribute('disabled', 'disabled');
            } else {
                queryButton.removeAttribute('disabled');
            }
        })
    }

最后希望积木报表官方可以增加对查询栏的搜索条件的配置（比如必填之类的）

精通Hello World点war

关注

29
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
积木报表js增强（1.6.6）查询条件

积木报表查询条件js增强限制
复制链接

扫一扫

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。