表格物件API

和 10.0 差別：

10.0 無此類API

安裝了「FineVis資料視覺化」插件 V1.8.0 及之後版本，FVS 視覺化看板支援 getCell、getRow、getColumn、getRowCount、getColumnCount、onMouseClick、onMouseMoveInCell、scrollTo、getScrollOffset、setRadius、showToolTip API。

row：number

col：number

注： 合併的儲存格，col、row 需要輸入合併後儲存格的首行號/首列號，否則傳回 undefined

row：儲存格行號，數字，從 1 開始

col：儲存格列號，數字，從 1 開始

object

範例1：若獲取到的報表塊定義為 report，獲取該報表塊的 A1 儲存格

report.getCell(1,1);

範例2：決策報表中獲取 report0 報表塊中 A1 儲存格

_g().getWidgetByName('report0').getCell(1,1);

範例3：普通報表中獲取 A1 儲存格

_g().getCell(1,1);

範例4：將普通報表中 A1 儲存格的字體設定為紅色、14 號

_g().getCell(1,1).setStyle({
	fontSize: 14,
	color: 'red'
});

範例5：將決策報表中 report0 報表塊 A1 儲存格的字體設定為紅色、14 號

_g().getWidgetByName('report0').getCell(1,1).setStyle({
	fontSize: 14,
	color: 'red'
});

範例6：獲取 FVS視覺化看板中「表格1」組件中 A1 儲存格

duchamp.getWidgetByName("表格1").getCell(1,1);

範例7：將 FVS 視覺化看板中「表格1」組件 A1 儲存格的字體設定為紅色、20 號

duchamp.getWidgetByName("表格1").getCell(1,1).setStyle({
	fontSize: 20,
	color: 'red'
});

點選按鈕，將決策報表中 report0 報表塊 A1 儲存格的字體設定為紅色、14 號：

點選可下載範本：获取单元格后修改单元格样式.frm

FVS 視覺化看板：JS修改表格组件单元格样式.fvs

index：number

index：行號，數字，從 1 開始

object

範例1：若獲取到的報表塊定義為 report，獲取該報表塊第一行儲存格物件

report.getRow(1);

範例2：決策報表中獲取 report0 報表塊中第一行儲存格物件

_g().getWidgetByName('report0').getRow(1);

範例3：普通報表中獲取第一行儲存格物件

_g().getRow(1);

範例4：將普通報表中，第一行儲存格的字體都設定為紅色、14號

_g().getRow(1).setStyle({
	fontSize: 14,
	color: 'red'
});

範例5：將決策報表中 report0 報表塊的第一行儲存格的字體都設定為紅色、14 號

_g().getWidgetByName('report0').getRow(1).setStyle({
	fontSize: 14,
	color: 'red'
});

範例6：獲取 FVS 視覺化看板中「表格1」組件中第一行儲存格物件

duchamp.getWidgetByName("表格1").getRow(1);

範例7：將 FVS 視覺化看板中「表格1」組件的第一行儲存格的字體都設定為紅色、20 號

duchamp.getWidgetByName("表格1").getRow(1).setStyle({
	fontSize: 20,
	color: 'red'
});

點選按鈕，將決策報表中 report0 報表塊的第一行儲存格的字體都設定為紅色、14 號：

點選可下載範本：获取行后修改行单元格样式.frm

FVS 視覺化看板：JS修改表格组件行单元格样式.fvs

index：number

index：列號，數字，從 1 開始

object

範例1：若獲取到的報表塊定義為 report，獲取該報表塊第一欄儲存格物件

report.getColumn(1);

範例2：決策報表中獲取 report0 報表塊中第一欄儲存格物件

_g().getWidgetByName('report0').getColumn(1);

範例3：普通報表中獲取第一欄儲存格物件

_g().getColumn(1)

範例4：將普通報表中，第一欄儲存格的字體都設定為紅色、14 號

_g().getColumn(1).setStyle({
	fontSize: 14,
	color: 'red'
});

