目录:
- 1. 概述
- 2. JS点击超链切换TAB页
- 3.JS隐藏报表块滚动条
- 4.报表块实现跑马灯效果
- 5.JS获取报表块单元格的值
- 6.JS实现决策报表获取单元格对应值
- 7.JS实现按钮获取报表块页码数
- 8.JS实现隐藏tab块标题
- 9.JS实现报表按钮控件取到其他控件值
- 10.JS获取决策报表内图表块刷新数据
- 11.JS实现切换tab显示/隐藏参数面板上的控件
- 12.JS 实现点击按钮实现超链接功能
- 13.JS实现控件融入背景
- 14.JS更改控件样式
- 15.JS实现决策报表报表块鼠标所在单元格/行的样式
- 16.决策报表里使用延时函数实现某些JS效果
- 17.决策报表控件实现点击查询按钮后才能查询
- 18.报表块中点击单元格改变颜色再次点击恢复颜色
- 19.日历组件增加翻页功能
- 20.JS实现大屏旋转星空背景
1. 概述编辑
安装决策报表新自适应插件后,部分表单JS使用新接口写法。
2. JS点击超链切换TAB页编辑
3.JS隐藏报表块滚动条编辑
参考文档:JS隐藏报表块滚动条
新接口写法,见下:
setTimeout(function(){ _g().getWidgetByName('report0').setVScrollBarVisible(false); }, 100)
4.报表块实现跑马灯效果编辑
参考文档:报表块实现跑马灯效果
新接口写法,见下:
setTimeout(function(){
_g().getWidgetByName('report0').startMarquee();
}, 500)
说明:
startMarquee(opt)
opt可以传三个属性
offset:每次滚动的距离,默认为5
interval:时间间隔(单位为秒),默认为0.1
stopOnHover:鼠标悬浮时暂停,默认为true
示例:
setTimeout(function(){
_g().getWidgetByName('report2').setVScrollBarVisible(false);
_g().getWidgetByName('report0').startMarquee({
offset: 2,
interval: 0.02
})
}, 500)
5.JS获取报表块单元格的值编辑
参考文档:JS获取报表块单元格的值
新接口写法,见下:
// 获取单元格的值:
_g().getWidgetByName('report1').getCellValue('A1')
// 设置单元格的值:
_g().getWidgetByName('report0').setCellValue('A1', 'alan')
6.JS实现决策报表获取单元格对应值编辑
参考文档:JS实现决策报表获取单元格对应值
新接口写法,见下:
// 获取单元格的值:
_g().getWidgetByName('report1').getCellValue('A1')
// 设置单元格的值:
_g().getWidgetByName('report0').setCellValue('A1', 'alan')
7.JS实现按钮获取报表块页码数编辑
参考文档:JS实现报表按钮获取报表块的页码数
新接口写法,见下:
var a = _g().getWidgetByName("report0").getPageIndex()
//获取报表块 report0 的当前页码数
var b = _g().getWidgetByName("report0").getTotalPage();
//获取报表块总页码数,其中 report0 是报表块的名字 alert("当前页码是" + a);
alert("总页码是" + b);
8.JS实现隐藏tab块标题编辑
9.JS实现报表按钮控件取到其他控件值编辑
10.JS获取决策报表内图表块刷新数据编辑
参考文档:JS获取决策报表内图表块刷新数据
新接口写法,见下:
setTimeout(function()
{
var c = _g().getWidgetByName("chart1");
c.refresh();
}
, 500);
11.JS实现切换tab显示/隐藏参数面板上的控件编辑
新接口写法,见下:
var tabpane = this.getWidgetByName("TABPANE0");
switch(tabpane.getShowIndex())
{
case 0:
_g().getWidgetByName('运货商').visible()
_g().getWidgetByName('LABEL运货商').visible()
break;
case 1:
_g().getWidgetByName('运货商').invisible()
_g().getWidgetByName('LABEL运货商').invisible()
break;
default:
break;
}
12.JS 实现点击按钮实现超链接功能编辑
13.JS实现控件融入背景编辑
参考文档:JS实现控件融入背景
新接口写法,见下:
setTimeout(function(){
var color="transparent";
var fontColor = "#c0c0c0";
//数字控件的属性
$(".report-main-parameter-container-controller-number").css({"background":color})//设置背景
$(".report-main-parameter-container-controller-number .bi-input").css({"color":fontColor});//设置字体颜色
$(".report-main-parameter-container-controller-number .bi-border").css("border","none");//去除边框
// 文本控件
$(".report-main-parameter-container-controller-text").css({"background":color,"color":fontColor});//设置背景
$(".report-main-parameter-container-controller-text .bi-input").css({"color":fontColor});//设置字体颜色
$(".report-main-parameter-container-controller-text .bi-border").css("border","none");//去除边框
//以下修改下拉单选控件
$(".report-main-parameter-container-controller-combo >.bi-card").css({"background":color});//设置背景
$(".report-main-parameter-container-controller-combo .bi-input").css({"color":fontColor});//设置字体颜色
$(".report-main-parameter-container-controller-combo .bi-border").css("border","none");//去除边框
$(".report-main-parameter-container-controller-combo .bi-icon-button").css("color", fontColor);//设置点击按钮颜色
// 下拉复选控件
$(".report-main-parameter-container-controller-tag-combo-checkbox >.bi-card").css({"background":color});//设置背景
$(".report-main-parameter-container-controller-tag-combo-checkbox .bi-input").css({"color":fontColor});//设置字体颜色
$(".report-main-parameter-container-controller-tag-combo-checkbox .bi-border").css("border","none");//去除边框
$(".report-main-parameter-container-controller-tag-combo-checkbox .bi-icon-button").css("color", fontColor);//设置点击按钮颜色
// 日期控件
$(".report-main-parameter-container-controller-datetime").css({"background":color});//设置背景
$(".report-main-parameter-container-controller-datetime .bi-text").css({"color":fontColor});//设置字体颜色
$(".report-main-parameter-container-controller-datetime .bi-border").css("border","none");//去除边框
$(".report-main-parameter-container-controller-datetime .bi-icon-button").css("color", fontColor);//设置点击按钮颜色
},100)
14.JS更改控件样式编辑
参考文档:JS 更改控件样式
新接口写法,见下:
setTimeout(function()
{ $('.report-main-parameter-container-controller-datetime .date-font').css('background', '#9AB0C6').css('border-radius', '0px 5px 5px 0px'); $('.report-main-parameter-container-controller-datetime >div').css('border-radius', '5px'); }
, 10)
15.JS实现决策报表报表块鼠标所在单元格/行的样式编辑
单元格背景,示例如下:
//鼠标悬浮
_g().getWidgetByName('report1').makeHeightCell('red', 'mouseover')
//鼠标点击
_g().getWidgetByName('report1').makeHeightCell('red', 'mousedown')
//鼠标悬浮+点击
_g().getWidgetByName('report1').makeHeightCell('red')
行字体,示例如下:
_g().getWidgetByName('report0').makeFontLine(
{color: 'red',
fontSize: 25,
bold:true,
textShadow:true
},'mouseover');
单元格字体,示例如下:
_g().getWidgetByName('report0').makeFontCell(
{color: 'red',
fontSize: 25,
bold:true,
textShadow:true
},'mouseover');
可支持的参数,如下:
bold:boolean;//加粗
italic:boolean;//斜体
fontFamily:string;//字体
strikeThrough:boolean;//删除线
fontSize:number;//字号
subscript:boolean;//下标
underLine{
width:number;
style:string;
color:number;
};//下划线
textShadow:boolean;//文字阴影
subscript:boolean;//上标
color:number;//颜色
示例:
_g().getWidgetByName('report0').makeHeightLine('blue', 'mouseover')
_g().getWidgetByName('report0').makeFontLine(
{color: 'red',
fontSize: 25,
bold:true,
textShadow:true
},'mouseover');
16.决策报表里使用延时函数实现某些JS效果编辑
17.决策报表控件实现点击查询按钮后才能查询编辑
18.报表块中点击单元格改变颜色再次点击恢复颜色编辑
新接口写法,见下:
_g().getWidgetByName("report0").makeHeightCellHold('red');
_g().getWidgetByName("report0").makeHeightCellHold('red', true);
19.日历组件增加翻页功能编辑
参考文档:日历组件增加翻页功能
由于目前一些控件的setValue是异步的,所以setValue之后立刻执行parameterCommit会导致取到的控件的值仍是原来的值,所以需要加个setTimeout。
示例:
_g().parameterEl.getWidgetByName("date").setValue(a);
setTimeout(function()
{
_g().parameterCommit();
}, 100)
20.JS实现大屏旋转星空背景编辑
参考文档:JS实现大屏旋转星空背景
新接口写法,见下:
function background() {
$(".content-container").append('<canvas id="canvas"></canvas>');
//在body中插入canvas画布,并置于底层
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 217,
stars = [],
count = 0,
maxStars = 1000;
//设置星星数量
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#fff');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var Star = function() {
this.orbitRadius = random(w / 2 - 50);
this.radius = random(100, this.orbitRadius) / 10;
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 200000;
//设置旋转速度
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
Star.prototype.draw = function() {
var x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY,
twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = 0; i < maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.8;
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();
}
background();
$(window).resize(function() {
background();
})
21.js实现决策报表中不同网页框相互刷新
暂支持写法:
window.parent._g().getWidgetByName('rHIframe1').reload(); //rHIframe1 为父模板需要刷新的网页框控件名