将动态操作添加到动态创建的按钮

Question

根据我的previous post，我正在 Oracle Apex (v21.1) 上构建某种仪表板。我的仪表板显示每个部门的库存状态。如您所见，我在列表末尾添加了一个按钮，该按钮仅在状态为“已验证”时显示（绿线）

这是我的交互式报告的代码：

SELECT 
    PK_DASHBOARD,
    FK_SERVICE_DASHBOARD,
    ETAT_DASHBOARD,
    DATE_DASHBOARD,
  CASE
    WHEN etat_dashboard = 1 THEN '<button>Libérer</button>'
  END as bt_dashboard,
  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 ico_dashboard
FROM inv_tb_dashboard

我想在用户按下按钮时添加一个动态操作。我不知道如何将动态操作链接到以这种方式创建的按钮。是否有某种带有getElementById 的javascript 函数，或者我应该在我的按钮上添加onClick="" 吗？

我的动态操作将只是一个服务器端代码，例如 UPDATE inv_tb_dashboard SET etat_dashboard = 0，而不是太棘手的东西。

如果您有任何想法可以引导我走上正确的道路，请不要犹豫。

如果您需要更多详细信息，可以问我更多问题。

谢谢，

托马斯

Answer 1

如果您有预定义的操作，则创建一组操作并根据您的条件向按钮添加操作，这可以使用 javascript 轻松完成 示例：

const actions=['delete','update'];

let button=document.getElementByID('btn');

const queryExecutor=action=>{
//run action code

}

//Add Condition for Button
if(user=='admin'){
//add action to button dynamically
button.addEventListener('click',queryExecutor('delete'));
}
if(user=='user'){
//add action to button dynamically
button.addEventListener('click',queryExecutor('update'));
}

Answer 2

最干净的方法是使用 javascript 自定义事件。我将通过 EMP 样本表的报告来解释这一点。

第 1 步：创建按钮。确保按钮具有 (1) 用于捕获单击事件的自定义类和 (2) 用于唯一定义行的数据属性。最好是使用通用主题应用程序中的按钮构建器来提供标记。使用 Column Formatting > html 表达式将按钮标记放入。在我的情况下，这将是

<button type="button" data-ename="#EMPNO#" class="my-button-js t-Button t-Button--tiny t-Button--success t-Button--stretch">My Button</button>

第 2 步：创建一个（隐藏的）页面项来保存您单击的行的标识符，在我的例子中为 P1_EMPNO。

第 3 步。创建一个动态操作，将 P1_EMPNO 的值设置为您在报告中单击的行按钮的值 empno。

选择类型：JQuery 选择器 jQuery 选择器：.my-button-js

真正的操作 1：操作：“设置值”，设置类型：“Javascript 表达式”，Javascript 表达式：this.triggeringElement.dataset['ename']，受影响的元素：P1_EMPNO 真动作2：动作：“执行Javascript代码”，代码：

//$(document).trigger('mybuttonclicked');
$.event.trigger("mybuttonclicked");

第 4 步：创建一个动态操作以触发您在第 3 步的 True Action 2 中触发的自定义事件。

事件：自定义 自定义事件：mybuttonclicked 选择类型：“Javascript 表达式” Javascript 表达式：document

真正的行动 1：行动：执行服务器端代码，语言：PL/SQL，代码UPDATE EMP SET sal = sal * 1.1 WHERE empno = :P1_EMPNO;，要提交的项目：P1_EMPNO 真正的行动 2：刷新报告。

查看专业人士 (Dan McGhan) 的解释：https://www.youtube.com/watch?v=DzqFXTnAIr8

旁注。您还可以使用此按钮样式控制列的显示。

1. 在您的报告中添加一列（在这种情况下，我想隐藏名为 BLAKE 的员工的按钮）

       CASE ename WHEN 'BLAKE' THEN 'none' ELSE 'block' END as DISP_COL_CLASS

1. 向按钮“显示”添加样式指令

<button style="display:#DISP_COL_CLASS#" type="button" data-ename="#ENAME#" class="my-button-js t-Button t-Button--tiny t-Button--success t-Button--stretch">My Button</button>

请注意，这并不安全。它隐藏了按钮，但任何有一些 javascript 知识的人都可以让它重新出现。您还必须在服务器端添加一些检查以防止恶意使用。