决策报表新自适应_JS使用- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

安裝決策報表新自适應插件後，由於新自适應的前端采用新的 Canvas 進行繪制實現，不同於老自适應的渲染方式，決策報表支持的 JS 接口有所變化。

安裝插件後，新自适應前端除了支持之前的一些接口外，又新增了一些接口，本文将列舉新自适應支持的 JS 接口。

若您在使用中，發現所涉及到的決策報表 JS 接口在本文中未覆蓋，可下方評論區留言或聯系我司技術支持。

2. 支持的舊接口

2.1 控件

2.1.1 獲取控件

1）獲取參數面板内控件

方法	this.options.form.getWidgetByName('Component')	獲取參數面板内控件
參數	Component	字符串，控件名稱
示例	this.options.form.getWidgetByName('textEditor0') 獲取參數面板内的文本框 textEditor0
應用示例	JS實現參數組合篩選的前進和後退

2）獲取 body 内控件

方法	_g().getWidgetByName('Component')	獲取 body 内控件
參數	Component	字符串，控件名稱
示例	_g().getWidgetByName('textEditor0') 獲取 body 内的文本框 textEditor0
應用示例	JS實現在報表參數界面獲取控件的值

2.1.2 控件方法

獲取控件後，可對控件進行一些設置。對控件可執行的方法如下表，Widget 爲獲取的控件。

方法名	方法	說明
取實際值	Widget.getValue()	獲取控件實際值
取顯示值	Widget.getText()	獲取控件的顯示值
賦實際值	Widget.setValue()	給參數控件賦值，不建議給填報控件賦實際值注：使用setValue()給下拉樹賦值，需要添加一個 false 參數，即 setValue(value,false)
賦顯示值	Widget.setText()	給參數控件賦顯示值
重置	Widget.reset()	清空數據
是否可見	Widget.isVisible(boolean)	返回控件是否可見，返回 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實現在報表參數界面獲取控件的值 JS實現報表組件獲取參數面板控件值

2.2 報表塊和圖表塊

2.2.1 獲取圖表塊或報表塊

1）加獲取事件的控件在 body 内

方法	this.options.form.getWidgetByName('Component')	加獲取事件的控件在參數面板内
參數	Component	字符串，控件名稱
示例	this.options.form.getWidgetByName('report0') 給參數面板内的按鈕添加事件獲取報表塊report0
應用示例	JS實現隐藏決策報表組件

2）加獲取事件的控件在參數面板内

方法	_g().getWidgetByName('Component')	獲取 body 内控件
參數	Component	字符串，控件名稱
示例	_g().getWidgetByName('textEditor0') 獲取 body 内的文本框 textEditor0
應用示例	JS實現決策報表中點擊标題排序

2.2.2 方法

方法名	方法	說明
設置可見	Widget.setVisible(boolean)	設置控件是否可見，參數爲 true 可見，false 不可見 JS實現隐藏決策報表組件

方法名

方法

說明

設置可見

Widget.setVisible(boolean)

設置控件是否可見，參數爲 true 可見，false 不可見

JS實現隐藏決策報表組件

2.3 Tab塊

2.3.1 獲取 tabpane 塊

1）加獲取事件的控件在 body 内

方法	this.options.form.getWidgetByName('Component')	加獲取事件的控件在參數面板内，tabpane 爲整體 Tab 塊的名稱
參數	Component	字符串，控件名稱
示例	this.options.form.getWidgetByName('report0') 給參數面板内的按鈕添加事件獲取報表塊report0
應用示例	JS實現點擊超鏈切換Tab塊數據庫表字段控制Tab塊隐藏

2）加獲取事件的控件在參數面板内

方法	_g().getWidgetByName('Component')	加獲取事件的控件在 body 内，tabpane 爲整體 Tab 塊的名稱
參數	Component	字符串，控件名稱
示例	_g().getWidgetByName('textEditor0') 獲取 body 内的文本框 textEditor0
應用示例	JS實現決策報表中Tab塊輪播

2.3.2 方法

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

2.4 刷新

方法名	方法	說明
跳轉到指定頁（可以用於刷新當前報表塊）	gotoPage( pn, para, noCache )	pn : Number 要跳轉的頁，從1開始 para : JSON 跳轉頁面是攜帶的參數 noCache : Boolean 不是用緩存，強制取新的數據 JS實現決策報表中點擊标題排序
提交參數并加載報表内容	_g().parameterCommit()	提交參數并加載報表主體内容決策報表自動查詢JS

方法名

方法

說明

跳轉到指定頁（可以用於刷新當前報表塊）

gotoPage( pn, para, noCache )

pn : Number 要跳轉的頁，從1開始

para : JSON 跳轉頁面是攜帶的參數

noCache : Boolean 不是用緩存，強制取新的數據

JS實現決策報表中點擊标題排序

提交參數并加載報表内容

_g().parameterCommit()

提交參數并加載報表主體内容

決策報表自動查詢JS

2.5 其他

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

應用	應用說明
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實現暫停和繼續輪播報表

3. 新增接口

利用_g().getWidgetByName('report1')獲取到報表塊後，即可對報表塊内容做設置，如下爲新增的控件方法。

3.1 單元格顔色變化

方法	makeHeightCell(color, mouseset)	鼠标移動時單元格顔色變化
參數1	color	color： string 類型，顔色
參數2	mouseset	鼠标的操作 mouseover 鼠标懸浮 mousedown 鼠标點擊缺省，鼠标懸浮加點擊
示例	鼠标懸浮時顯示紅色：_g().getWidgetByName('report1').makeHeightCell('red', 'mouseover')
應用示例	（新）JS實現決策報表報表塊鼠标所在單元格或行的樣式.fr

