JS實現滑鼠懸浮同時改變多列背景色

1. 概述

1.1 預期效果

1)報表預覽時,希望滑鼠懸浮在表格上時,可以實現同時改變多列背景色,即以多列為一組來改變背景色。

2)可以自訂是否改變標題列的背景色。

以除標題列外每三列改變背景色為例,效果如下圖所示:

动画1.gif

1.2 實現思路

在分頁預覽設定介面新增 JS 載入結束事件,定義兩個參數title_countrow_count,前者為不變色的標題列數,後者為每幾列變色。

注:此方案不支援凍結欄。

2. 範例

2.1 準備範本

開啟%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式報表.cpt

2.2 新增 JS 事件

1)如下圖給開啟的行式報表新增一個「分頁預覽>載入結束」事件。

QQ图片20240813095535.png

2)事件設定介面需要新增兩個值為整數型態的參數title_countrow_count

title_count:用於定義標題列不變色,設定為 n,則報表預覽時滑鼠懸浮在前 n 列,前 n 列不會變色。

row_count:用於定義每幾列變色,設定為 n,則除標題列外,每 n 列同時變色。

1723514857678538.jpg

JavaScript 程式碼如下:

setTimeout(function() {
var move_color='#f0e229';//滑鼠懸浮的顏色
var out_color='#FFFFFF';//滑鼠離開的顏色
// .x-table td 為 cpt 範本格式
$(".x-table td").mousemove(function() {  
//alert('212');
    var titlecount = title_count;  //標題列
    var rowcount  = row_count;      //變色列數
    var id  = $(this).attr("id");  //儲存格id
    var num=id.search("-");         //獲取id中“-”符號第一次出現的索引  
    var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的列號  
    var id2=id.substr(num,id.length-num);  //截取id 
    var flag = Math.ceil((id1-titlecount) / rowcount); //判斷所指列第幾組
//計算起始列
    var rowstart = (flag-1)*rowcount + 1+titlecount;
//計算結尾列
    var rowend = flag * rowcount + titlecount;
//標題列不變色和所指列第幾組判定
     if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',move_color);
}
}
}); 
//下同上
$(".x-table td").mouseout(function() {  
    var rowcount  = row_count;
    var titlecount = title_count;
    var id  = $(this).attr("id");  
    var num=id.search("-");  //獲取id中“-”符號第一次出現的索引  
    var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的列號  
    var id2=id.substr(num,id.length-num);  //截取id 
    var b = "A";
    //  alert(b);
    var flag = Math.ceil((id1-titlecount) / rowcount);
//計算起始列
    var rowstart = (flag-1)*rowcount + 1 + titlecount;
//計算結尾列
    var rowend = flag * rowcount + titlecount;
if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',out_color);
}
}
}); 
}, 100);
显示代码

注:想要實現效果要確定此報表 A 欄的所有儲存格不與其他儲存格有合併操作,可以空出 A 欄並設定條件隱藏欄寬。

2.3 效果預覽

儲存報表,點選「分頁預覽」,效果如 1.1 節所示。

注:不支援行動端

3. 範本下載

附件列表


主題: 報表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
中文(繁體)

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

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

不再提示

9s后關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙

反饋已提交

網絡繁忙