请选择 进入手机版 | 继续访问电脑版
麦粉社区
>
帖子详情

怎么让日期组件不可编辑

数据分析 发表于 2024-11-28 16:36
发表于 2024-11-28 16:36:22

在宏管理里面怎么让日期主键不可编辑,比如我有个下拉框,选择某个值的时候让日期组件不可编辑

发表于 2024-11-28 17:21:22
这里有个《根据参数值动态隐藏另一个参数》
https://wiki.smartbi.com.cn/page ... mp;pageId=111892108
  •   cx
    我是在交互式仪表盘里面禁用日期组件,不是隐藏
    2024-11-28 17:32| 回复
  •   周伟斌
     回复 cx
    看一下我新的回复,用过css样式纯前端禁用
    7 天前| 回复

回复

使用道具 1 举报

发表于 2024-11-28 17:31:26
如果是回写不给编辑单元格的话,那写宏判断下:https://wiki.smartbi.com.cn/page ... amp;pageId=51943098
  •   cx
    是交互式仪表盘组件,宏里面那些禁用方法都不存在
    
    2024-11-28 17:53| 回复
  •   我爱上班
    那好像不行,要不然干脆隐藏得了,我看隐藏组件是有接口的
    https://wiki.smartbi.com.cn/api/xdashboardapi/interfaces/iportlet.html#hide
    2024-11-28 18:03| 回复

回复

使用道具 举报

发表于 7 天前

最好的实现方式就是沙发提供的,


因为不隐藏的话,那我在选择那个选项之前先改日期不就行了。


这个显示、隐藏是通过感官上“提醒”用户 这个选项不允许改日期,但这又触发另一个问题 就是我先选个能改日期的 再选不能改的不就行了


 


所以这种有下面几种方式规避


1.显示但不允许修改的方式。当选择某个选项之后,日期被重置为某个默认的值,且不允许修改。


2.隐藏但允许修改的方式。当选择某个选项之后,日期组件隐藏,同时回写规则中不回写 或回写某个默认的值。


总体上来说隐藏在这个平台中是能实现的

回复

使用道具 举报

发表于 7 天前

            //禁用整个下拉框

            portlet.appendCss('.FILTER_SELECT', {

                'pointer-events': 'none', /* 禁用鼠标事件 */

                'opacity': '0.5' /* 设置透明度为 0.5,使按钮看起来被禁用 */

            })

            //禁用下拉按钮

            portlet.appendCss('.el-input__suffix-inner', {

                'pointer-events': 'none',

            })


回复

使用道具 1 举报

本帖最后由 橘猫今天喝水了吗 于 2024-11-29 11:43 编辑

官方文档中没有直接禁用portlet组件的函数;


思路:


1.修改css, 让其不可用,官方文档中没找到css代码。楼上的朋友找到的下拉框的禁用,我试了试,对日期组件无效,代码如下:(如果想要禁用日期组件,需要对应的css代码,可以问一下官方)




function main(page: IPage, portlet: IFilterPortlet) {

    let otherportlet = page.getPortletsByTitle('筛选_1')[0];



portlet.setFilterValueChangeHandler(function (value: Array) {

    alert(value[0]);

    if (value[0]=='2017') {

                       //禁用整个下拉框



        otherportlet.appendCss('.el-input__suffix-inner', {



            'pointer-events': 'none',



        });



}

    return value;

 

})

}

注意:append css之后,还需要remove.

 

2.通过修改筛选器的选值范围来实现不可修改,以达到禁用的效果。


代码如下:


 



 


 





function main(page: IPage, portlet: IFilterPortlet) {



    let otherportlet = page.getPortletsByTitle('筛选_2')[0]; //获取另一个筛选器



    portlet.setFilterValueChangeHandler(function (value: Array) {

        //这个是修改日期时使用的函数

        debugger;

        let value_before_change  = portlet.getValue(); //获取当前已经选中的值

        let other_value = otherportlet.getValue()[0]; //获取另一个筛选器的值

        if (other_value == '2017') {  //满足条件时,设置选中值为之前已经选中的值。

            alert("当前不可修改日期")

            value[0] = value_before_change[0]

            //value[0] = '2017-01-01'  或者其他固定值

        };

        return value



    });



}



方法2效果图:


1.当下拉框不是2017时,日期组件可修改值,



 

2.当下拉框是2017是,可选但不可修改




回复

使用道具 举报

本帖最后由 橘猫今天喝水了吗 于 2024-11-29 16:19 编辑

这个宏是写在下拉框的,用来禁用日期;用这个就可以了,效果是当筛选_2 选中2017时,筛选_1(日期控件)变为不可点击。


(附件视频是效果:视频开始是演示刷新了两次,初始值为2017,则把日期控件禁用。)



 



function main(page: IPage, portlet: IFilterPortlet) {



    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>开始

    //这段代码,是渲染页面时,根据下拉框的值,禁用日期组件

    let otherportlet = page.getPortletsByTitle('筛选_1')[0]; 

    current_value = portlet.getValue();

    if (current_value[0] == '2017') {

            //禁用filter-wrapper

            otherportlet.appendCss('.filter-wrapper__row', {



                'pointer-events': 'none',

                'opacity': '0.5'



            });

            //禁用input__suffix

            otherportlet.appendCss('.el-input__suffix-inner', {

                'pointer-events': 'none',



            });



    };

   //<<<<<<<<<<<<<<<<<<<<<<<<<结束



    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>开始

    //这里是在选中下拉参数时,控制日期组件是否可用

    portlet.setFilterValueChangeHandler(function (value: Array) {

        if (value[0] == '2017') {//添加禁用日期组件的CSS代码

            //禁用filter-wrapper

            otherportlet.appendCss('.filter-wrapper__row', {



                'pointer-events': 'none',

                'opacity': '0.5'

            });

            //禁用input__suffix

            otherportlet.appendCss('.el-input__suffix-inner', {

                'pointer-events': 'none',

            });

        }

        else { //移除禁用日期组件的CSS代码

            otherportlet.removeCss('.filter-wrapper__row', {



                'pointer-events': 'none',

                'opacity': '0.5'



            });



            otherportlet.removeCss('.el-input__suffix-inner', {



                'pointer-events': 'none',



            });

        };

        return value;



    })

       //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<结束


回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

11回帖数 0关注人数 315浏览人数
最后回复于:7 天前
快速回复 返回顶部 返回列表