APEX：显示/隐藏项目时如何自动调整项目宽度？

Posted 2023-03-23

【中文标题】APEX：显示/隐藏项目时如何自动调整项目宽度？

【英文标题】：APEX: How to automatically adjust item width when showing/hiding items?

【发布时间】：2020-03-17 19:23:14

【问题描述】：

我正在 Oracle APEX 中构建应用程序，但遇到了设计问题。

我有一个区域，一行中有十几个班车，我需要在任何给定时间只显示其中的 2 或 3 个，具体取决于在另一个下拉列表项中所做的选择。

为了演示问题和测试，我构建了一个全新的空白页面进行测试。 在这个页面上，我创建了一个 Select-List 项，它返回要显示的航天飞机的数量。

然后我创建了动态操作以仅显示所选航天飞机的数量，并隐藏其余的。 所以当用户将选择更改为较小的数字时，一些穿梭应该隐藏在浏览器中，无需提交或刷新页面。

动态动作效果很好，并按预期隐藏穿梭。 但是，穿梭车不会展开以填满行。

这是一个主要问题，因为航天飞机需要更多的水平空间才能可用。 当我隐藏多余的穿梭时，我需要剩余的穿梭展开并填充行中的水平空间。

所有穿梭机都配置有Automatic 列和列跨度选项。

当我隐藏了大多数其他穿梭时，如何使穿梭展开以填充行中的水平空间？ 我可以使用 javascript 动态操作重新呈现项目吗？

【参考方案1】：

我不知道一个简单的方法，但你可以试试这个：

apex 模板分为 12 个部分，因此每个项目的列跨度都定义为其 div 容器中的 css 类。您只需更改要扩展的项目的类。

你可以使用的类是从col-1到col-12

您应该在动态操作中使用的 javascript 应该是类似的：

$( "#P_ITEM" ).parent().removeClass( "col-2" );
$( "#P_ITEM" ).parent().addClass( "col-6" );

这是项目所在的 html 示例：

【讨论】：

非常有趣！让我修补一下，看看会发生什么。