ABI常用表元样式脚本汇总

7513
6

xxxl 数据领袖Lv6

发表于2021-3-11 16:00

楼主
本帖最后由 xxxl 于 2021-3-15 18:06 编辑

一、表元样式脚本使用说明          
    在做报表开发的过程中遇到需要给报表做自定义样式的需求比如点击单元格背景颜色变色、点击单元格字体变色、改变表格边框为圆形等,但是设置属性中没有提供这样需求的功能设置入口,这时候就需要用到脚本来实现这样的需求了。
    脚本设置的入口,以下的脚本示例中的脚本填写的位置在编辑区>高级>脚本>客户端脚本中设置。
截图202103101557468462.png
    也有部分写在编辑区>基础属性>报表自定义样式或自定义样式,其他情况会在示例中特殊说明。
截图202103101603528076.png        
    报表中其他组件样式脚本比如文本组件样式、tab标签页样式、报表分页条样式、报表内滚动条样式、参数组件样式可看帖子《ABI常用报表样式脚本汇总》https://bbs.esensoft.com/thread-138911-1-1.html

二、表元样式脚本
    2.1 改变表格中钻取表元悬停时显示的颜色
    脚本说明:
    脚本写在客户端脚本中。GRID1为表格代号,颜色可直接写颜色名或十六进制颜色信息等。
  1. EUI.addStyleSheet("#GRID1 a:hover {color: red !important;}");
复制代码
   最终效果:
钻取悬停字体.gif

2.2 改变表格中单击时表元的字体颜色或背景颜色
    脚本说明:
    脚本写在客户端脚本中。textColor是字体颜色,grid.selectedBgcolor是背景颜色。
  1. //点击表元字体变色
  2. var textColor = 'blue';
  3. var $gridtext = $('#GRID1 span')
  4. $gridtext.on('click', function(){
  5. $gridtext.css('color', '#000000');
  6. $(this).css('color', textColor);
  7. });
  8. //点击表元背景颜色变色
  9. var grid = g_rptpage.getGridById("GRID1");
  10. grid.selectedBgcolor ="#356298";
复制代码
  最终效果:
点击变色.gif

    2.3  改变表格为隔行变色且颜色有透明度
   脚本说明:
    脚本写在报表自定义样式中。实际上在高级属性中设置行背景色表达式:["#FFCC00","#FF0000"][mod(row(),2)]但是这种方式无法指定行背景色的透明度,以至于在有图片背景时,显示效果还是差强人意,因此提供以下脚本。

  1. #GRID1 table tr:nth-child(odd){background:rgba(16,79,173,0.5);}
  2. #GRID1 table tr:nth-child(even){background:rgba(21, 0, 255,0);}
复制代码
   最终效果:
截图202103101710424571.png

    2.4 改变表格背景颜色为渐变色
    脚本说明:
    脚本写在客户端脚本中。
getCellDom("A1")为指定A1单元格变色,这里可以换成_getColObj()或_getRowObj()。比如_getColObj("0")即指定第一列变色(列数从0开始排序),_getRowObj("0")即指定第一行变色(行数从0开始排序)。 linear-gradient是设置渐变颜色的属性可以看看别人总结的使用方法https://www.runoob.com/cssref/func-linear-gradient.html
  1. g_rptpage.getGridById("GRID1").getCellDom("A1").style.setProperty('background-image','linear-gradient(to right, red , yellow)');
复制代码
   最终效果:
截图202103101726492867.png

    2.5  改变表格边框为圆角
    脚本说明:
    脚本写在客户端脚本中。du变量值越大边框角越圆。
  1. var id="GRID1";//表格代号
  2. var du="10px";//边框弯曲程度调节
  3. var h=document.getElementsByName(id)[0].getElementsByTagName("tbody")[0].childElementCount;
  4. var l=document.getElementsByName(id)[0].getElementsByTagName("tbody")[0].firstElementChild.childElementCount;
  5. document.getElementById(id+".A1").style.borderTopLeftRadius=du;
  6. document.getElementById(id+".A"+h).style.borderBottomLeftRadius=du;
  7. var z=id+"."+String.fromCharCode(l+64);
  8. document.getElementById(z+1).style.borderTopRightRadius=du;
  9. document.getElementById(z+h).style.borderBottomRightRadius=du;
复制代码
   最终效果:
截图202103101743523789.png

    2.6  改变行列锁定线样式
    脚本说明:
    脚本写在客户端脚本中。现版本中,仅有abi524针对行列锁定线有颜色设置的入口,如果想设置锁定线其他样式或是其他版本想要改变样式可通过脚本达到效果。
  1. var grid1 = g_rptpage.getGridById("GRID1");
  2. if(grid1.lineH){
  3.   grid1.lineH.style.cssText +="border-top:5px solid red";//横向行列锁定线样式
  4. }
  5. if(grid1.lineV){
  6.   grid1.lineV.style.cssText +="border-left:5px solid red";//纵向行列锁定线样式
  7. }
