如何在Oracle APEX新版卡片区域中根据行数据条件显示卡片按钮?
如何在新版Oracle APEX卡片区域中根据行数据控制按钮显示?
嘿,刚好我最近也在折腾新版APEX的卡片区域,这个需求其实挺常见的,分两种场景来处理就行,我给你捋清楚:
场景1:用卡片区域自带的「行操作」按钮
如果你是在卡片区域的「行操作」选项里添加的按钮(就是APEX自带的那种行级操作按钮),控制显示超简单:
- 编辑这个行操作按钮,找到服务器端条件板块
- 选「PL/SQL表达式」,然后写基于行数据的判断逻辑,比如你要根据
STATUS列判断,就写:STATUS = '已激活'(这里的:STATUS要对应你数据源里的实际列名) - 嫌写表达式麻烦的话,也可以选「行中的值」,直接挑要判断的列,再设置比较条件(比如列等于某个值时显示)
场景2:自定义卡片模板里的按钮
要是你是自己在卡片HTML模板里写的按钮,那有两种玩法:
玩法A:用APEX模板语法直接判断
在模板里写按钮的时候,用APEX的条件渲染语法,满足行数据条件才渲染按钮,示例代码如下:
#if (:STATUS = '已激活') then# <button class="t-Button t-Button--small">编辑</button> #end if# #if (:STATUS = '已归档') then# <button class="t-Button t-Button--small t-Button--danger">删除</button> #end if#
这里的:STATUS还是你数据源里的列名,APEX会自动把每一行的对应值代入判断,符合条件才会把按钮渲染出来。
玩法B:用JavaScript动态控制(适合复杂逻辑)
如果你的判断逻辑比较绕,或者需要前端实时调整,那可以搞个动态动作:
- 给卡片区域加一个「动态动作」,触发事件选「After Refresh」(卡片加载或刷新后执行)
- 动作类型选「Execute JavaScript Code」,然后写类似下面的代码:
// 遍历所有卡片项 document.querySelectorAll('.t-Cards-item').forEach(card => { // 从卡片的自定义属性里拿行数据(需要先在模板里给卡片加data属性) const rowStatus = card.getAttribute('data-status'); // 找到卡片里的两个按钮 const editBtn = card.querySelector('.btn-edit'); const deleteBtn = card.querySelector('.btn-delete'); // 根据行状态控制显示 if (rowStatus === '已激活') { editBtn.style.display = 'inline-block'; deleteBtn.style.display = 'none'; } else { editBtn.style.display = 'none'; deleteBtn.style.display = 'inline-block'; } });
注意哦,要先在卡片模板的根元素里加个自定义属性,比如 <div class="t-Cards-item" data-status="#STATUS#">,这样JS才能拿到每一行的状态值。
最后提一句:不管用哪种方法,都要确保你的卡片区域数据源里包含用来判断的列(比如上面的STATUS列),不然根本拿不到行数据做判断呀!
内容的提问来源于stack exchange,提问作者Goku