範例5：將決策報表中 report0 報表塊的第一欄儲存格的字體都設定為紅色、14 號

_g().getWidgetByName('report0').getColumn(1).setStyle({
	fontSize: 14,
	color: 'red'
});

範例6：獲取 FVS 視覺化看板中「表格1」組件中第一欄儲存格物件

duchamp.getWidgetByName("表格1").getColumn(1);

範例7：將 FVS 視覺化看板中「表格1」的第一欄儲存格的字體都設定為紅色、20 號

duchamp.getWidgetByName("表格1").getColumn(1).setStyle({
	fontSize: 20,
	color: 'red'
});

點選按鈕，將決策報表中 report0 報表塊的第一欄儲存格的字體都設定為紅色、14 號：

點選可下載範本：获取列后修改列单元格样式.frm

FVS 視覺化看板：JS修改表格组件列单元格样式.fvs

-

-

number

範例1：若獲取到的報表塊定義為 report，獲取該報表塊的總行數

report.getRowCount();

範例2：決策報表中獲取 report0 報表塊的總行數

_g().getWidgetByName('report0').getRowCount();

範例3：普通報表中，獲取儲存格行數：

_g().getRowCount();

範例4：獲取 FVS 視覺化看板中「表格1」組件的總行數

duchamp.getWidgetByName("表格1").getRowCount();

範例5：獲取決策報表中 report0 報表塊的總行數後，透過彈窗顯示總行數

var a=_g().getWidgetByName('report0').getRowCount();
FR.Msg.alert("提示","報表塊共"+a +"行");

點選按鈕，獲取決策報表中 report0 報表塊的總行數：

點選可下載範本：获取表格共有多少行.frm

FVS 視覺化看板：JS获取表格组件总行数.fvs

-

-

number

範例1：若獲取到的報表塊定義為 report，獲取該報表塊的總列數

report.getColumnCount();

範例2：獲取決策報表中 report0 報表塊的總列數

_g().getWidgetByName('report0').getColumnCount();

範例3：普通報表中，獲取儲存格行數

_g().getColumnCount();

範例4：獲取 FVS 視覺化看板中「表格1」組件的總列數

duchamp.getWidgetByName("表格1").getColumnCount();

範例5：獲取決策報表中 report0 報表塊的總列數後，透過彈窗顯示總列數

var a=_g().getWidgetByName('report0').getColumnCount();
FR.Msg.alert("提示","報表塊共"+a +"列");

點選按鈕，獲取決策報表中 report0 報表塊的總列數：

點選可下載範本：获取表格共有多少列.frm

FVS 視覺化看板：JS获取表格组件总列数.fvs

func：Function

func：回呼方法，函式形式

-

範例1：若獲取到的報表塊定義為 report，給該報表塊綁定一個點選後彈窗提醒的事件

report.onMouseClick(
	function() {
		FR.Msg.alert("警告", "不要亂動");
	}
);

範例2：給決策報表中 report0 報表塊綁定一個點選後彈窗提醒的事件

_g().getWidgetByName('report0').onMouseClick(
		function() {
			FR.Msg.alert("警告","不要亂動");
		}
	);

範例3：給普通報表綁定一個點選後彈窗提醒的事件

_g().onMouseClick(
		function() {
			FR.Msg.alert("警告","不要亂動");
		}
	);

範例4：給 FVS 視覺化看板中「表格1」組件綁定一個點選後彈窗提醒的事件

duchamp.getWidgetByName("表格1").onMouseClick(
    function() {
	duchamp.Msg.alert({
           title: "警告" ,
           message:"不要亂動"});
	}
);

範例5：給決策報表 report0 報表塊綁定一個點選後開啟跑馬燈的事件

_g().getWidgetByName('report0').onMouseClick(
	function() {
		_g().getWidgetByName('report0').startMarquee()
	}
);

給決策報表 report0 報表塊綁定點選後開啟跑馬燈的事件，當滑鼠點選報表塊時，開啟跑馬燈：

