當前為10.0版本文檔，更多實例內容將在最新幫助文檔中展現，點選跳轉至 最新版幫助文檔

修改儲存格背景API

一、概述

  1. 本文介紹的是儲存格背景的JS API方法。使用【addEffect】 方法，【type】 參數的四個值分別對應【儲存格所在列變色】、【儲存格所在欄變色】、【儲存格所在列欄變色】、【儲存格變色】。

方法

addEffect(type, opts)

滑鼠點選或者懸浮時，儲存格或所在列欄背景顏色變化。

參數

type: string,

opts: {

color: string, 

trigger: string，

single: boolean

}

【type】：變色型別，字串。  

【highlightRow】：滑鼠點選/懸浮時儲存格所在列變色。

【highlightCol】：滑鼠點選/懸浮時儲存格所在欄變色。

【highlightCross】：滑鼠點選/懸浮時儲存格所在列欄變色。

【highlightCell】：滑鼠點選/懸浮時儲存格變色。

【opts】：變化屬性，json 格式。

【color】: 變化的顏色，顏色代碼，字串。

【trigger】: 滑鼠的操作，字串，預設為【mouseover】。【mouseover】 ：滑鼠懸浮。【mousedown】：滑鼠點選。

【single】：恢復邏輯，布林型，預設為【true】。【true】：滑鼠點選/懸浮其他位置時恢復。【false】：滑鼠再次點選/懸浮此位置時恢復。

傳回值

void

行動端

支援行動端。

二、儲存格所在列變色

  1. 設定【addEffect】第一個參數【type】值為 【highlightRow】 ，滑鼠點選或者懸浮儲存格，儲存格所在列背景顏色發生改變。

1
代碼範例。

  1. 範例1：若獲取到的報表物件定義為 【report】 ，滑鼠懸浮儲存格時所在列背景顯示為紅色，離開時恢復。具體代碼如下代碼塊1所示。

  2. 範例2：若獲取到的報表物件定義為 【report】 ，滑鼠點選儲存格時所在列背景顯示為紅色，再次點選恢復。具體代碼如下代碼塊2所示。

  3. 範例3：普通報表中，滑鼠懸浮儲存格時，所在列背景顯示為紅色，離開時恢復。具體代碼如下代碼塊3所示。

  4. 範例4：普通報表中，滑鼠點選儲存格時，所在列背景顯示為紅色，再次點選恢復。具體代碼如下代碼塊4所示。

  5. 範例5：決策報表中，滑鼠懸浮 【report0】 報表塊儲存格時，所在列背景顯示為紅色，離開時恢復。具體代碼如下代碼塊5所示。

  6. 範例6：決策報表中，滑鼠點選 【report0】 報表塊儲存格時，所在列背景顯示為紅色，再次點選恢復。具體代碼如下代碼塊6所示。

<!-- 滑鼠懸浮儲存格時所在列背景顯示為紅色，離開時恢復。 -->
report.addEffect('highlightRow',{
	color: 'red',
	trigger: 'mouseover',
});


<!-- 滑鼠點選儲存格時所在列背景顯示為紅色，再次點選恢復。 -->
report.addEffect('highlightRow',{
    color: 'red',
    trigger: 'mousedown',
    single:false
});


<!-- 滑鼠懸浮儲存格時，所在列背景顯示為紅色，離開時恢復。 -->
_g().addEffect('highlightRow', {
	color: 'red',
	trigger: 'mouseover',
});


