JS實現滑鼠點選儲存格字體變化

1.1 版本

1.2 預期效果

在實際應用中，希望實現滑鼠點選某個儲存格，儲存格內的字體會變化，進而達到突出說明的效果，如下圖所示：

1.3 實現思路

使用 JS 程式碼新增載入結束事件，設定當滑鼠點選儲存格時，儲存格內字體字體顯示為紅色粗體 14 號。

儲存格字體修改 JS API，請參見：修改儲存格字體API

2.1 範例一：滑鼠點選字體變化，點選其他時恢復

2.1.1 開啟範本

開啟內建範本：%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式報表.cpt

2.1.2 新增事件

菜單欄選擇「範本>範本 Web 屬性>分頁預覽設定」，選擇「為該範本單獨設定」，然後新增「載入結束事件」，如下圖所示：

JavaScript 程式碼如下：

_g().addEffect('setCellFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',//滑鼠懸浮則為 mouseover
	single: true
});

2.1.3 效果預覽

滑鼠點選儲存格，字體變化，如下圖所示：

注：不支援行動端

2.2 範例二：滑鼠點選字體變化，再次點選時恢復

2.2.1 新增事件

與範例一操作步驟相同，僅需修改 JavaScript 程式碼即可，JavaScript 程式碼如下：

_g().addEffect('setCellFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',
	single: false
});

2.2.2 效果預覽

注：不支援行動端

滑鼠點選儲存格，則儲存格所在列的字體都發生變化，例如滑鼠點選儲存格時字體顯示為紅色粗體 14 號。

3.1 範例一：滑鼠點選字體變化，點選其他時恢復

3.1.1 新增事件

與 2.1 節範例一操作步驟相同，僅需修改 JavaScript 程式碼即可，JavaScript 程式碼如下：

_g().addEffect('setRowFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',// 滑鼠懸浮則為 mouseover
	single: true
});

3.1.2 效果預覽

注：不支援行動端

3.2 範例二：滑鼠點選字體變化，再次點選時恢復

3.2.1 新增事件

與範例一操作步驟相同，僅需修改 JavaScript 程式碼即可，JavaScript 程式碼如下：

_g().addEffect('setRowFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',//滑鼠懸浮則為 mouseover
	single: false
});

3.2.2 效果預覽

注：不支援行動端