ABI常用报表样式脚本汇总

4128
3

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 改变分页栏页码颜色
    脚本说明:
    脚本写在客户端脚本中。分页栏分旧式分页条以及新式分页条,设置入口在这里
截图202103121115329032.png
    改变旧式分页条页码颜色脚本为:.eui-pagebar-container.eui-pagebar-iconmax是分页条里的字体颜色,span.eui-pagebar-main input.eui-form-input是输入框内字体颜色。
  1. EUI.addStyleSheet(".eui-pagebar-container.eui-pagebar-iconmax{color: red!important;");
复制代码
   改变新式分页条页码颜色脚本为:
  1. EUI.addStyleSheet("div.smallpage span{color: red!important;}");
复制代码
    最终效果:
    旧式分页条
截图202103121541279704.png
    新式分页条
截图202103121120353749.png


    2.2 改变文本组件行间距
    脚本说明:
    脚本写在客户端脚本中。文件组件在固定大小时数据换行默认行间距不能满足需求时可用以下脚本。HHH9为文本组件代号lineHeight为行间距高。
  1. document.getElementById("HHH9").getElementsByTagName("div")[0].style.lineHeight="5";
复制代码
    最终效果:
截图202103121144559051.png


    2.3 改变tab标签页样式
    脚本说明:
    脚本写在报表自定义样式中。tab标签页基础设置的风格中可以设置十几个风格不同的标签页,不满足默认的标签页或是想在默认的标签页的基础上修改自定义样式可以参考以下脚本。
  1. .xtabctrl .xtab-header-default {/*标签头背景样式*/
  2.     height: 77px;
  3.     border:0px;
  4.      background:#06a699;
  5. }

  6. .xtabctrl .xtab-header-default ul li {/*标签头字体的通常样式*/
  7.     font-size: 12px;
  8.     width:206px;
  9.     height:77px;
  10.     margin:0;
  11.     padding:0;
  12. }
  13. .xtabctrl .xtab-header-default .xtab-header-center {/*标签头标签页的通常样式*/
  14.     text-align: center;
  15.     line-height: 36px;
  16.     width:206px;
  17.     height:77px;
  18.     font-size: 24px;
  19.     color: #05F0FF;
  20.     margin: 0px;
  21.     background-color: transparent;
  22.     background-image: url(/abi/vfs/root/products/ebi/sys/picture/背景图.png);
  23.     background-repeat: no-repeat;
  24. }

  25. .xtabctrl .xtab-header-default .xtab-header-active .xtab-header-right {/* 标签页选中后的背景颜色*/
  26.     background : #0697A3;
  27. }
  28. .xtabctrl .xtab-header-default .xtab-header-active .xtab-header-center {
  29.     background:none;
  30.     margin: 0px ;
  31.     font-size: 24px;   
  32. }
  33. .xtabctrl .xtab-header .xtab-header-active .xtab-header-text {/*选中后标签头的样式*/
  34.     font-weight: normal;
  35.     color:#ffffff;
  36. }
  37. .xtabctrl .xtab-header .xtab-header-text {/* 标签头文字居中*/
  38.     top: 25%;
  39.     position: relative;
  40. }
  41. .xtabctrl .xtab-body-default{/* 标签体的样式 当标签头宽高修改后标签体可能遮住标签头导致不能点击 需要调整位置*/
  42. top:77px;
  43. }
复制代码
    最终效果:
tab标签页样式.gif


    2.4 改变报表中滚动条样式
    脚本说明:   
    脚本写在客户端脚本中。报表内滚动条是由以下几个这些元素组成:
  1. ::-webkit-scrollbar 滚动条整体部分
  2. ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
  3. ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
  4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
  5. ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  6. ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  7. ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
复制代码
可以通过改变不同的元素名进而对元素修改样式,一般-webkit-scrollbar以及-webkit-scrollbar-thumb会在报表中用的更多一些。
    脚本举例:改变报表页面的滚动条颜色:
  1. EUI.addStyleSheet("#BODYAREA::-webkit-scrollbar-thumb{background:red;}");