點選可下載範本：点击表格开启跑马灯.frm

FVS 視覺化看板：点击表格开启跑马灯.fvs

func：Function

func：回呼方法，函式形式

-

範例1：若獲取到的報表塊定義為 report，給該報表塊綁定一個移入表格後彈窗提醒的事件

report.onMouseMoveInCell(
	function() {
		FR.Msg.alert("警告", "不要亂動");
	}
);

範例2：給決策報表中 report0 報表塊綁定一個滑鼠移入後彈窗提醒的事件

_g().getWidgetByName('report0').onMouseMoveInCell(
		function() {
			FR.Msg.alert("警告","不要亂動");
		}
	);

範例3：給普通報表綁定一個滑鼠移入後彈窗提醒的事件

_g().onMouseMoveInCell(
	function() {
		FR.Msg.alert("警告", "不要亂動");
	}
);

範例4：給 FVS 視覺化看板中「表格1」組件綁定一個移入表格後彈窗提醒的事件

duchamp.getWidgetByName("表格1").onMouseMoveInCell(
    function() {
	duchamp.Msg.alert({
           title: "警告" ,
           message:"不要亂動"});
	}
);

範例5：給決策報表 report0 報表塊綁定一個滑鼠移入後開啟跑馬燈的事件

_g().getWidgetByName('report0').onMouseMoveInCell(
	function() {
		_g().getWidgetByName('report0').startMarquee()
	}
);

給決策報表 report0 報表塊綁定滑鼠移入後彈窗事件，當滑鼠移入報表塊時，彈窗提醒：

點選可下載範本：鼠标移入表格时弹窗提醒.frm

FVS 視覺化看板：鼠标移入表格组件弹窗提醒.fvs

func：Function

func：回呼方法，函式形式

-

範例1：若獲取到的報表塊定義為 report，給該報表塊綁定一個移出表格儲存格後彈窗提醒的事件

report.onMouseMoveOutCell(
	function() {
		FR.Msg.alert("警告", "你已不在表格上");
	}
);

範例2：給決策報表中 report0 報表塊綁定一個移出表格儲存格後彈窗提醒的事件

_g().getWidgetByName('report0').onMouseMoveOutCell(
		function() {
			FR.Msg.alert("警告","你已不在表格上");
		}
	);

範例3：給普通報表綁定一個滑鼠移出後彈窗提醒的事件

_g().onMouseMoveOutCell(
		function() {
			FR.Msg.alert("警告","你已不在表格上");
		}
	);

範例4：給決策報表 report0 報表塊綁定一個移出表格儲存格後表格第一行顏色變化的事件：

_g().getWidgetByName('report0').onMouseMoveOutCell(
	function() {
		_g().getWidgetByName('report0').getRow(1).setStyle({
			color: 'red'
		});
	}
);

範例5：給 FVS 視覺化看板中「表格1」組件綁定一個移出儲存格後第一行變色事件

duchamp.getWidgetByName("表格1").onMouseMoveOutCell(
        function() {
                duchamp.getWidgetByName("表格1").getRow(1).setStyle({
                        fontSize: 20,
                        color: 'red'
                });
        }
);

給決策報表 report0 報表塊綁定滑鼠移出儲存格後第一行變色事件，當滑鼠移出 A1 儲存格後，報表塊第一行顏色變化成紅色：

點選可下載範本：鼠标移出表格时颜色变化.frm

FVS 視覺化看板：鼠标移出单元格颜色变化.fvs

opts: Object 

{

    x: number, 

    y: number 

}

opts:   捲動距離，json 格式

• x：橫向捲動距離，數字體別，可選欄位，不指定則保持現狀

• y：垂直捲動距離，數字體別，可選欄位，不指定則保持現狀

-

範例1：若獲取到的報表塊定義為 report，設定該報表塊橫向捲動 50 縱向捲動 100 ：