复制代码
   也可用
  1. EUI.addStyleSheet('#GRID1 > div {border-top:5px solid red !important}')//横向行列锁定线样式
  2. EUI.addStyleSheet('#GRID1 > div {border-left:5px solid red !important}')//纵向行列锁定线样式
复制代码
   最终效果:
截图202103111520423808.png


    2.7  改变回填表修改或输入时的表元背景颜色
    脚本说明:
    脚本写在报表自定义样式中。selector-block是鼠标点到表元上背景颜色,backfill-input是修改输入的表元背景颜色。
  1. //改变回填表修改或输入时的表元背景颜色
  2. .selector-block{
  3. background:#A0A0A0!important;
  4. }
  5. .backfill-input{
  6. background:#A0A0A0!important;
  7. }
复制代码


    最终效果:
回填表点击变色.gif

    2.8 改变回填表下拉框背景颜色
    脚本说明:
    脚本写在报表自定义样式中。
  1. .eui-anim-upbit{
  2. background:rgba(192,192,192)!important;
  3. }
  4. .eui-align-left{
  5. background:rgba(192,192,192)!important;
  6. }
复制代码
   最终效果:
截图202103101808294804.png

    2.9  隐藏回填表选中表元边框   
    脚本说明:
    脚本写在客户端脚本中。
  1. $('.selector-block').css('display', 'none');
复制代码
   最终效果:
回填表选中表元边框.gif

    2.10  改变回填表选中表元背景
    脚本说明:
    脚本写在报表自定义样式中。因为回填表比较特殊采用的是图片背景,所以需要改变图片来达到效果。
  1. .selector-activecell {
  2.         background: url("../eform/grid/images/gridselector.png");
  3.         overflow: hidden;
  4.         z-index: 1;
  5. }
复制代码
   图片存放的路径在解压的war包下WEB-INF\lib\eform-1.2.2-SNAPSHOT.jar\META-INF\resources\eform\grid\images里在脚本中指定这个路径的图片即可,war包中自带两个图片gridselector.png和gridactive.png,回填默认时用gridactive.png显示,我们将背景图片替换成gridselector.png,也可以自己上传图片更换图片名称路径就行。
截图202103111442247385.png
    最终效果:
回填表选中表元背景.gif

    2.11 改变回填表行列锁定线样式
    脚本说明:
    脚本写在客户端脚本中。
  1. function sdhlTable(grid){
  2.   var freezeConfig1 = g_formmgr.getReport(grid).gridbase._property.freezeconfig;
  3. if(freezeConfig1.lineH){
  4.   freezeConfig1.lineH.style.cssText +="border-top:5px solid red";//这是横向锁定线样式 px为大小粗细 red为颜色 当大小值为0px或者颜色为transparent时行列线不显示
  5. }
  6. if(freezeConfig1.lineV){
  7.   freezeConfig1.lineV.style.cssText +="border-left:5px solid red";//这是纵向锁定线样式
  8. }
  9. }
  10. sdhlTable("GRID1");//需要锁定的表格代号
  11. sdhlTable("GRID6");//需要锁定的表格代号
复制代码
   最终效果:
截图202103111501224978.png











最近看过此主题的会员

shqx

wuq

zxh1

chestnut

xyr

前进者

6个回答

只看楼主

leiz 小试身手Lv3

发表于2021-3-15 17:49

只看该作者

取消 关注该作者的回复

沙发

linuo 初学数据Lv2

发表于2021-11-16 14:42

只看该作者

取消 关注该作者的回复

板凳

    2.10  改变回填表选中表元背景
这个脚本没有确定的目标也可以使用吗?

xxxl 数据领袖Lv6

发表于2021-11-29 16:40

只看该作者

取消 关注该作者的回复

地板

linuo 发表于 2021-11-16 14:42
2.10  改变回填表选中表元背景
这个脚本没有确定的目标也可以使用吗?

嗯 这是直接改了整个服务器的样式

v笑向前走 小试身手Lv3

发表于2022-7-4 15:55

只看该作者

取消 关注该作者的回复

5#

修改日期组件,选中后的问题文本值的颜色:$('.eui-input').css('color', '#22FF00');

玳玳我 小试身手Lv3

发表于2022-8-3 11:18

只看该作者

取消 关注该作者的回复

6#

修改文本框背景颜色渐变:
document.getElementById("HHH2").style.setProperty('background-image','linear-gradient(to right, red , yellow)');

feng6884350 小试身手Lv3

发表于2023-5-26 09:25

只看该作者

取消 关注该作者的回复

7#

添加到脚本中,并没有生效~~~不知道哪里出了问题

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

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

小时

全天响应

分钟

快速处理问题

工程师强势助力

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

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

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

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

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