You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在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动态控制(适合复杂逻辑)

如果你的判断逻辑比较绕,或者需要前端实时调整,那可以搞个动态动作:

  1. 给卡片区域加一个「动态动作」,触发事件选「After Refresh」(卡片加载或刷新后执行)
  2. 动作类型选「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

火山引擎 最新活动