3.2 單元格所在行顔色變化

方法	makeHeightLine(color, mouseset)	鼠标移動時單元格所在行顔色發生變化
參數1	color	color： string 類型，顔色
參數2	mouseset	鼠标的操作 mouseover 鼠标懸浮 mousedown 鼠标點擊缺省，鼠标懸浮加點擊
示例	鼠标懸浮時該行顯示紅色：_g().getWidgetByName('report1').makeHeightLine('red', 'mouseover')
應用示例	（新）JS實現決策報表報表塊鼠标所在單元格或行的樣式.frm

3.3 單元格所在行顔色是否變化

方法	makeHeightCellHold(color, change)	鼠标移動時單元格所在行顔色是否保持不變
參數1	color	color： string 類型，顔色
參數2	change	change：bool類型，true 爲保持不變
示例	顔色保持紅色不變：_g().getWidgetByName("report0").makeHeightCellHold('red', true);
應用示例	（新）JS實現決策報表報表塊鼠标所在單元格或行的樣式.frm

3.4 改變單元格所在行字體樣式

方法	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實現決策報表報表塊鼠标所在單元格或行的樣式.fr

3.5 改變單元格字體樣式

方法	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

3.6 報表塊跑馬燈


方法	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

3.7 隐藏報表塊滾動條

方法	setVScrollBarVisible(visible)	隐藏當前報表塊的滾動條
參數	visible	visible：bool類型，false 隐藏
示例	隐藏 report0 報表塊的滾動條：_g().getWidgetByName('report0').setVScrollBarVisible(bool)
應用示例	（新）JS實現報表塊隐藏滾動條.frm

3.8 獲取報表塊當前頁碼數

方法	getPageIndex()	獲取當前報表塊當前頁碼數
示例	獲取 report0 報表塊當前的頁碼：_g().getWidgetByName("report0").getPageIndex()
應用示例	（新）JS實現報表按鈕獲取報表塊的頁碼數.frm

3.9 獲取報表塊總頁碼數

方法	getTotalPage()	獲取當前報表塊總頁碼數
示例	獲取 report0 報表塊當前的頁碼：_g().getWidgetByName("report0").getTotalPage()
應用示例	（新）JS實現報表按鈕獲取報表塊的頁碼數.frm

3.10 隐藏Tab塊tabpane

方法	invisible()	獲取當前報表塊總頁碼數
示例	隐藏 tabpane0 ：g().getWidgetByName('tabpane0').invisible()
應用示例	（新）JS實現報表按鈕獲取報表塊的頁碼數.frm

3.11 隐藏參數面板

方法	_g().parameterEl.resizableContainer.doClick()	獲取當前報表塊總頁碼數
示例	隐藏參數面板：_g().parameterEl.resizableContainer.doClick()
應用示例	（新）JS隐藏參數面板.frm

3.12 獲取視圖樹葉子節點

方法	getSelectedValue()	獲取視圖樹葉子節點
示例	獲取視圖樹葉子節點：_g().getWidgetByName('treeEditor0').getSelectedValue()
應用示例	（新）getSelectedValue獲取視圖樹葉子節點值.fr

3.13 鼠标懸浮顯示提示框

方法	makeHoverTooltip(cell, text)	鼠标在單元格上懸浮時，顯示提示内容
參數1	cell：字符串，單元格
參數2	text：字符串，懸浮要顯示的文本
示例	鼠标懸浮在A1單元格時，顯示銷量字樣：_g().getWidgetByName("report0").makeHoverTooltip('A1', '銷量');

3.14 跳轉到指定組件位置

方法	element[0].scrollIntoView()	跳轉到指定組件位置
示例	點擊跳轉到 Chart1圖表位置：_g().getWidgetByName("Chart1").element[0].scrollIntoView()

3.15 獲取單元格值

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

3.16 給單元格賦值

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

3.17 隐藏全部Tab塊

方法	invisible()	隐藏全部Tab塊
示例	隐藏Tab塊：_g().getWidgetByName('tabpane0').invisible()
應用示例	（新）JS實現隐藏全部tab塊标題-示例一.frm

3.18 隐藏對單個Tab塊

方法	setTabVisible("Tabname", fals)	設置Tab是可見
參數1	Tabname	Tabname：string，Tab 名稱
參數2	visible	visible：boolean，是否顯示，true 可見，false 不可見
示例	設置 Tab1 不顯示_g().getWidgetByName("tablayout0").setTabVisible("tab1", false)

3.19 點擊跳轉超鏈接

方法	changeParameter(Parameter)	點擊跳轉超鏈接
參數	Parameter	json 格式，報表參數
示例	點擊實現超鏈接：_g().getWidgetByName('chart0').changeParameter({"area": area})

3.20 視圖樹賦值時自動展開有值節點

方法	enableAutoExpand()	視圖樹賦值時自動展開有值節點
示例	點擊實現超鏈接：this.enableAutoExpand()

3.21 獲取控件

方法	_g().parameterEl.getWidgetByName('comboCheckBox')	獲取控件
參數	comboCheckBox	comboCheckBox：控件名
示例	獲取控件comboCheckBox0：_g().parameterEl.getWidgetByName('comboCheckBox0')

已經是第一篇

已經是最後一篇

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

文檔回饋

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

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

不再提示

5s后關閉

決策報表新自适應_JS使用