我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › ABI常用表元样式脚本汇总

ABI常用表元样式脚本汇总

复制链接 | 收藏本帖

8744

: xxxl 数据领袖Lv6

发表于2021-3-11 16:00

楼主

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

一、表元样式脚本使用说明
在做报表开发的过程中遇到需要给报表做自定义样式的需求比如点击单元格背景颜色变色、点击单元格字体变色、改变表格边框为圆形等，但是设置属性中没有提供这样需求的功能设置入口，这时候就需要用到脚本来实现这样的需求了。
脚本设置的入口，以下的脚本示例中的脚本填写的位置在编辑区>高级>脚本>客户端脚本中设置。

也有部分写在编辑区>基础属性>报表自定义样式或自定义样式，其他情况会在示例中特殊说明。

报表中其他组件样式脚本比如文本组件样式、tab标签页样式、报表分页条样式、报表内滚动条样式、参数组件样式等可看帖子《ABI常用报表样式脚本汇总》https://bbs.esensoft.com/thread-138911-1-1.html

二、表元样式脚本
2.1 改变表格中钻取表元悬停时显示的颜色
脚本说明：
脚本写在客户端脚本中。GRID1为表格代号，颜色可直接写颜色名或十六进制颜色信息等。

EUI.addStyleSheet("#GRID1 a:hover {color: red !important;}");

复制代码

最终效果：

2.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.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.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.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.6 改变行列锁定线样式
脚本说明：
脚本写在客户端脚本中。现版本中，仅有abi524针对行列锁定线有颜色设置的入口，如果想设置锁定线其他样式或是其他版本想要改变样式可通过脚本达到效果。

var grid1 = g_rptpage.getGridById("GRID1");
if(grid1.lineH){
grid1.lineH.style.cssText +="border-top:5px solid red";//横向行列锁定线样式
}
if(grid1.lineV){
grid1.lineV.style.cssText +="border-left:5px solid red";//纵向行列锁定线样式
}

复制代码

也可用

EUI.addStyleSheet('#GRID1 > div {border-top:5px solid red !important}')//横向行列锁定线样式
EUI.addStyleSheet('#GRID1 > div {border-left:5px solid red !important}')//纵向行列锁定线样式

复制代码

最终效果：

2.7 改变回填表修改或输入时的表元背景颜色
脚本说明：
脚本写在报表自定义样式中。selector-block是鼠标点到表元上背景颜色，backfill-input是修改输入的表元背景颜色。

//改变回填表修改或输入时的表元背景颜色
.selector-block{
background:#A0A0A0!important;
}
.backfill-input{
background:#A0A0A0!important;
}

复制代码

最终效果：

2.8 改变回填表下拉框背景颜色
脚本说明：
脚本写在报表自定义样式中。

.eui-anim-upbit{
background:rgba(192,192,192)!important;
}
.eui-align-left{
background:rgba(192,192,192)!important;
}

复制代码

最终效果：

2.9 隐藏回填表选中表元边框
脚本说明：
脚本写在客户端脚本中。

$('.selector-block').css('display', 'none');

复制代码

最终效果：

2.10 改变回填表选中表元背景
脚本说明：
脚本写在报表自定义样式中。因为回填表比较特殊采用的是图片背景，所以需要改变图片来达到效果。

.selector-activecell {
background: url("../eform/grid/images/gridselector.png");
overflow: hidden;
z-index: 1;
}

复制代码

图片存放的路径在解压的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，也可以自己上传图片更换图片名称路径就行。

最终效果：

2.11 改变回填表行列锁定线样式
脚本说明：
脚本写在客户端脚本中。

function sdhlTable(grid){
var freezeConfig1 = g_formmgr.getReport(grid).gridbase._property.freezeconfig;
if(freezeConfig1.lineH){
freezeConfig1.lineH.style.cssText +="border-top:5px solid red";//这是横向锁定线样式 px为大小粗细 red为颜色当大小值为0px或者颜色为transparent时行列线不显示
}
if(freezeConfig1.lineV){
freezeConfig1.lineV.style.cssText +="border-left:5px solid red";//这是纵向锁定线样式
}
}
sdhlTable("GRID1");//需要锁定的表格代号
sdhlTable("GRID6");//需要锁定的表格代号