<!-- 滑鼠點選儲存格時，所在列背景顯示為紅色，再次點選恢復。 -->
_g().addEffect('highlightRow',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

 

<!-- 滑鼠懸浮 【report0】 報表塊儲存格時，所在列背景顯示為紅色，離開時恢復。 -->
_g().getWidgetByName('report0').addEffect('highlightRow', {
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選 【report0】 報表塊儲存格時，所在列背景顯示為紅色，再次點選恢復。 -->
_g().getWidgetByName('report0').addEffect('highlightRow', {
	color: 'red',
	trigger: 'mousedown',
	single: false
});


2
應用範例。

  1. 範例1：滑鼠懸浮儲存格時，所在列背景顏色顯示為紅色，離開時恢復。點選下載範本：儲存格所在列變色.cpt。如下圖1所示。

  2. 範例2：滑鼠點選儲存格時，所在列背景顏色顯示為紅色，再次點選恢復。點選下載範本：儲存格所在列變色滑鼠點選恢復.cpt。如下圖2所示。


1.gif


2.gif

 

三、儲存格所在欄變色

  1. addEffect 第一個參數 type 值為 【highlightCol】 時，滑鼠點選或者懸浮儲存格，儲存格所在欄背景顏色發生改變。

1
代碼範例。

  1. 範例1：若獲取到的報表物件定義為 【report】 ，滑鼠懸浮儲存格時所在欄背景顏色顯示為紅色，離開時恢復。具體代碼如下代碼塊1所示。

  2. 範例2：若獲取到的報表物件定義為 【report】 ，滑鼠點選儲存格時所在欄背景顏色顯示為紅色，再次點選恢復。具體代碼如下代碼塊2所示。

  3. 範例3：普通報表中，滑鼠懸浮儲存格時，所在欄背景顏色顯示為紅色，離開時恢復。具體代碼如下代碼塊3所示。

  4. 範例4：普通報表中，滑鼠點選儲存格時，所在欄背景顏色顯示為紅色，再次點選恢復。具體代碼如下代碼塊4所示。

  5. 範例5：決策報表中，滑鼠懸浮 【report0】 報表塊儲存格時，所在欄背景顏色顯示為紅色，離開時恢復。具體代碼如下代碼塊5所示。

  6. 範例6：決策報表中，滑鼠點選 【report0】 報表塊儲存格時，所在欄背景顏色顯示為紅色，再次點選恢復。具體代碼如下代碼塊6所示。

<!-- 滑鼠懸浮儲存格時所在欄背景顏色顯示為紅色，離開時恢復。 -->
report.addEffect('highlightCol',{
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選儲存格時所在欄背景顏色顯示為紅色，再次點選恢復。 -->
report.addEffect('highlightCol',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

 

<!-- 滑鼠懸浮儲存格時，所在欄背景顏色顯示為紅色，離開時恢復。 -->
_g().addEffect('highlightCol', {
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選儲存格時，所在欄背景顏色顯示為紅色，再次點選恢復。 -->
_g().addEffect('highlightCol',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

 

<!-- 滑鼠懸浮 【report0】 報表塊儲存格時，所在欄背景顏色顯示為紅色，離開時恢復。 -->
_g().getWidgetByName('report0').addEffect('highlightCol', {
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選 【report0】 報表塊儲存格時，所在欄背景顏色顯示為紅色，再次點選恢復。 -->
_g().getWidgetByName('report0').addEffect('highlightCol', {
	color: 'red',
	trigger: 'mousedown',
	single: false
});

 

2
應用範例。

  1. 範例1：滑鼠懸浮儲存格時，所在欄背景顏色顯示為紅色，離開時恢復。點選下載範本：儲存格所在欄變色.cpt。如下圖1所示。

  2. 範例2：滑鼠點選儲存格時，所在欄背景顏色顯示為紅色，再次點選恢復。點選下載範本：儲存格所在欄變色滑鼠點選恢復.cpt。如下圖2所示。


3.gif


4.gif

 

四、儲存格所在列欄變色

  1. 設定【addEffect】第一個參數【 type 】值為 【highlightCross】 ，滑鼠點選或者懸浮儲存格，儲存格所在的列欄背景顏色發生改變。

1
代碼範例。

  1. 範例1：若獲取到的報表物件定義為【report】 ，滑鼠懸浮儲存格時所在列欄背景顏色顯示為紅色，離開時恢復。具體代碼如下代碼塊1所示。

  2. 範例2：若獲取到的報表物件定義為【report】 ，滑鼠點選儲存格時所在列欄背景顏色顯示為紅色，再次點選恢復。具體代碼如下代碼塊2所示。

  3. 範例3：普通報表中，滑鼠懸浮儲存格時，所在列欄背景顏色顯示為紅色，離開時恢復。具體代碼如下代碼塊3所示。

  4. 範例4：普通報表中，滑鼠點選儲存格時，所在列欄背景顏色顯示為紅色，再次點選恢復。具體代碼如下代碼塊4所示。

  5. 範例5：決策報表中，滑鼠懸浮 【report0】 報表塊儲存格時，所在列欄背景顏色顯示為紅色，離開時恢復。具體代碼如下代碼塊5所示。

  6. 範例6：決策報表中，滑鼠點選 【report0】 報表塊儲存格時，所在列欄背景顏色顯示為紅色，再次點選恢復。具體代碼如下代碼塊6所示。

<!-- 滑鼠懸浮儲存格時所在列欄背景顏色顯示為紅色，離開時恢復。 -->
report.addEffect('highlightCross',{
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選儲存格時所在列欄背景顏色顯示為紅色，再次點選恢復。 -->
report.addEffect('highlightCross',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

 

<!-- 滑鼠懸浮儲存格時，所在列欄背景顏色顯示為紅色，離開時恢復。 -->
_g().addEffect('highlightCross', {
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選儲存格時，所在列欄背景顏色顯示為紅色，再次點選恢復。 -->
_g().addEffect('highlightCross',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

 

<!-- 滑鼠懸浮 【report0】 報表塊儲存格時，所在列欄背景顏色顯示為紅色，離開時恢復。 -->
_g().getWidgetByName('report0').addEffect('highlightCross', {
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選 【report0】 報表塊儲存格時，所在列欄背景顏色顯示為紅色，再次點選恢復。 -->
_g().getWidgetByName('report0').addEffect('highlightCross', {
	color: 'red',
	trigger: 'mousedown',
	single: false
});

 

2
應用範例。

  1. 範例1：滑鼠懸浮儲存格時，所在列欄背景顏色顯示為紅色，離開時恢復。點選下載範本：儲存格所在列欄變色.cpt。如下圖1所示。

  2. 範例6：決策報表中，滑鼠點選 【report0】 報表塊儲存格時儲存格背景顏色顯示為紅色，再次點選恢復。點選下載範本：儲存格所在列欄變色滑鼠點選恢復.cpt。如下圖2所示。


5.gif


6.gif

 

五、儲存格變色

  1. 【addEffect】第一個參數 【type】值為 【highlightCell】 時，滑鼠點選或者懸浮儲存格，儲存格背景顏色發生改變。

1
代碼範例。

  1. 範例1：若獲取到的報表物件定義為【report】 ，滑鼠懸浮儲存格時儲存格背景顏色顯示為紅色，離開時恢復。具體代碼如下代碼塊1所示。

  2. 範例2：若獲取到的報表物件定義為【report】 ，滑鼠點選儲存格時儲存格背景顏色顯示為紅色，再次點選恢復。具體代碼如下代碼塊2所示。

  3. 範例3：普通報表中，滑鼠懸浮儲存格時儲存格背景顏色顯示為紅色，離開時恢復。具體代碼如下代碼塊3所示。

  4. 範例4：普通報表中，滑鼠點選儲存格時儲存格背景顏色顯示為紅色，再次點選恢復。具體代碼如下代碼塊4所示。

  5. 範例5：決策報表中，滑鼠懸浮 【report0】 報表塊儲存格時儲存格背景顏色顯示為紅色，離開時恢復。具體代碼如下代碼塊5所示。

  6. 範例6：決策報表中，滑鼠點選 【report0】 報表塊儲存格時儲存格背景顏色顯示為紅色，再次點選恢復。具體代碼如下代碼塊6所示。

<!-- 滑鼠懸浮儲存格時儲存格背景顏色顯示為紅色，離開時恢復。 -->
report.addEffect('highlightCell',{
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選儲存格時儲存格背景顏色顯示為紅色，再次點選恢復。 -->
report.addEffect('highlightCell',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

 

<!-- 滑鼠懸浮儲存格時儲存格背景顏色顯示為紅色，離開時恢復。 -->
_g().addEffect('highlightCell', {
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選儲存格時儲存格背景顏色顯示為紅色，再次點選恢復。 -->
_g().addEffect('highlightCell',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

 

<!-- 滑鼠懸浮 【report0】 報表塊儲存格時儲存格背景顏色顯示為紅色，離開時恢復。 -->
_g().getWidgetByName('report0').addEffect('highlightCell', {
	color: 'red',
	trigger: 'mouseover',
});

 

<!-- 滑鼠點選 【report0】 報表塊儲存格時儲存格背景顏色顯示為紅色，再次點選恢復。 -->
_g().getWidgetByName('report0').addEffect('highlightCell', {
	color: 'red',
	trigger: 'mousedown',
	single: false
});

 

2
應用範例。

  1. 範例1：滑鼠懸浮儲存格時儲存格背景顏色顯示為紅色，離開時恢復。點選下載範本：儲存格變色滑鼠離開恢復.cpt。如下圖1所示。

  2. 範例2：滑鼠點選儲存格時儲存格背景顏色顯示為紅色，再次點選恢復。點選下載範本：儲存格變色滑鼠點選恢復.cpt。如下圖2所示。

 

9.gif
7.gif


附件列表


主題： 11.0新增功能
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽

文 檔回 饋

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

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

不再提示

9s后關閉

反饋已提交

網絡繁忙