report.scrollTo({
x: 50,//橫向
y: 100 //縱向
});

範例2：將決策報表中 report0 報表塊橫向捲動 50 縱向捲動 100：

_g().getWidgetByName('report0').scrollTo({
x: 50,//橫向
y: 100 //縱向
});

範例3：將普通報表橫向捲動 50 縱向捲動 100：

_g().scrollTo({
x: 50,//橫向
y: 100 //縱向
});

範例4：將 FVS 視覺化看板中「表格1」組件橫向捲動 50 縱向捲動 100：

duchamp.getWidgetByName("表格1").scrollTo({
       x: 50,//橫向
       y: 100 //縱向
});

範例5：將決策報表 report0 報表塊橫向捲動 50 縱向捲動 100：

_g().getWidgetByName('report0').scrollTo({
y: 100 //縱向
});

將決策報表 report0 報表塊橫向不變，縱向捲動 100：

點選可下載範本：设置报表块自动滚动到某个位置.frm

FVS 視覺化看板：设置表格滚动到某个位置.fvs

-

-

opts: Object 

{

    x: number, 

    y: number 

}

opts:   捲動位置，json 格式

• x：橫向捲動距離，數字體別，可選欄位，不指定則保持現狀

• y：垂直捲動距離，數字體別，可選欄位，不指定則保持現狀

範例1：若獲取到的報表塊定義為 report，獲取該報表塊當前捲動到的位置

report.getScrollOffset();

範例2：獲取決策報表中 report0 報表塊當前捲動到的位置

_g().getWidgetByName('report0').getScrollOffset();

範例3：獲取普通報表當前縱向捲軸所在的位置

var a=_g().getScrollOffset().y;
FR.Msg.alert("提示","當前縱向位置"+a );

範例4：獲取 FVS 視覺化看板中「表格1」組件當前縱向捲動到的位置

duchamp.getWidgetByName("表格1").getScrollOffset().y;

範例5：獲取決策報表中 report0 報表塊當前捲動到的位置並彈窗提醒當前位置

var a=_g().getWidgetByName('report0').getScrollOffset().y;
FR.Msg.alert("提示","當前縱向位置"+a );

獲取決策報表中 report0 報表塊當前捲動到的位置並彈窗提醒當前位置：

點選可下載範本：获取报表块滚动到的位置.frm

FVS 視覺化看板：获取表格滚动到的某个位置.fvs

radius: number

range: Object 

{

    row: [row1:number,row2:number,), 

    column: [column1:number,column  2:number], 

    cell: [col:number, row:number] 

}

single: boolean

1）radius：圓角程度，數字

2）range：圓角範圍，json 格式，可選欄位，預設為整個表格儲存格

• row：圓角行的範圍，可選欄位，代表 row1 行 到 row2 行，row1 和row2 都是數字

• column：圓角列的範圍，可選欄位，代表 column1 列到 column2 列，column1 和 column2 都是數字

• cell：圓角儲存格的範圍，可選欄位，代表col 列，row 行的儲存格，col 和 row 都是數字

3）single: 決定圓角的形式，布林型，預設為false

• true：選區內每個儲存格圓角

• false：整個選區為圓角

-

-

範例1：若獲取到的報表塊定義為 report，給該報表塊整體設定一個 25 的圓角：

report.setRadius(25);

範例2：給決策報表中 report0 報表塊整體設定一個 25 的圓角：

_g().getWidgetByName('report0').setRadius(25);

範例3：給決策報表中 report0 報表塊 A1 儲存格設定一個 25 的圓角：

_g().getWidgetByName('report0').setRadius(25, {
cell: [1,1]
}, false); 

範例4：給決策報表中 report0 報表塊第 1 行到第 3 行整體設定一個 25 的圓角：

_g().getWidgetByName('report0').setRadius(25, {
row: [1,3],
}, false); 

範例5：給決策報表中 report0 報表塊第 2 列到第 5 列整體設定一個 25 的圓角：

