1. 概述编辑
安装决策报表新自适应插件后，决策报表JS的新接口方法以及支持情况见下文所述，同时对新自适应自定义JS接口设计方法进行说明。
注：下文中的所涉及到的决策报表JS可能存在遗漏的情况，如在模板制作中遇到未覆盖的决策报表JS，可联系技术支持或开发人员。
2.采用新接口方法的决策报表JS编辑
安装决策报表新自适应插件后，由于新自适应的前端采用新的canvas进行绘制实现，不同于老自适应的渲染方式，部分决策报表JS使用新接口写法。
2.1 JS点击超链切换TAB页
参考文档：JS实现点击超链切换TAB页
新接口写法，见下：
_g().getWidgetByName("tabpane0").showCardByIndex(1);
2.2JS隐藏报表块滚动条
参考文档：JS隐藏报表块滚动条
新接口写法，见下：
setTimeout(function(){ _g().getWidgetByName('report0').setVScrollBarVisible(false); }, 100)
2.3报表块实现跑马灯效果
参考文档：报表块实现跑马灯效果
新接口写法，见下：
_g().getWidgetByName('report0').startMarquee(
{ offset: 2,
interval: 0.02,
to: 'right'
})
说明：
startMarquee(opt)
opt可以传以下4个属性。
1.offset：每次滚动的距离，默认为5
2.interval：时间间隔(单位为秒)，默认为0.1
3.stopOnHover：鼠标悬浮时暂停，默认为true
4.to：可以设置报表块的滚动方向，默认为top
top：向上滚动
bottom：向下滚动
left：向左滚动
right：向右滚动
2.4JS获取报表块单元格的值
参考文档：JS获取报表块单元格的值
新接口写法，见下：
// 获取单元格的值：
_g().getWidgetByName('report1').getCellValue('A1')
// 设置单元格的值：
_g().getWidgetByName('report0').setCellValue('A1', 'alan')
2.5JS实现决策报表获取单元格对应值
参考文档：JS实现决策报表获取单元格对应值
新接口写法，见下：
// 获取单元格的值：
_g().getWidgetByName('report1').getCellValue('A1')
// 设置单元格的值：
_g().getWidgetByName('report0').setCellValue('A1', 'alan')
2.6JS实现按钮获取报表块页码数
参考文档：JS实现报表按钮获取报表块的页码数
新接口写法，见下：
var a = _g().getWidgetByName("report0").getPageIndex()
//获取报表块 report0 的当前页码数
var b = _g().getWidgetByName("report0").getTotalPage();
//获取报表块总页码数，其中 report0 是报表块的名字 alert("当前页码是" + a);
alert("总页码是" + b);
2.7JS实现隐藏tab块标题
参考文档：JS实现隐藏tab块标题
新接口写法，见下：
tabpane隐藏全部：（tabpane直接添加初始化事件）
this.invisible();
或者
_g().getWidgetByName('tabpane0').invisible();
2.隐藏某个tab：（tablayout0添加初始化）
_g().getWidgetByName("tablayout0").setTabVisible("tab1", false);2.8JS实现报表按钮控件取到其他控件值
参考文档：JS实现报表按钮控件取到其他控件值
新接口写法，见下：
_g().getWidgetByName('lable0').getValue()
2.9JS获取决策报表内图表块刷新数据
参考文档：JS获取决策报表内图表块刷新数据
注：针对图表的JS，依然采用老的写法；若针对报表块则采用以下写法。
新接口写法，见下：
setTimeout(function()
{
var c = _g().getWidgetByName("chart1");
c.refresh();
}
, 500);
2.10JS实现切换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;
}
2.11JS 实现点击按钮实现超链接功能
参考文档：JS 实现点击按钮实现超链接功能
新接口写法，见下：
_g().getWidgetByName('chart0').changeParameter({"area": area})
2.12JS实现控件融入背景
参考文档：JS实现控件融入背景
一、方法一（推荐）：
1）实现控件和弹出窗口可分别设置背景，步骤见下：
第一步：添加css，放到工程目录下。body初始化，引用：
$('<link rel="stylesheet" type="text/css" href="/webroot/help/css/style1.css"/>').appendTo('head');
css文件直接下载：
效果如下图：
模板下载：
2）控件和弹窗统一设置背景，步骤见下：
第一步：添加css，放到工程目录下。body初始化，引用：
$('<link rel="stylesheet" type="text/css" href="/webroot/help/css/custom.css"/>').appendTo('head');
css文件直接下载：
模板下载：
二、方法二：
注：使用方法二，缩放时会存在问题。
新接口写法，见下：
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)
2.13JS更改控件样式
参考文档：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)
2.14JS实现决策报表报表块鼠标所在单元格/行的样式
单元格背景，示例如下：
//鼠标悬浮
_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');
2.15决策报表里使用延时函数实现某些JS效果
参考文档：决策报表里使用延时函数实现某些JS效果
新接口写法，见下：
_g().getWidgetByName('report0').makeHeightLine('red', 'mouseover')
2.16决策报表控件实现点击查询按钮后才能查询
参考文档：决策报表控件实现点击查询按钮后才能查询
新接口写法，见下：
需要编辑后改成编辑结束事件
2.17报表块中点击单元格改变颜色再次点击恢复颜色
新接口写法，见下：
_g().getWidgetByName("report0").makeHeightCellHold('red');
_g().getWidgetByName("report0").makeHeightCellHold('red', true);
2.18日历组件增加翻页功能
参考文档：日历组件增加翻页功能
由于目前一些控件的setValue是异步的，所以setValue之后立刻执行parameterCommit会导致取到的控件的值仍是原来的值，所以需要加个setTimeout。
示例：
_g().parameterEl.getWidgetByName("date").setValue(a);
setTimeout(function()
{
_g().parameterCommit();
}, 100)
2.19JS实现大屏旋转星空背景
参考文档：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();
})
2.20JS实现决策报表中不同网页框相互刷新
参考文档：JS实现决策报表中不同网页框相互刷新
暂支持写法:
window.parent._g().getWidgetByName('rHIframe1').reload(); //rHIframe1 为父模板需要刷新的网页框控件名
2.21JS实现自动隐藏参数面板
参考文档：JS实现参数面板自动隐藏与显示
新接口写法，见下：
在参数面板中添加初始化事件。
_g().parameterEl.resizeableContainer.doClick()
2.22JS实现视图树赋值时自动展开有值节点
参考文档：视图树控件介绍
新接口写法，见下：
在视图树中添加初始化事件。
this.enableAutoExpand();
3.支持老接口方法的表单JS编辑
4.新自适应自定义JS接口设计方法编辑
1）获取组件实例
所有组件操作使用_g().getWidgetByName("xxxx")来获取组件实例。
部分控件上的自定义js会使用this.options.form来调用，此等价于_g().getWidgetByName("xxxx")。
2）获取dom
目前有很多场景下的dom操作是通过document、jquery操作去实现，针对这些场景，可以使用_g().getWidgetByName("xxxx").element获取该组件的jquery对象。
注：禁止直接使用js选择器去选择组件的dom。
3）设置css
设置组件下的css，推荐使用div[widgetName="xxxx"]
注：尽量不用class选择器去选择。