新自适應JS使用- FineReport帮助文档 - 全面的报表使用教程和学习资料

一、概述

不同於老自適應的渲染方式，新自適應的前端採用新的 Canvas 進行繪制實現，因此決策報表支援的 JS 介面有所變化。
新自适應下添加 JS 事件時，獲取不到通過動态參數方式傳遞過來的參數值。
本文將列舉新自適應支援的 JS API。

二、支援的舊API

1

獲取組件和元件。

決策報表中參數面板和body塊中的內容稱之為組件，包括報表塊、Tab塊、絕對畫布塊。
決策報表中組件內的參數元件稱之為元件，例如在參數面板中的下拉框元件，或是在Tab塊中的文字元件。
獲取組件和元件有兩種方法，_g().getWidgetByName('Component') 和 this.options.form.getWidgetByName('Component')，具體使用方法如下表所示。
推薦使用 _g().getWidgetByName('Component')，可獲取決策報表中所有的組件和元件，例如跨容器獲取，在參數面板中獲取body中的組件和元件。

方法	this.options.form.getWidgetByName('Component')	獲取當前容器內的組件和元件，例：透過參數面板中的元件獲取同在參數面板中的元件
參數	Component	字串，组件/元件名稱
示例	this.options.form.getWidgetByName('textEditor0') 給參數面板中某個元件新增事件，獲取同在參數面板內的文字元件 textEditor0 this.options.form.getWidgetByName('report0') 給 body 內的按鈕元件新增事件獲取 body 內的組件報表塊report0 this.options.form.getWidgetByName('tabpane0') 給 body 內的按鈕元件新增事件獲取body 內的組件Tab 塊 tabpane0
應用示例	JS實現參數組合篩選的前進和後退 JS實現隐藏決策報表組件

方法	_g().getWidgetByName('Component')	獲取決策報表中所有的組件和元件，例：透過參數面板中的元件獲取body中的組件或元件
參數	Component	字串，组件/元件名稱
示例	_g().getWidgetByName('textEditor0') 給參數面板中某個元件新增事件，獲取參數面板內或body內的文字元件 textEditor0 _g().getWidgetByName('report0') 給參數面板內的按鈕新增事件獲取 body 中報表塊 report0 _g().getWidgetByName('tabpane0') 給參數面板內的按鈕新增事件獲取 body 中 Tab 塊 tabpane0
應用示例	JS實現在報表參數介面獲取元件的值 JS實現決策報表中點選標題排序 JS實現決策報表中Tab塊輪播

2

元件相關設定。

元件獲取方式同上一節內容。
元件可執行的方法如下表，Widget 為獲取的元件。

方法名	方法	說明
取實際值	Widget.getValue()	獲取元件實際值
取顯示值	Widget.getText()	獲取元件的顯示值
賦實際值	Widget.setValue()	給參數元件賦值，不建議給填報元件賦實際值註：使用setValue()給下拉樹元件賦值，需要添加一個 false 參數，即 setValue(value,false)
賦顯示值	Widget.setText()	給參數元件賦顯示值
重置	Widget.reset()	清空資料
是否可見	Widget.isVisible()	傳回元件是否可見，傳回 true 可見，false 不可見
設定可見	Widget.setVisible(boolean)	設定元件是否可見，參數為true 可見，false 不可見
設定可用	Widget.setEnable(boolean)	設定元件是否可用，參數為true 可用，false 不可用
是否可用	Widget.isEnabled()	傳回元件是否可用，傳回 true 可用，false 不可用
調用元件事件	Widget.fireEvent("事件名稱")	設定元件觸發指定名字的事件
是否可以爲空	Widget.options.allowBlank=false	設定元件是否可爲空，true 可爲空，false 不可爲空
應用示例	JS實現參數組合篩選的前進和後退 JS實現在報表參數介面獲取元件的值 JS實現報表組件獲取參數面板元件值

3

報表塊和圖表塊相關設定。

圖表塊和報表塊組件獲取方式同第一節內容。
組件可執行方法如下表所示，Widget 爲獲取的組件。

方法名	方法	說明
設定可見	Widget.setVisible(boolean)	設定組件是否可見，參數為 true 可見，false 不可見
應用示例	JS實現隱藏決策報表組件

4

Tab塊相關設定。

Tab塊獲取方式同第一節內容。
Tab塊可執行方法如下表所示。

