当前位置：首页 > news >正文

【Oracle APEX开发小技巧17】交互式网格操作按钮根据条件/状态设置能否被点击生效

news 2025/11/14 8:02:13

在日常APEX开发中会有如下场景：

当满足某些条件/状态时，可以对交互式网格进行操作；不满足时希望操作按钮置灰且无法点击生效。

例如下面的案例：
因为预览、下载、重新提交都是建立在有图片的前提下的，所以只有有图片按钮才会显示，否则按钮置灰且无法点击。
为实现上述要求，

第一步，需要在交互式表格的查询SQL设置一个判断标志，用来查询判断用户是否有图片；

第二步，对判断标志进行CSS处理，对不满足情况的操作按钮进行置灰禁用处理；

第三步，到页面上进行验证。

以下是对应的操作：

1.交互式网格SQL表达式中判断是否有图片，页设置→源→SQL查询

SELECT * FROM (SELECTDU.DEPT_USER_ID,U.USER_ID,U.NAME,U.JOB_NUMBER,CASEWHEN E.PINYIN_XING IS NOT NULL THEN E.PINYIN_XING || ' ' || E.PINYIN_MINGELSE E.PINYIN_MINGEND AS PINYIN,U.HIRED_DATE,U.TITLE,E.PHOTO_URL,NVL(E.STATUS, '1_WAIT_INIT') AS STATUS,DECODE(E.PHOTO_URL,null,0,1) IS_HIDE,'' AS OPERATE,-- 使用ROW_NUMBER()按状态排序ROW_NUMBER() OVER (ORDER BY CASE NVL(E.STATUS, '1_WAIT_INIT')WHEN '1_WAIT_INIT' THEN 1WHEN '2_WAIT_SUBMIT' THEN 2WHEN '3_WAIT_CONFIRM' THEN 3WHEN '4_WAIT_EXPORT' THEN 4WHEN '5_EXPORTED' THEN 5ELSE 6END) AS RNFROM SHARE_BASIC_JA_DING_USER_V@MPF UINNER JOIN SHARE_BASIC_JA_DING_DEPT_USER_V@MPF DU ON U.USER_ID = DU.USER_IDLEFT JOIN SHARE_BASIC_JA_DING_DEPT_V@MPF D ON D.DEPT_ID = DU.DEPT_IDLEFT JOIN CA_INFO_EXTEND_T E ON E.DING_USER_ID = U.USER_ID AND E.DEPT_ID = D.DEPT_IDWHERE U.IS_LEAVE = 0AND (:P10_DEPT_ID IS NULLOR :P10_DEPT_ID = ''OR :P10_DEPT_ID = 'ALL'OR EXISTS (SELECT 1FROM TABLE(JA_UTILS_PKG.SPLIT_STR(:P10_DEPT_ID,':')) SWHERE TO_NUMBER(S.DATA_VAL) = DU.DEPT_ID))
)
-- 外层查询不需要ORDER BY，APEX会按RN顺序显示

2.拼接操作状态标志位：列→OPERATE（操作，默认为空，在设置中通过HTML设置为按钮）→设置→HTML表达式，拼接后形如is_modify_0或is_modify_1。

需要注意的点：
因为我们在第一点SQL查询的时候设置的是图片为空设为0，所以第3点时需要对is_modify_0进行置灰及禁用限制。

<span><a href="#" class='is_modify_&IS_HIDE.' onclick="btnClick('download','&DEPT_USER_ID.')" style="text-dcoration:none;">下载</a>&nbsp;<a href="#"  class='is_modify_&IS_HIDE.'  onclick="showImagePreview('&PHOTO_URL.')" style="text-dcoration:none;">预览</a>&nbsp;<a href="#" class='is_modify_&IS_HIDE.'  onclick="btnClick('resubmit','&DEPT_USER_ID.')" style="text-dcoration:none;">重新提交</a>
</span>

3.在CSS→内嵌设置对应样式

/* 使链接按钮置灰且无法点击 */
.is_modify_0 {color: #cccccc !important;           /* 文字颜色置灰 */cursor: not-allowed !important;      /* 鼠标显示禁止符号 */pointer-events: none !important;     /* 禁用所有鼠标事件 *//* text-decoration: line-through !important; 添加删除线表示不可用 *//* opacity: 0.6 !important;            降低透明度 */
}/* 悬浮样式 */
.longlinedots{max-width: 900px;	/*设置容器最大宽度*/white-space: nowrap;	/* 设置段落文本不换行(不换行才有可能行溢出)*/overflow: hidden;		/* 关闭滚动条，超出部分隐藏*/text-overflow: ellipsis;	/* 超出部分添加省略号*/
}
/*给该选择器添加悬浮事件，实现悬浮显示全部内容*/
.longlinedots:hover {overflow: visible;white-space: inherit;
}/* 直接显示为换行 */
.a-GV-table td  {word-wrap: break-word;overflow-wrap: break-word;overflow: initial;white-space: initial;text-overflow: initial;
}