添加基于值的CSS/JQuery条件格式Oracle Apex表单

Question

• Oracle=11G
• 顶点=4.2.6

我在OracleAPex中有一个非常大的自定义矩阵网格。这将以标题形式显示月份的名称、区域和日期（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

然后调用column属性。但要做到这一点，我需要做31次，而且不是很有活力。

或者可以在动作选择器中使用高亮显示，但这需要为每个单词和每种颜色设置一个过滤器。这同样不是一个好的解决方案。

因此，可以根据一个值动态地调用CSS或jQuery。

因为我认为这是不可能的

Answer 1

使用CSS和jQuery的解决方案正如您所提到的，您需要一个客户端解决方案。我更喜欢使用动态操作，这样它就可以从客户端获取资源。

请按照以下步骤操作。

1. 创建动态动作（组件视图-->动态动作-->按+按钮）。请对动态操作的属性进行一些更改。（事件-页面加载，客户端和服务器端条件无条件）
2. 展开新添加的动态操作（假设名称为AddClass），您可以在其下找到两个文件夹/操作，True和False。在TrueAction下添加名为show的新操作
3. 在True下对添加的操作进行一些更改（选择类型-JavaScript表达式，在JavaScriptExpression中粘贴以下代码。）

$(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:nth child（6），生病/周末数据在所呈现的表的列6中可用。（如果第3列中的数据可用，则将数字6更改为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'});
        }
    });
});

Answer 2

类似的东西？http://www.grassroots-oracle.com/2013/06/highlight-cell-background-in-apex-report.html

对我来说，这是早期的jQuery，所以它可以被清理，但看起来它可能会帮助你完成任务。

Answer 3

EDIT：考虑到矩阵的大小，这可能不是一个好答案，因为它会导致额外的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>'
...