使我的表格形式动态化

Question

我在表格形式上有一个复选框。如果未填写提交日期，我需要能够隐藏它并在有日期时显示它。单击复选框后，我需要根据单击的复选框或单击更新按钮时更新另一个字段。这在 4.2 版的 Oracle Apex 表格形式上可行吗？

Answer 1

您可以在表格表单字段上创建动态操作，但您需要了解一些 Javascript / jQuery / DOM 的东西，因为它不能像使用页面项目那样以声明方式完成。

例如，我在 EMP 表上创建了一个简单的表格形式：

使用浏览器的 Inspect Element 工具，我可以看到第 3 行的 Ename 字段的 HTML 如下所示：

<input type="text" name="f03" size="12" maxlength="2000" value="Ben Dev"
    class="u-TF-item u-TF-item--text " id="f03_0003" autocomplete="off">

需要注意的相关位是名称“f03”和ID“f03_0003”。对于所有表格字段，名称表示列，并且对于该列中的所有字段都是相同的。 ID 由名称加上表示行的字符串组成 - 在本例中，“_0003”表示第 3 行。

同样，Hiredate 字段都被命名为“f004”，并且具有类似“f04_0003”的 ID。

有了这些信息，我们可以编写一个动态动作。例如，假设只要 Ename 为空，则应隐藏 Hiredate，否则显示。在伪代码中：

每当更改名为“f03”的元素时，应隐藏或显示同一行中名为“f04”的元素。

所以我们可以创建一个带有 When 条件的联动动作，如下所示：

• 事件 = 改变
• 选择类型 = jQuery 选择器
• jQuery 选择器 = 输入[name="f03"]

即每当更改名称为“f03”的输入时，触发此操作。

执行的操作必须是“执行 Javascript 代码”，代码可以是：

// Get the ID of this item e.g. f03_0004
var this_id = $(this.triggeringElement).attr('id');
// Derive the ID of the corresponding Hiredate item e.g. f04_0004
var that_id = 'f04'+this_id.substr(3);

if ($(this.triggeringElement).val() == "") {
    // Ename is empty so hide Hiredate
    $('#'+that_id).closest('span').hide();
} else {
    // Ename is not empty so show Hiredate
    $('#'+that_id).closest('span').show();
}

因为 Hiredate 是一个日期选择器，所以我需要隐藏/显示字段本身及其日期选择器图标。我选择通过隐藏/显示包含它们的跨度来做到这一点。这段代码可以用多种不同的方式编写。

您可以应用类似的技术来实现您的目标，但正如您所见，这并非易事。