使我的表格形式变得动态 [英] making my tabular form dynamic

问题描述

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

I have a checkbox on a tabular form. I need to be able to hide it if the submit date is not filled in and show it when a date is there. Once the checkbox has been clicked, I need to update another field based on the checkbox being clicked or when I hit the update button. is this possible on a Oracle Apex tabular form in version 4.2?

推荐答案

您可以在表格形式的字段上创建动态操作，但是您需要了解一些Javascript/jQuery/DOM内容，因为它不能以声明方式完成带有页面项.

You can create dynamic actions on tabular form fields, but you need to know some Javascript / jQuery / DOM stuff as it can't be done declaratively as it can with page items.

作为示例，我在EMP表上创建了一个简单的表格形式:

As an example, I created a simple tabular form on the EMP table:

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

Using the browser's Inspect Element tool I can see that the HTML for the Ename field on row 3 looks like this:

<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".

The relevant bits to note are the name "f03" and the ID "f03_0003". For all tabular form fields, the name indicates the column, and is the same for all fields in that column. The ID is made up of the name plus a string to represent the row - in this case "_0003" to represent row 3.

类似地，聘用"字段都被命名为"f004"，并且具有诸如"f04_0003"之类的ID.

Similarly, the Hiredate fields are all named "f004" and have IDs like "f04_0003".

借助此信息，我们可以编写动态动作.例如，假设Ename为空，则Hiredate应该被隐藏，否则显示出来.用伪代码:

Armed with this information we can write a dynamic action. For example, let's say that whenever Ename is empty then Hiredate should be hidden, otherwise shown. In pseudo-code:

每当更改名称为"f03"的元素时，同一行上名称为"f04"的元素都应隐藏或显示.

whenever an element with name "f03" is changed, the element with name "f04" on the same row should be hidden or shown.

因此，我们可以使用when条件创建类似动作:

So we can create a synamic action with a When condition like this:

• 事件=更改
• 选择类型= jQuery选择器
• jQuery选择器= input [name ="f03"]

即每当更改名称为"f03"的输入时，请触发此操作.

i.e. whenever an input whose name is "f03" is changed, fire this action.

执行的操作必须是执行Javascript代码"，并且代码可以是:

The action performed will have to be "Execute Javascript code", and the code could be:

// 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是日期选择器，因此我需要隐藏/显示字段本身及其日期选择器图标.我选择通过隐藏/显示包含两者的跨度来做到这一点.可以用许多不同的方式编写这段代码.

Because Hiredate is a date picker, I needed to hide/show both the field itself and its date picker icon. I chose to do this by hiding/showing the span that contains them both. This code could have been written in many different ways.

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

You could apply similar techniques to achieve your aims, but as you can see it isn't trivially easy.

这篇关于使我的表格形式变得动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！