维下拉、枚举下拉等下拉参数组件选中参数值时自定义样式脚本

本帖最后由 玳玳我 于 2022-2-25 19:07 编辑

              在报表里经常会对一些组件样式有一些自定义设置，通常都需要借助脚本来实现，本篇分享一下关于 维下拉、枚举下拉等下拉参数组件选中参数值时自定义样式脚本。（注意：脚本需要写在报表属性里的客户端脚本里）
脚本如下：

$(document).ready(function(){

//枚举下拉框选中颜色
var elistColor = "#ff9900";

//枚举下拉框悬停颜色
var elistColorHover = "#ffff00";

//维下拉框选中颜色
var etreeColor = "#ff9900";

//维下拉框悬停颜色
var etreeColorHover = "#ffff00";

//日期下拉框选中颜色
var dateColor = "#ff9900";

//日期下拉框悬停颜色
var dateColorHover = "#ffff00";

//修改枚举下拉框选中颜色
EUI.addStyleSheet(".eui-elist-container .eui-elist-active td, .eui-elist-container .eui-elist-active:hover td, .eui-elist-container .eui-elist-checkbox-active td, .eui-elist-container .eui-elist-checkbox-active:hover td{background-color:" + elistColor + " !important}");

//修改枚举下拉框悬停颜色
EUI.addStyleSheet(".eui-elist-container .eui-elist-hover td {background-color:" + elistColorHover + "}");

//修改维下拉框选中颜色
EUI.addStyleSheet(".eui-tree-container .eui-tree-focus{background-color:" + etreeColor + "}");

//修改维下拉框悬停颜色
EUI.addStyleSheet(".eui-tree-container .eui-tree-item .eui-tree-node:not(.eui-tree-focus):hover {background-color: " + etreeColorHover + "}");

//修改日期下拉框选中颜色
EUI.addStyleSheet(".eui-calendar-container table .eui-calendar-checked, .eui-calendar-container table .eui-calendar-checked:hover, .eui-calendar-container .eui-calendar-list .eui-calendar-checked, .eui-calendar-container .eui-calendar-list .eui-calendar-checked:hover{background-color:" + dateColor + "}");

//修改日期下拉框悬停颜色
EUI.addStyleSheet(".eui-calendar-container table td:hover, .eui-calendar-container .eui-calendar-list > li:hover, .eui-calendar-container .eui-calendar-list-time > li ol li:hover {background-color:" + dateColorHover + "}");
});


实现效果：

截图202202251902165387.png (34.13 KB, 下载次数: )

下载附件

2022-2-25 19:02 上传

截图202202251902488224.png (37.11 KB, 下载次数: )

下载附件

2022-2-25 19:02 上传

截图202202251903341081.png (27.33 KB, 下载次数: )

下载附件

2022-2-25 19:03 上传