方法名	方法	說明
設定可見	setTabVisible(Tabarry, boolean)	參數： Tabarry 為一個陣列顯示，用來定位具體為哪一個 Tab， boolean 設定是否可見，參數為 true 可見，false 不可見
獲得 Tab 的索引	getShowIndex()	獲得當前展示 Tab 的索引
展示 Tab	showCardByIndex(index)	展示定位的 Tab ，index 為 Tab 的索引
應用示例	JS實現點選超鏈切換Tab塊 JS實現決策報表中Tab塊輪播 JS實現點選查詢後停留在當前查詢的Tab頁

5

重新整理。

方法名	方法	說明
跳轉到指定頁（可以用於重新整理當前報表塊）	gotoPage( pn, para,noCache )	參數： pn : 頁序號，要跳轉的頁，從 1 開始 para : 選填，跳轉報表塊頁面時攜帶的參數 noCache : 選填，重新整理時重新計算或者使用快取 noCache 有三種寫法，效果分別如下：不寫：此時報表塊重新整理的資料從快取裡面取，不重新計算 rue：此時重新計算所有報表塊 lazy：此時重新計算單個報表塊
提交參數並載入報表內容	_g().parameterCommit()	提交參數並載入報表主體內容
應用示例	JS實現決策報表中點選標題排序決策報表自動查詢JS

6

其他。

以下 JavaScript 語法相關的內容，可結合帆軟提供的API用在報表開發中。

方法	方法說明	應用示例
setInterval('location.reload();',time)	setInterval() 方法可按照指定的週期（time，以毫秒計）來呼叫函式或計算表示式。 location.reload(forceGet) 重新載入當前文件 setInterval('location.reload();',time) 定時重新整理，即每time毫秒重新整理一次	JS實現決策報表定時重新整理
window.location	用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。	JS實現決策報表定時重新整理
encodeURI（url）	encodeURI 函式可把字串進行 URL 編碼，url 為含有 URI 或其他要編碼的文字	JS實現點選跳轉頁面和定時跳轉頁面
window.parent	parent 屬性返回當前視窗的父視窗	JS實現決策報表中網頁框相互重新整理
location.href	href 屬性是一個可讀可寫的字符串，可設置或返回當前顯示的文檔的完整 URL	JS實現暫停和繼續輪播報表

三、新增API。

1

報表塊跑馬燈。

註：如果按照方案未實現跑馬燈效果，可能是資料量未超過報表塊高度導緻的，可以將報表塊高度調小。

方法	startMarquee(opt)	報表塊實現跑馬燈效果
參數	opt	opt：json格式，滾動屬性支援的參數為： offset：每次滾動的距離，預設為5 interval：時間間隔(單位為秒)，預設為0.1 stopOnHover：滑鼠懸浮時暫停，預設為true to參數：報表塊滾動方向 top 向上滾動 bottom 向下滾動 left 向左滾動 right 向右滾動
示例	報表塊 report0 實現每次滾動間距為 2、滾動速度為 0.02 、向右滾動的跑馬燈： _g().getWidgetByName('report0').startMarquee( { offset: 2, interval: 0.02, to: 'right' } )
應用示例	（新）報表塊實現跑馬燈效果.frm （新）滑鼠懸停實現多個報表塊跑馬燈停止滾動.frm

2

隱藏報表塊捲軸。

註：如果按照方案未實現捲軸效果，可能是資料量未超過報表塊高度導緻的，可以將報表塊高度調小。

方法	setVScrollBarVisible(visible)	隱藏當前報表塊的捲軸
參數	visible	visible：boolen型別，false 隱藏
示例	隱藏 report0 報表塊的捲軸：_g().getWidgetByName('report0').setVScrollBarVisible(bool)
應用示例	（新）JS實現報表塊隱藏捲軸.frm

3

獲取元件。

方法	_g().parameterEl.getWidgetByName('comboCheckBox')	獲取元件
參數	comboCheckBox	comboCheckBox：元件名
示例	獲取元件comboCheckBox0：_g().parameterEl.getWidgetByName('comboCheckBox0')
應用示例	（新）JS實現日曆组件增加翻頁功能.frm

4

獲取儲存格的值。

方法	getCellValue(cell)	獲取儲存格的值
參數1	cell	cell： string 型別，儲存格
示例	獲取A1儲存格的值：_g().getWidgetByName('report1').getCellValue('A1')
應用示例	（新）JS獲取和設定報表塊储存格的值.frm

5

給儲存格賦值。

