Dynamically change an icon based on a column value(根据列值动态更改图标)

本文介绍了根据列值动态更改图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

用例：当部门准备好提交库存时，他们可以点击一个按钮&Quot；Valify Inventory&Quot；，该按钮将在管理员的表格仪表板上显示其库存已准备就绪的信息。然后管理员可以检查仪表板，看看谁完成了，谁没有完成。仪表板将以两种不同的颜色(绿色=就绪/红色=未就绪)显示部门名称、验证日期、库存状态(就绪/未就绪)。如果库存没有准备好，#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列，这一列显示了我上面提到的两个图标。我在页面加载上有一个动态操作，它执行以下代码：
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的值在静态文本中插入列中的HTML标记，etat_dashboard是上面提到的状态(0 FALSE/1 TRUE)。这真的不是一种干净的方法，我希望能有更好的方法。

安装后，我想知道是否有可能使用JavaScript或jQuery表达式动态更改#link#列的值，并设置我在页面加载时在DA上所做的图标？这可以让我删除icon_dashboard列。

如需更多详细信息，请随时提问。

提前谢谢您，

托马斯

推荐答案

您可以向SELECT添加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，但它大大简化了这个过程。最后，您必须问自己--将来维护最少的是什么，是在查询中添加一行，还是自定义的Java脚本操作。

这篇关于根据列值动态更改图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！