_g().getWidgetByName('report0').setRadius(25, {
column: [2,5]
}, false); 

範例6：給普通報表第 1 行到第 3 行整體設定一個 25 的圓角：

_g().setRadius(25, {
row: [1,3],
}, false); 

範例7：給 FVS 視覺化看板中「表格1」組件儲存格整體設定一個 25 的圓角：

duchamp.getWidgetByName("表格1").setRadius(25);

點選按鈕，給決策報表中 report0 報表塊第 1 行設定一個 25 的圓角：

點選可下載範本：设置单元格圆角.frm

FVS 視覺化看板：设置单元格行圆角.fvs

opts: Object

{

    show: boolean,

    content: { 

        text: string, // 文字

        image: string, // 圖片

        header: string // 標題

    }

    style: { 

    }

}

opts: 彈窗選項，是個物件

1）show：是否會出現彈窗，布林型，true 為出現，false 為不出現

2）content：可選欄位，不指定即為顯示文字，內容為儲存格中的值

• text: 提示的內容，字串

• image: 圖片 URL 路徑，字串，圖片格式支援 pn   g、jpg。圖片來源可以為網頁圖片，如：

https://www.fanruan.com/images/logo-fanruan.png

也可以將圖片放置在報表工程目錄 %FR_HOME%\webapps\webroot 下，透過 URL 存取。如：

http://localhost:8075/webroot/11.jpg

• header: 標題

3）style: 可選欄位，不指定則為預設樣式，支援的樣式可參考：儲存格樣式屬性style

-

-

範例1：若獲取到的報表塊定義為 report，給該報表塊設定一個標題為“提示”，內容為紅色“地區銷售資料”字樣的提示框： 

report.showToolTip({
	show: true, // 是否會出現彈窗
	content: { // 可選欄位，不指定即為顯示文字
		text: "地區銷售資料", // 文字
		header: "提示" // 標題
	},
	style: { // 可選欄位，不指定為預設樣式，支援css標準樣式的欄位
		color: "#DC143C"
		//符合css規則
	}
});

範例2：給決策報表中 report0 報表塊設定一個標題為“提示”，內容為紅色“地區銷售資料”字樣的提示框： 

_g().getWidgetByName('report0').showToolTip({
	show: true, // 是否會出現彈窗
	content: { // 可選欄位，不指定即為顯示文字，內容為cell.getValue();
		text: "地區銷售資料", // 文字
		header: "提示" // 標題
	},
	style: { // 可選欄位，不指定為預設樣式，支援css標準樣式的欄位
		color: "#DC143C"
		//符合css規則
	}
});

範例3：給普通報表設定一個標題為“提示”，內容為網頁圖片帆軟 LOG 的提示框： 

_g().showToolTip({
	show: true, // 是否會出現彈窗
	content: { // 可選欄位，不指定即為顯示文字，內容為cell.getValue();
		image: "https://www.fanruan.com/images/logo-fanruan.png",
		header: "提示" // 標題
	}
});

範例4：給決策報表中 report0 報表塊設定一個沒有標題，內容為紅色“地區銷售資料”字樣的提示框： 

_g().showToolTip({
	show: true, // 是否會出現彈窗
	content: { // 可選欄位，不指定即為顯示文字，內容為cell.getValue();
		image: "https://www.fanruan.com/images/logo-fanruan.png",
		header: "提示" // 標題
	}
});

範例5：給 FVS 視覺化看板中「表格1」組件設定一個標題標題為“提示”，內容為儲存格值預設樣式的提示框

duchamp.getWidgetByName("表格1").showToolTip({
	show: true, // 是否會出現彈窗
	content: { 
		header: "提示" // 標題
	}
});

給決策報表中 report0 報表塊設定一個標題為“提示”，內容為紅色“地區銷售資料”字樣的提示框： 

點選可下載範本：鼠标悬浮单元格文字提示.frm

FVS 視覺化看板：鼠标悬浮单元格文字提示.fvs