方法	setCellValue(cell, text)	設定儲存格的值
參數1	cell	cell： string 型別，儲存格
參數2	text	text：string 型別，給儲存格賦的值
示例	給 A1 儲存格賦值alan： _g().getWidgetByName('report0').setCellValue('A1', 'alan')
應用示例	（新）JS獲取和設定報表塊储存格的值.frm

6

儲存格顏色變化。

方法	makeHeightCell(color, mouseset)	滑鼠移動時儲存格顔色變化
參數1	color	color： string 型別，顔色
參數2	mouseset	滑鼠的操作 mouseover 滑鼠懸浮 mousedown 滑鼠點選預設，滑鼠懸浮加點選
示例	滑鼠懸浮時顯示紅色： _g().getWidgetByName('report1').makeHeightCell('red', 'mouseover')
應用示例	（新）JS實現改變決策報表報表塊滑鼠所在儲存格或列的樣式.frm

7

儲存格所在列顔色變化。

方法	makeHeightLine(color, mouseset)	滑鼠移動時儲存格所在列顔色發生變化
參數1	color	color： string 型別，顔色
參數2	mouseset	滑鼠的操作 mouseover 滑鼠懸浮 mousedown 滑鼠點選預設，滑鼠懸浮加點選
示例	滑鼠懸浮時該列顯示紅色：_g().getWidgetByName('report1').makeHeightLine('red', 'mouseover')
應用示例	（新）JS實現改變決策報表報表塊滑鼠所在儲存格或列的樣式.frm

8

改變儲存格所在列字型樣式。

方法	makeFontLine(pattern,mouseset)	滑鼠移動時改變儲存格所在列字型樣式
參數1	pattern	pattern：json格式，字型樣式支援的參數為： bold:boolean //加粗 italic:boolean //斜體 fontFamily:string //字型 strikeThrough:boolean //刪除線 fontSize:number //字號 subscript:boolean //下標 underLine{ width:number； style:string； color:number； } //下劃線 textShadow:boolean //文字陰影 supscript:boolean//上標 color：string //顔色
參數2	mouseset	滑鼠的操作 mouseover 滑鼠懸浮 mousedown 滑鼠點選預設，滑鼠懸浮加點選
示例	滑鼠懸浮時設定儲存格所在列的字型格式為紅色、25號、加粗、陰影： _g().getWidgetByName('report0').makeFontLine( {color: 'red', fontSize: 25, bold:true, textShadow:true },'mouseover');
應用示例	（新）JS實現改變決策報表報表塊滑鼠所在儲存格或列的樣式.frm

9

改變儲存格字型樣式.

方法	makeFontCell(pattern,mouseover)	滑鼠移動時改變儲存格字型樣式
參數1	pattern	pattern：json格式，字型樣式支援的參數為： bold:boolean //加粗 italic:boolean //斜體 fontFamily:string //字型 strikeThrough:boolean //刪除線 fontSize:number //字號 subscript:boolean //下標 underLine{ width:number； style:string； color:number； } //下劃線 textShadow:boolean //文字陰影 supscript:boolean//上標 color：string //顔色
參數2	mouseset	滑鼠的操作 mouseover 滑鼠懸浮 mousedown 滑鼠點選預設，滑鼠懸浮加點選
示例	滑鼠懸浮時設定儲存格字型格式為紅色、25號、加粗、陰影： _g().getWidgetByName('report0').makeFontCell( {color: 'red', fontSize: 25, bold:true, textShadow:true },'mouseover');
應用示例	（新）JS實現改變決策報表報表塊滑鼠所在儲存格或列的樣式.frm

10

獲取報表塊當前頁碼數。

方法

getPageIndex()

獲取當前報表塊當前頁碼數

示例

獲取 report0 報表塊當前的頁碼：

_g().getWidgetByName("report0").getPageIndex()

應用示例

（新）JS實現報表按鈕獲取報表塊的頁碼數.frm

11

獲取報表塊總頁碼數。

方法

getTotalPage()

獲取當前報表塊總頁碼數

示例

獲取 report0 報表塊總頁碼：

_g().getWidgetByName("report0").getTotalPage()

應用示例

（新）JS實現報表按鈕獲取報表塊的頁碼數.frm

12

隱藏 Tab 塊的標題。

方法

invisible()

隱藏 Tab 塊的標題

示例

隱藏所有Tab塊的標題：

_g().getWidgetByName('tabpane0').invisible()

應用示例

（新）JS實現隱藏全部tab塊標題.frm

13

隐藏某個 Tab 塊。

