精选推荐
ABI常用表元样式脚本汇总

一、脚本使用说明 在做报表开发的过程中遇到需要给报表做自定义样式的需求比如点击单元格背景颜色变色、点击单元格字体变色、改变表格边框为圆形等,但是设置属性中没有提供这样需求的功能设置入口,这时候就需要用到脚本来实现这样的需求了。 脚本设置的入口,以下的脚本示例中的脚本需要填写的位置大部分都在编辑区》高级》脚本》客户端脚本中设置, 也有部分会直接写在编辑区》基础属性》报表自定义样式或自定义样式写,其他情况会在示例中特殊说明。 二、常用脚本示例 2.1 表元样式脚本 2.1.1 改变表格中钻取表元悬停时显示的颜色 脚本: 脚本写在客户端脚本中。GRID1为表格代号,颜色可直接写颜色名或十六进制颜色信息等。 EUI.addStyleSheet( #GRID1 a:hover {color: red !important;} );复制代码最终效果: 2.1.2 改变表格中单击时表元的字体颜色或背景颜色 脚本: 脚本写在客户端脚本中。textColor是字体颜色,grid.selectedBgcolor是背景颜色。 //点击表元字体变色 var textColor = 'blue'; var $gridtext = $('#GRID1 span') $gridtext.on('click', function(){ $gridtext.css('color', '#000000'); $(this).css('color', textColor); }); //点击表元背景颜色变色 var grid = g_rptpage.getGridById( GRID1 ); grid.selectedBgcolor = #356298 ;复制代码最终效果: 2.1.3 改变表格为隔行变色且颜色有透明度 脚本: 脚本写在报表自定义样式中。实际上在高级属性中设置行背景色表达式:[ #FFCC00 , #FF0000 ][mod(row(),2)]但是这种方式无法指定行背景色的透明度,以至于在有图片背景时,显示效果还是差强人意,因此提供以下脚本。 #GRID1 table tr:nth-child(odd){background:rgba(16,79,173,0.5);} #GRID1 table tr:nth-child(even){background:rgba(21, 0, 255,0);}复制代码最终效果: 2.1.4 改变表格背景颜色为渐变色 脚本: 脚本写在客户端脚本中。getCellDom( A1 )为指定A1单元格变色,这里可以换成_getColObj()或_getRowObj()。比如_getColObj( 0 )即指定第一列变色(列数从0开始排序),_getRowObj( 0 )即指定第一行变色(行数从0开始排序)。 linear-gradient是设置渐变颜色的属性可以看看别人总结的使用方法https://www.runoob.com/cssref/func-linear-gradient.html g_rptpage.getGridById( GRID1 ).getCellDom( A1 ).style.setProperty('background-image','linear-gradient(to right, red , yellow)');复制代码最终效果: 2.1.5 改变表格边框为圆角 脚本: 脚本写在客户端脚本中。du变量值越大边框角越圆。 var id= GRID1 ;//表格代号 var du= 10px ;//边框弯曲程度调节 var h=document.getElementsByName(id)[0].getElementsByTagName( tbody )[0].childElementCount; var l=document.getElementsByName(id)[0].getElementsByTagName( tbody )[0].firstElementChild.childElementCount; document.getElementById(id+ .A1 ).style.borderTopLeftRadius=du; document.getElementById(id+ .A +h).style.borderBottomLeftRadius=du; var z=id+ . +String.fromCharCode(l+64); document.getElementById(z+1).style.borderTopRightRadius=du; document.getElementById(z+h).style.borderBottomRightRadius=du;复制代码最终效果: 2.1.6 改变回填表修改或输入时的表元背景颜色 脚本: 脚本写在报表自定义样式中。selector-block是鼠标点到表元上背景颜色,backfill-input是修改输入的表元背景颜色 //改变回填表修改或输入时的表元背景颜色复制代码最终效果: 2.1.7 改变回填表下拉框背景颜色 脚本: 脚本写在报表自定义样式中。 .eui-anim-upbit{ background:rgba(192,192,192)!important; } .eui-align-left{ background:rgba(192,192,192)!important; }复制代码最终效果: 2.2 参数组件样式脚本 2.3 报表样式脚本

xxxl 1395 人阅读
热门问答 更多
部署时连接mysql报错

我本地Navicat能够连接数据库,但是本地部署的时候报了这个错,如何解决......

alen 98 人阅读
实战直播 更多
视频教程 更多
我要发帖
签到领奖

今日已签到513

社区必看 • 社区必看
你关心的问题在这都有答案

产品怎么试用?产品使用遇到技术问题怎么办?怎么有效利用社区学习资源?玩转社区,此贴一定要看!

点击查看
热门板块
一站式数据分析平台-亿信ABI

问题互助 心得体验 辰哥课堂 需求建议

智能数据治理平台-睿治

问题互助 心得体验 行业应用 需求建议

综合讨论

亿信动态 经典案例 社区站务 热门活动

任务挑战更多
1000领取任务

亿信ABI云体验反馈

产品体验截止日期: 2021-12-31
500领取任务

【长期有效】亿信社区优化建议反馈,四重奖励等您来拿!

其他截止日期: 2021-12-31
主要产品研习指南
  • 亿信ABI
  • 睿治
  • 酷屏
返回顶部

小时

全天响应

分钟

快速处理问题

工程师强势助力

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

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

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

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

进群交流、一对一指导

友情链接: CSDN 数据猿 阿里云栖社区 腾讯云+社区 华为云社区 百度云社区
©2021ESENSOFT北京亿信华辰软件有限责任公司版权所有:京ICP备07017321号京公网安备11010802016281号