-
-
xxxl 数据领袖Lv6
发表于2021-3-12 16:37
楼主
本帖最后由 xxxl 于 2021-4-29 15:39 编辑
一、报表样式脚本使用说明
在《ABI常用表元样式脚本汇总》https://bbs.esensoft.com/thread-138886-1-1.html一贴中我们已经列举表元相关的样式脚本汇总。这里我们接着列举报表其他组件元素常用样式的汇总包括文本组件样式、tab标签页样式、报表分页条样式、报表内滚动条样式、参数组件样式等。
脚本设置入口已在上一篇帖子《ABI常用表元样式脚本汇总》中有详细说明操作路径了，本贴中如有其他情况会特殊说明。
二、报表样式脚本
2.1 改变分页栏页码颜色
脚本说明：
脚本写在客户端脚本中。分页栏分旧式分页条以及新式分页条，设置入口在这里
改变旧式分页条页码颜色脚本为：.eui-pagebar-container.eui-pagebar-iconmax是分页条里的字体颜色，span.eui-pagebar-main input.eui-form-input是输入框内字体颜色。
复制代码 改变新式分页条页码颜色脚本为：
复制代码 最终效果：
旧式分页条
新式分页条
2.2 改变文本组件行间距
脚本说明：
脚本写在客户端脚本中。文件组件在固定大小时数据换行默认行间距不能满足需求时可用以下脚本。HHH9为文本组件代号，lineHeight为行间距高。
复制代码 最终效果：
2.3 改变tab标签页样式
脚本说明：
脚本写在报表自定义样式中。tab标签页基础设置的风格中可以设置十几个风格不同的标签页，不满足默认的标签页或是想在默认的标签页的基础上修改自定义样式可以参考以下脚本。复制代码 最终效果：
2.4 改变报表中滚动条样式
脚本说明：
脚本写在客户端脚本中。报表内滚动条是由以下几个这些元素组成：
复制代码可以通过改变不同的元素名进而对元素修改样式，一般-webkit-scrollbar以及-webkit-scrollbar-thumb会在报表中用的更多一些。
脚本举例：改变报表页面的滚动条颜色：
复制代码这里的BODYAREA是指报表页面的意思，如果只需要改变某个组件比如容器滚动条可替换成容器代号，如果需要改变报表页面所有元素组件滚动条就直接去掉#BODYAREA。
最终效果：
2.5 改变参数组件输入框背景颜色
脚本说明：
脚本写在客户端脚本中。输入框组件在基础设置中可以设置背景颜色，但设置后会使整个组件的背景颜色都改变，当需求仅输入框背景颜色改变即可用这个脚本。
复制代码 最终效果：
2.6 改变参数组件按钮为圆角按钮
脚本说明：
脚本写在客户端脚本中。border-radius为弯曲的程度，当值足够大的时候可以使按钮变成椭圆或圆形，比如设置值为50%然后宽高相等则是圆形宽高不等则是椭圆。
复制代码 最终效果：
2.7 改变参数组件按钮字体悬停颜色
脚本说明：
在设计按钮的样式时，只有选中自定义样式、自定义样式可以设置css样式比如color:red;改变字体颜色，并没有设置字体悬停颜色的入口，以下提供鼠标悬停事件脚本做这样的需求。复制代码
WidgetParamButton14是通过在结果页f12开发人员工具拾取按钮找到id值。
最终效果：
三、补充说明
上述脚本都只针对颜色样式修改，实际场景中需求不只是修改颜色，使用脚本过程中可根据需求改变样式属性比如宽width、高height、背景图片background-image、字体大小font-size、字体样式font-style等，更多css样式语法介绍属性等可以看报表自定义样式底栏的语法帮助或百度。
脚本中添加css样式都没有指定某个组件容器，效果一般作用于全报表页面，需要针对单独某个组件容器可在前面带上#组件代号，比如前面滚动条样式脚本需要只给容器HHH2修改样式可改成：
复制代码
一、报表样式脚本使用说明
在《ABI常用表元样式脚本汇总》https://bbs.esensoft.com/thread-138886-1-1.html一贴中我们已经列举表元相关的样式脚本汇总。这里我们接着列举报表其他组件元素常用样式的汇总包括文本组件样式、tab标签页样式、报表分页条样式、报表内滚动条样式、参数组件样式等。
脚本设置入口已在上一篇帖子《ABI常用表元样式脚本汇总》中有详细说明操作路径了，本贴中如有其他情况会特殊说明。
二、报表样式脚本
2.1 改变分页栏页码颜色
脚本说明：
脚本写在客户端脚本中。分页栏分旧式分页条以及新式分页条，设置入口在这里
改变旧式分页条页码颜色脚本为：.eui-pagebar-container.eui-pagebar-iconmax是分页条里的字体颜色，span.eui-pagebar-main input.eui-form-input是输入框内字体颜色。
- EUI.addStyleSheet(".eui-pagebar-container.eui-pagebar-iconmax{color: red!important;");
- EUI.addStyleSheet("div.smallpage span{color: red!important;}");
旧式分页条
新式分页条
2.2 改变文本组件行间距
脚本说明：
脚本写在客户端脚本中。文件组件在固定大小时数据换行默认行间距不能满足需求时可用以下脚本。HHH9为文本组件代号，lineHeight为行间距高。
- document.getElementById("HHH9").getElementsByTagName("div")[0].style.lineHeight="5";
2.3 改变tab标签页样式
脚本说明：
脚本写在报表自定义样式中。tab标签页基础设置的风格中可以设置十几个风格不同的标签页，不满足默认的标签页或是想在默认的标签页的基础上修改自定义样式可以参考以下脚本。
- .xtabctrl .xtab-header-default {/*标签头背景样式*/
- height: 77px;
- border:0px;
- background:#06a699;
- }
- .xtabctrl .xtab-header-default ul li {/*标签头字体的通常样式*/
- font-size: 12px;
- width:206px;
- height:77px;
- margin:0;
- padding:0;
- }
- .xtabctrl .xtab-header-default .xtab-header-center {/*标签头标签页的通常样式*/
- text-align: center;
- line-height: 36px;
- width:206px;
- height:77px;
- font-size: 24px;
- color: #05F0FF;
- margin: 0px;
- background-color: transparent;
- background-image: url(/abi/vfs/root/products/ebi/sys/picture/背景图.png);
- background-repeat: no-repeat;
- }
-
- .xtabctrl .xtab-header-default .xtab-header-active .xtab-header-right {/* 标签页选中后的背景颜色*/
- background : #0697A3;
- }
- .xtabctrl .xtab-header-default .xtab-header-active .xtab-header-center {
- background:none;
- margin: 0px ;
- font-size: 24px;
- }
- .xtabctrl .xtab-header .xtab-header-active .xtab-header-text {/*选中后标签头的样式*/
- font-weight: normal;
- color:#ffffff;
- }
- .xtabctrl .xtab-header .xtab-header-text {/* 标签头文字居中*/
- top: 25%;
- position: relative;
- }
- .xtabctrl .xtab-body-default{/* 标签体的样式 当标签头宽高修改后标签体可能遮住标签头导致不能点击 需要调整位置*/
- top:77px;
- }
2.4 改变报表中滚动条样式
脚本说明：
脚本写在客户端脚本中。报表内滚动条是由以下几个这些元素组成：
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
- ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
- ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
- ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
- ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
脚本举例：改变报表页面的滚动条颜色：
- EUI.addStyleSheet("#BODYAREA::-webkit-scrollbar-thumb{background:red;}");
最终效果：
2.5 改变参数组件输入框背景颜色
脚本说明：
脚本写在客户端脚本中。输入框组件在基础设置中可以设置背景颜色，但设置后会使整个组件的背景颜色都改变，当需求仅输入框背景颜色改变即可用这个脚本。
- EUI.addStyleSheet("input.eui-form-input{background-color:red!important;}");
2.6 改变参数组件按钮为圆角按钮
脚本说明：
脚本写在客户端脚本中。border-radius为弯曲的程度，当值足够大的时候可以使按钮变成椭圆或圆形，比如设置值为50%然后宽高相等则是圆形宽高不等则是椭圆。
- EUI.addStyleSheet(".eui-btn.eui-btn-menu{border-radius:50px!important;}");
2.7 改变参数组件按钮字体悬停颜色
脚本说明：
在设计按钮的样式时，只有选中自定义样式、自定义样式可以设置css样式比如color:red;改变字体颜色，并没有设置字体悬停颜色的入口，以下提供鼠标悬停事件脚本做这样的需求。
- var button=$("div[id^='WidgetParamButton14']");//WidgetParamButton14通过在结果页f12开发人员工具拾取按钮找到id值
- var span=$("div[id^='WidgetParamButton14'] span");
- //悬停颜色
- button.mouseenter(function(){
- span.css("color","red");
- });
- //离开后颜色
- button.mouseleave(function(){
- span.css("color","blue");
- });
WidgetParamButton14是通过在结果页f12开发人员工具拾取按钮找到id值。
最终效果：
三、补充说明
上述脚本都只针对颜色样式修改，实际场景中需求不只是修改颜色，使用脚本过程中可根据需求改变样式属性比如宽width、高height、背景图片background-image、字体大小font-size、字体样式font-style等，更多css样式语法介绍属性等可以看报表自定义样式底栏的语法帮助或百度。
脚本中添加css样式都没有指定某个组件容器，效果一般作用于全报表页面，需要针对单独某个组件容器可在前面带上#组件代号，比如前面滚动条样式脚本需要只给容器HHH2修改样式可改成：
- EUI.addStyleSheet("#HHH2::-webkit-scrollbar-thumb{background:red;}");
最近看过此主题的会员
5个回答
火狐浏览器修改滚动条样式方法，在编辑区的报表自定义样式中写：
div{
scrollbar-color:red transparent;
scrollbar-width:thin;
}
移动端文本组件行间距写法：if(typeof AppUtil != 'undefined') {g_rptpage.getWidgetByName("HHH10").contentdom.style.lineHeight = '2'} HHH10换文本组件