方法	setTabVisible("Tabname", visible)	設定Tab是否可見
參數1	Tabname	Tabname： string 型別，Tab 名稱
參數2	visible	visible：boolean 型別，是否顯示，true 可見，false 不可見
示例	設定 Tab1 不顯示： _g().getWidgetByName("tablayout0").setTabVisible("tab1", false)
應用示例	（新）JS實現隱藏某個tab塊.frm

14

隱藏參數面板。

方法

_g().parameterEl.resizableContainer.doClick()

隱藏參數面板

示例

隱藏參數面板：

_g().parameterEl.resizableContainer.doClick()

應用示例

（新）JS隱藏參數面板.frm

15

獲取檢視表樹葉子節點。

方法

getSelectedValue()

獲取檢視表樹葉子節點

示例

獲取檢視表樹葉子節點：

_g().getWidgetByName('treeEditor0').getSelectedValue()

應用示例

（新）getSelectedValue獲取檢視表樹葉子節點值.frm

16

檢視表樹賦值時自動展開有值節點。

方法

enableAutoExpand()

檢視表樹賦值時自動展開有值節點

示例

檢視表樹賦值時自動展開有值節點：

this.enableAutoExpand()

應用示例

（新）檢視表樹非同步載入賦值全選.frm

17

滑鼠懸浮顯示提示框。

方法	makeHoverTooltip(cell, text)	鼠标在儲存格上懸浮時，顯示提示内容
參數1	cell	cell： string 型別，儲存格
參數2	text	text： string 型別，懸浮要顯示的文字
示例	滑鼠懸浮在A1儲存格時，顯示銷量字樣：_g().getWidgetByName("report0").makeHoverTooltip('A1', '銷量')
應用示例	（新）滑鼠懸浮提示框.frm

18

跳轉到指定組件位置。

方法

element[0].scrollIntoView()

跳轉到指定組件位置

示例

點選跳轉到 Chart1圖表位置：_g().getWidgetByName("Chart1").element[0].scrollIntoView()

應用示例

（新）點選按鈕跳轉到指定組件位置.frm

19

點選跳轉超連結。

方法

changeParameter(Parameter)

點選跳轉超連結

參數

Parameter

json 格式，報表參數

示例

點擊實現超鏈接：

_g().getWidgetByName('chart0').changeParameter({"area": area})

20

實現元件融入背景。

方法

引用css文件實現

$('<link rel="stylesheet" type="text/css" href="../style1.css"/>').appendTo('head');

示例

新建 CSS 文件 style1.css，放置在報表工程 %FR_HOME%\webapps\webroot\help\css 下。
點擊下載 style1.css 文件：style1.css
引用 CSS 檔案，為 body 新增「初始化後」事件，事件內容為：

$('<link rel="stylesheet" type="text/css" href="/webroot/help/css/style1.css"/>').appendTo('head');

註：若元件和彈窗背景需要設定統一，可使用css文件custom.css

應用示例

（新）元件融入背景.frm

（新）元件融入背景（元件和彈窗一起）.frm

21

實現大屏星空背景。

方法

具体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();

})

應用示例

大屏旋轉星空背景圖.frm

上一篇：決策報表新自适應

下一篇：決策報表新舊版本說明

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

文檔回饋

滑鼠選中內容，快速回饋問題

滑鼠選中存在疑惑的內容，即可快速回饋問題，我們將會跟進處理。

不再提示

10s後關閉

新自适應JS使用

一、 概述

二、支援的舊API

1

獲取組件和元件。

2

元件相關設定。

3

報表塊和圖表塊相關設定。

4

Tab塊相關設定。

5

重新整理。

6

其他。

三、新增API。

1

報表塊跑馬燈。

2

隱藏報表塊捲軸。

3

獲取元件。

4

獲取儲存格的值。

5

給儲存格賦值。

6

儲存格顏色變化。

7

儲存格所在列顔色變化。

8

改變儲存格所在列字型樣式。

9

改變儲存格字型樣式.

10

獲取報表塊當前頁碼數。

11

獲取報表塊總頁碼數。

12

隱藏 Tab 塊的標題。

13

隐藏某個 Tab 塊。

14

隱藏參數面板。

15

獲取檢視表樹葉子節點。

16

檢視表樹賦值時自動展開有值節點。

17

滑鼠懸浮顯示提示框。

18

跳轉到指定組件位置。

19

點選跳轉超連結。

20

實現元件融入背景。

21

附件列表

一、概述