根据列值动态更改图标

Posted 2023-03-22

【中文标题】根据列值动态更改图标

【英文标题】：Dynamically change an icon based on a column value

【发布时间】：2021-10-31 16:19:16

【问题描述】：

我正在开发 Oracle Apex v21.1。我正在尝试为管理员创建一个小的“仪表板”表。

用例：当部门准备好提交他们的库存时，他们可以点击“验证库存”按钮，然后将他们的库存准备就绪的信息显示到管理员的表格仪表板.然后管理员可以检查仪表板，看看谁完成了，谁没有完成。仪表板将以两种不同的颜色显示部门名称、验证日期、库存状态（就绪/未就绪）（绿色 = 就绪/红色 = 未就绪）。如果库存尚未准备好，#LINK 列中会出现一个电子邮件图标，让管理员可以向部门发送电子邮件。如果准备好了，就会显示一个简单的“检查”。

---

这是what I already have 以及我能做什么：

验证按钮有效，部门可以通过按下它来更改库存状态，代码如下： UPDATE inv_tb_dashboard SET etat_dashboard = 1, date_dashboard = SYSDATE WHERE fk_service_dashboard IN (SELECT pk_service FROM inv_tb_service WHERE UPPER(code_service) = v('APP_USER')); 我可以根据 state 的值动态更改表格行的颜色（0 表示 false，1 表示 true）这是 JS 代码：

    $(document).ready(function() 
        $("td:nth-child(3)").each(function() 
            if ($(this).text() === "Non validé") 
                $(this).parent().children().css('background-color': '#d88882');
            
            else if($(this).text() === "Validé")
                $(this).parent().children().css('background-color': 'lightgreen');
            
        );
    );

我可以更改图标，但这是我不满意的部分，我想改进并使其更清洁。实际上，我的表格有一个icon_dashboard 列，这是显示我上面提到的两个图标的列。我在

Page Load

上有一个

Dynamic Action

，它执行以下代码：

UPDATE inv_tb_dashboard 
SET 
icone_dashboard =
'<a href="mailto:'||email_dashboard||'?Subject=RAPPEL - Inventaire communal"><span aria-label="Mail"><span class="fa fa-envelope-o" aria-hidden="true" title="Mail"></span></span></a>'
WHERE etat_dashboard = 0;
UPDATE inv_tb_dashboard 
SET 
icone_dashboard =
'<span aria-label="Mail"><span class="fa fa-check-circle-o" aria-hidden="true" title="Mail"></span></span>'
WHERE etat_dashboard = 1;

是的。如您所见，我根据etat_dashboard 的值（即上述状态（0 false / 1 true））将html 标记插入静态文本列中。这真的不是一个干净的方法，我想让一些东西更好地工作。

Instaed，我想知道是否可以使用 javascript 或 jQuery 表达式动态更改#LINK# 列的值，并设置我在页面加载上的 DA 上所做的图标？这可以让我摆脱icon_dashboard 列。

请随时提问以了解更多详情。

提前谢谢你，

托马斯

【参考方案1】：

您可以将CASE 语句添加到您的选择中，而不是在您的表中使用“icon_dashboard”列并将其值更新为所需的值。这样就不需要更新表的动态操作。选择类似于：

SELECT 
  <standard_columns>,
  CASE 
    WHEN etat_dashboard = 0 THEN '<a href="mailto:'||email_dashboard||'?Subject=RAPPEL - Inventaire communal"><span aria-label="Mail"><span class="fa fa-envelope-o" aria-hidden="true" title="Mail"></span></span></a>'
    WHEN etat_dashboard = 1 THEN '<span aria-label="Mail"><span class="fa fa-check-circle-o" aria-hidden="true" title="Mail"></span></span>'
  END as icone_dashboard
FROM inv_tb_dashboard

它并没有从查询中删除 html，但它大大简化了流程。最后，您必须问自己 - 未来维护最少的是什么，在查询中添加一行或自定义 javascript 操作。