亿信华辰数据分析社区|商业智能BI工具,报表软件和大数据分析入门学习、知识交流

一、脚本使用说明在做报表开发的过程中遇到需要给报表做自定义样式的需求比如点击单元格背景颜色变色、点击单元格字体变色、改变表格边框为圆形等，但是设置属性中没有提供这样需求的功能设置入口，这时候就需要用到脚本来实现这样的需求了。脚本设置的入口，以下的脚本示例中的脚本需要填写的位置大部分都在编辑区》高级》脚本》客户端脚本中设置，也有部分会直接写在编辑区》基础属性》报表自定义样式或自定义样式写，其他情况会在示例中特殊说明。二、常用脚本示例 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 报表样式脚本