向动态创建的按钮添加动态操作

Question

基于我的，我正在 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

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

我的 Dynamic Action 只会是服务器端代码，例如 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 示例的报告来解释这一点 table。

第一步：创建按钮。确保按钮具有 (1) 自定义 class 来捕获点击事件，以及 (2) 数据属性来唯一定义 row.Best 是使用通用主题应用程序中的按钮生成器来提供标记。使用 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

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

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

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

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

<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 知识的人都可以使它重新出现。您还必须在服务器端添加一些检查以防止恶意使用。

向动态创建的按钮添加动态操作

Add a Dynamic Action to a button created dynamically

javascript

oracle

plsql

oracle-apex