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

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

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

例如下面的案例：

因为预览、下载、重新提交都是建立在有图片的前提下的，所以只有有图片按钮才会显示，否则按钮置灰且无法点击。

为实现上述要求，

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

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

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

以下是对应的操作：

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

SELECT * FROM (
    SELECT
        DU.DEPT_USER_ID,
        U.USER_ID,
        U.NAME,
        U.JOB_NUMBER,
        CASE
            WHEN E.PINYIN_XING IS NOT NULL THEN E.PINYIN_XING || ' ' || E.PINYIN_MING
            ELSE E.PINYIN_MING
        END 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 1
                WHEN '2_WAIT_SUBMIT' THEN 2
                WHEN '3_WAIT_CONFIRM' THEN 3
                WHEN '4_WAIT_EXPORT' THEN 4
                WHEN '5_EXPORTED' THEN 5
                ELSE 6
            END
        ) AS RN
    FROM SHARE_BASIC_JA_DING_USER_V@MPF U
             INNER JOIN SHARE_BASIC_JA_DING_DEPT_USER_V@MPF DU ON U.USER_ID = DU.USER_ID
             LEFT JOIN SHARE_BASIC_JA_DING_DEPT_V@MPF D ON D.DEPT_ID = DU.DEPT_ID
             LEFT JOIN CA_INFO_EXTEND_T E ON E.DING_USER_ID = U.USER_ID AND E.DEPT_ID = D.DEPT_ID
    WHERE U.IS_LEAVE = 0
      AND (
          :P10_DEPT_ID IS NULL
          OR :P10_DEPT_ID = ''
          OR :P10_DEPT_ID = 'ALL'
          OR EXISTS (
              SELECT 1
              FROM TABLE(JA_UTILS_PKG.SPLIT_STR(:P10_DEPT_ID,':')) S
              WHERE 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;
}

效果展示