添加基於價值CSS/JQuery的條件格式的Oracle APEX形式

Question

• 甲骨文= 11G
• 的Apex = 4.2.6

我的Oracle APEX中一個非常大的自定義的矩陣格柵。 這將顯示月份的名稱，地區和日期編號（即1,2,3）作爲標題。

隨着行數的減少350.在每個單元中是一個任務類型。所以每個員工每天都有一項任務。

這顯示在交互式報告中。

我現在需要做的是強調根據任務類型特定細胞..

因此，例如背景細胞會紅生病，綠色週末等。

我可以使用額外的列

for case when "MD_TS_DETAIL"."JOB_TYPE_ID"= 20 then '#b0c4de' 
     when "MD_TS_DETAIL"."JOB_TYPE_ID" = 115 then '#000000' 
    end text_color_1, 

case when "MD_TS_DETAIL"."JOB_TYPE_ID"= 20 then 'blue' 
     when "MD_TS_DETAIL"."JOB_TYPE_ID" = 115 then 'red' 
    end back_color_1 

然後在列屬性調用。但要做到這一點，我需要做到這一點，達到31次，而不是很有活力。

或者可以使用動作選擇器內的高光，但是這也需要對每個單詞和每種顏色使用1個過濾器。這再次不是一個好的解決方案。

所以可以根據一個值動態地調用CSS或jQuery。

因爲我不認爲這是可能的

Answer 1

是這樣的？ http://www.grassroots-oracle.com/2013/06/highlight-cell-background-in-apex-report.html

對我來說這是早期的jQuery，所以它可以清理，但看起來它可能會幫助你完成你的任務。

Answer 2

編輯：這可能不是一個很好的答案給予你矩陣的大小，因爲它會導致額外的200kB或更多的不必要的數據傳輸。客戶端在這裏是正確的方法。

您可以將邏輯放在您的報表查詢中。假設你已經使用class_name1，class_name2等來設置你的CSS，這樣的事情可能會做到這一點。請記住將列顯示類型設置爲「標準報告列」，以便解釋HTML。

select '<div class="'|| 
     case MD_TS_DETAIL.JOB_TYPE_ID 
     when 20 then 'class_name1' 
     when 115 then 'class_name2' 
     -- etc 
     end||'">'||YOUR_COLUMN||'</div>' 
... 

Answer 3

使用CSS和jQuery的解決方案。 正如你所說，你需要一個客戶端解決方案。我希望使用動態操作，以便從客戶端獲取資源。

請按照以下步驟操作。

1. 創建動態操作（組件視圖 - >動態操作 - >按+按鈕）。請對動態操作的屬性進行一些更改。 （事件 - 頁面加載，客戶端和服務器端條件沒有條件）。
2. 展開新添加的動態行爲（讓我們假設名稱爲AddClass），你可以找到兩個文件夾/下就是行動，真和假。在真操作中添加名爲show的新操作。
3. 進行一些更改下真外加的動作（選擇類型 - JavaScript表達式，在JavaScript表達式粘貼下面的代碼。）

$(document).ready(function() { 
 
    $("td:nth-child(6)").each(function() { 
 
     if ($(this).text() === "sick") { 
 
      $(this).parent().children().css({'background-color': 'red'}); 
 
     } 
 
     else if($(this).text() === "weekend"){ 
 
      $(this).parent().children().css({'background-color': 'green'}); 
 
     } 
 
    }); 
 
});

備註：

1. 這代表TD：第n個孩子（6），在列所呈現表中的6可用病態/週末數據。 （更改數字6到3，第3列提供的數據）

2. 上面的代碼將突出整行，如果你需要的是隻更新特定列使用下面的代碼。

$(document).ready(function() { 
 
    $("td:nth-child(6)").each(function() { 
 
     if ($(this).text() === "sick") { 
 
      $(this).css({'background-color': 'red'}); 
 
     } 
 
     else if($(this).text() === "weekend"){ 
 
      $(this).css({'background-color': 'green'}); 
 
     } 
 
    }); 
 
});