复制代码
这里的BODYAREA是指报表页面的意思,如果只需要改变某个组件比如容器滚动条可替换成容器代号,如果需要改变报表页面所有元素组件滚动条就直接去掉#BODYAREA。
    最终效果:
报表滚动条.gif

    2.5 改变参数组件输入框背景颜色
    脚本说明:
    脚本写在客户端脚本中。输入框组件在基础设置中可以设置背景颜色,但设置后会使整个组件的背景颜色都改变,当需求仅输入框背景颜色改变即可用这个脚本。
  1. EUI.addStyleSheet("input.eui-form-input{background-color:red!important;}");
复制代码
    最终效果:
截图202103121458574634.png

    2.6 改变参数组件按钮为圆角按钮
    脚本说明:
    脚本写在客户端脚本中。border-radius为弯曲的程度,当值足够大的时候可以使按钮变成椭圆或圆形,比如设置值为50%然后宽高相等则是圆形宽高不等则是椭圆。
  1. EUI.addStyleSheet(".eui-btn.eui-btn-menu{border-radius:50px!important;}");
复制代码
   最终效果:
截图202103121515328751.png
    2.7 改变参数组件按钮字体悬停颜色
    脚本说明:
     在设计按钮的样式时,只有选中自定义样式、自定义样式可以设置css样式比如color:red;改变字体颜色,并没有设置字体悬停颜色的入口,以下提供鼠标悬停事件脚本做这样的需求。
  1. var button=$("div[id^='WidgetParamButton14']");//WidgetParamButton14通过在结果页f12开发人员工具拾取按钮找到id值
  2. var span=$("div[id^='WidgetParamButton14'] span");
  3. //悬停颜色
  4. button.mouseenter(function(){
  5.   span.css("color","red");
  6. });
  7. //离开后颜色
  8. button.mouseleave(function(){
  9.   span.css("color","blue");
  10. });
复制代码

WidgetParamButton14是通过在结果页f12开发人员工具拾取按钮找到id值。
截图202103121534432388.png
    最终效果:
鼠标悬停按钮字体变色.gif


三、补充说明
    上述脚本都只针对颜色样式修改,实际场景中需求不只是修改颜色,使用脚本过程中可根据需求改变样式属性比如宽width、高height、背景图片background-image、字体大小font-size、字体样式font-style等,更多css样式语法介绍属性等可以看报表自定义样式底栏的语法帮助或百度。
    脚本中添加css样式都没有指定某个组件容器,效果一般作用于全报表页面,需要针对单独某个组件容器可在前面带上#组件代号,比如前面滚动条样式脚本需要只给容器HHH2修改样式可改成:
  1. EUI.addStyleSheet("#HHH2::-webkit-scrollbar-thumb{background:red;}");
复制代码









最近看过此主题的会员

vishaw

隔壁同学

POLARIS

伴生

QHD熊熊

esen_44BCDTY9TNT5

本主题由admin于2022-4-27 15:49加入精华

3个回答

只看楼主

leiz 小试身手Lv3

发表于2021-3-15 17:50

只看该作者

取消 关注该作者的回复

沙发

leiz 小试身手Lv3

发表于2021-8-5 16:03

只看该作者

取消 关注该作者的回复

板凳

火狐浏览器修改滚动条样式方法,在编辑区的报表自定义样式中写:
div{
scrollbar-color:red transparent;
    scrollbar-width:thin;
}

xxxl 数据领袖Lv6

发表于2021-8-25 17:26

只看该作者

取消 关注该作者的回复

地板

leiz 发表于 2021-8-5 16:03
火狐浏览器修改滚动条样式方法,在编辑区的报表自定义样式中写:
div{
scrollbar-color:red transparent;

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

进群交流、一对一指导

©2021ESENSOFT北京亿信华辰软件有限责任公司版权所有:京ICP备07017321号京公网安备11010802016281号