时间戳

首页 > 解决方案 > APEX：如何实现循环级联选择列表（多对多）

javascript - APEX：如何实现循环级联选择列表（多对多）

问题描述

在处理多对多关系时，如何为选择列表实现循环级联逻辑？

例如，我创建了一个简单的测试应用程序来跟踪书籍和作者。
（这比我的实际业务场景要简单得多，而且更清楚地显示了问题。）

主页包含：

我正在使用提交按钮，因为我的真实业务场景包括一个非常长的报告，需要 20-60 秒才能刷新 - 并且在提交页面之前，用户需要从十几个选择列表中进行选择拉报告。

在此处输入图像描述

在此处输入图像描述 在此处输入图像描述

这是一个完整的脚本，其中包含我正在使用的所有测试数据：

CREATE table "BOOK" (
    "ID"         INTEGER GENERATED ALWAYS AS IDENTITY NOT NULL ENABLE,
    "TITLE"      VARCHAR2(100) NOT NULL ENABLE,
    constraint  "BOOK_CK" check ("TITLE"<>''),
    constraint  "BOOK_PK" primary key ("ID"),
    constraint  "BOOK_UK1" unique ("TITLE")
)
/

CREATE table "AUTHOR" (
    "ID"         INTEGER GENERATED ALWAYS AS IDENTITY NOT NULL ENABLE,
    "NAME"       VARCHAR2(100) NOT NULL ENABLE,
    constraint  "AUTHOR_CK" check ("NAME"<>''),
    constraint  "AUTHOR_PK" primary key ("ID"),
    constraint  "AUTHOR_UK1" unique ("NAME")
)
/

INSERT INTO BOOK (TITLE) VALUES ('BOOK01');
INSERT INTO BOOK (TITLE) VALUES ('BOOK02');
INSERT INTO BOOK (TITLE) VALUES ('BOOK03');
INSERT INTO BOOK (TITLE) VALUES ('BOOK04');
INSERT INTO BOOK (TITLE) VALUES ('BOOK05');
INSERT INTO BOOK (TITLE) VALUES ('BOOK06');
INSERT INTO BOOK (TITLE) VALUES ('BOOK07');
INSERT INTO BOOK (TITLE) VALUES ('BOOK08');
INSERT INTO BOOK (TITLE) VALUES ('BOOK09');
INSERT INTO BOOK (TITLE) VALUES ('BOOK10');
INSERT INTO BOOK (TITLE) VALUES ('BOOK11');
INSERT INTO BOOK (TITLE) VALUES ('BOOK12');
INSERT INTO BOOK (TITLE) VALUES ('BOOK13');
INSERT INTO BOOK (TITLE) VALUES ('BOOK14');
INSERT INTO BOOK (TITLE) VALUES ('BOOK15');
INSERT INTO BOOK (TITLE) VALUES ('BOOK16');
INSERT INTO BOOK (TITLE) VALUES ('BOOK17');
INSERT INTO BOOK (TITLE) VALUES ('BOOK18');
INSERT INTO BOOK (TITLE) VALUES ('BOOK19');
INSERT INTO BOOK (TITLE) VALUES ('BOOK20');

INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR01');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR02');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR03');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR04');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR05');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR06');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR07');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR08');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR09');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR10');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR11');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR12');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR13');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR14');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR15');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR16');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR17');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR18');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR19');
INSERT INTO AUTHOR (NAME) VALUES ('AUTHOR20');

CREATE table "BOOK_AUTHOR" (
    "ID"         INTEGER GENERATED ALWAYS AS IDENTITY NOT NULL ENABLE,
    "BOOK_ID"    INTEGER NOT NULL ENABLE,
    "AUTHOR_ID"  INTEGER NOT NULL ENABLE,
    constraint  "BOOK_AUTHOR_PK" primary key ("ID"),
    constraint  "BOOK_AUTHOR_UK1" unique ("BOOK_ID","AUTHOR_ID")
)
/

ALTER TABLE BOOK_AUTHOR ADD FOREIGN KEY (BOOK_ID)
      REFERENCES BOOK (ID) ENABLE
/

ALTER TABLE BOOK_AUTHOR ADD FOREIGN KEY (AUTHOR_ID)
      REFERENCES AUTHOR (ID) ENABLE
/

CREATE OR REPLACE VIEW "VW_BOOK_AUTHOR" AS
SELECT ba.ID,
       ba.BOOK_ID,
       b.TITLE BOOK_TITLE,
       ba.AUTHOR_ID,
       a.NAME AUTHOR_NAME
FROM BOOK_AUTHOR ba
LEFT JOIN BOOK b on b.ID = ba.BOOK_ID
LEFT JOIN AUTHOR a on a.ID = ba.AUTHOR_ID
/

INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK01' AND a.NAME='AUTHOR01';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK02' AND a.NAME='AUTHOR02';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK03' AND a.NAME='AUTHOR03';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK04' AND a.NAME='AUTHOR04';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK05' AND a.NAME='AUTHOR05';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK06' AND a.NAME='AUTHOR06';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK07' AND a.NAME='AUTHOR07';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK08' AND a.NAME='AUTHOR08';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK09' AND a.NAME='AUTHOR09';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK10' AND a.NAME='AUTHOR10';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK11' AND a.NAME='AUTHOR11';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK12' AND a.NAME='AUTHOR12';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK13' AND a.NAME='AUTHOR13';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK14' AND a.NAME='AUTHOR14';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK15' AND a.NAME='AUTHOR15';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK16' AND a.NAME='AUTHOR16';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK17' AND a.NAME='AUTHOR17';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK18' AND a.NAME='AUTHOR18';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK19' AND a.NAME='AUTHOR19';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK20' AND a.NAME='AUTHOR20';

INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK02' AND a.NAME='AUTHOR01';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK02' AND a.NAME='AUTHOR03';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK04' AND a.NAME='AUTHOR03';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK04' AND a.NAME='AUTHOR05';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK06' AND a.NAME='AUTHOR05';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK06' AND a.NAME='AUTHOR07';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK08' AND a.NAME='AUTHOR07';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK08' AND a.NAME='AUTHOR09';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK10' AND a.NAME='AUTHOR09';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK10' AND a.NAME='AUTHOR11';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK12' AND a.NAME='AUTHOR11';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK12' AND a.NAME='AUTHOR13';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK14' AND a.NAME='AUTHOR13';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK14' AND a.NAME='AUTHOR15';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK16' AND a.NAME='AUTHOR15';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK16' AND a.NAME='AUTHOR17';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK18' AND a.NAME='AUTHOR17';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK18' AND a.NAME='AUTHOR19';
INSERT INTO BOOK_AUTHOR (BOOK_ID,AUTHOR_ID) SELECT b.ID, a.ID FROM BOOK b, AUTHOR a WHERE b.TITLE='BOOK20' AND a.NAME='AUTHOR19';

此时，如果您选择一本书，然后单击按钮提交页面，则作者列表将缩小到仅所选书籍的作者。（如果您选择作者，反之亦然。）

对于下一步，我需要在不提交和刷新整个页面的情况下刷新选择列表。

让我们首先将级联设置添加到其中一个选择列表 (P1_AUTHOR) ：

在此处输入图像描述

到目前为止，一切都很好。
现在，当用户选择一本书时，作者选择列表会自动刷新。

但是，当我们还为其他选择列表配置级联设置时，我们会遇到问题：

在此处输入图像描述

现在，当我们运行页面并尝试选择一本书或作者时，页面崩溃并出现 Javascript 异常：

在此处输入图像描述

在此处输入图像描述

错误是Maximum call stack size exceeded，表示无限循环执行（使用递归）。

这似乎可能是APEX代码中的错误/疏忽，因为技术状况很容易通过正确/稳健的逻辑解决。

也就是说，我该如何解决这个问题？
是否有不同的方式来配置级联选项以使其工作？
或者我可以编写自定义动态操作和 Javascript 来手动提交单个项目，并手动刷新选择列表？

标签： javascriptsqloracleplsqloracle-apex

解决方案

首先，我只想说，问个问题的方式！:)

正如您所发现的，“级联”部分是从父级流向子级，而不是循环流向（这可能导致堆栈溢出！抱歉，无法抗拒）。

我会给你一个解决方案，但我会预先承认它不是最理想的，因为选择列表的每次更改都需要两个 Ajax 调用，而不仅仅是一个。我会向 APEX 团队提出这个问题，希望他们能在未来解决这个问题。

我将假设人们已经运行了您的脚本并且有一个带有 HTML 区域的空白页面来开始这些步骤。我的页面是 53，所以人们需要相应地进行更改。

第 1 部分：基础知识

  1. 将页面项目添加到区域。将Name设置为P53_BOOK，将Type设置为Select List，将 List of Values Type设置为SQL Query。在SQL 查询字段中输入以下代码：

    select title d,
  id r
from book
where (
  :P53_AUTHOR is null
    or id in (
      select book_id
      from book_author
      where author_id = :P53_AUTHOR
    )
)
order by title

  2. 将另一个项目添加到该区域。将Name设置为P53_AUTHOR，将Type设置为Select List，并将 List of Values Type设置为SQL Query。在SQL 查询字段中输入以下代码：

    select name d,
  id r
from author
where (
  :P53_BOOK is null
    or id in (
      select author_id
      from book_author
      where book_id = :P53_BOOK
    )
)
order by name

  3. 在 Page Designer 的 Rendering 窗格中，右键单击P53_BOOK，选择Create Dynamic Action，然后将其Name设置为P53_BOOK changed。将客户端条件类型设置为JavaScript 表达式，并在JavaScript 表达式字段中输入以下代码：

    this.browserEvent.originalEvent !== undefined

    虽然看起来很奇怪，但这将阻止动态操作在其他项目刷新时触发（防止不同的循环逻辑问题；有关详细信息，请参阅此内容）。

  4. 在操作级别，将Action从Show更改为Execute PL/SQL Code。将PL/SQL 代码设置为null;并将要提交的项目设置为P53_BOOK。此操作仅用于在您接下来创建的刷新操作之前更新 P53_BOOK 的会话状态。

  5. 添加在执行 PL/SQL 代码操作之后触发的新操作。将Action设置为Refresh，将Selection Type设置为Item(s)，将Item(s)设置为P53_AUTHOR。

  6. 右键单击P53_AUTHOR，选择Create Dynamic Action，然后将其Name设置为P53_AUTHOR changed。将客户端条件类型设置为JavaScript 表达式，并在JavaScript 表达式字段中输入以下代码：

    this.browserEvent.originalEvent !== undefined

  7. 在操作级别，将操作更改为执行 PL/SQL 代码。将PL/SQL 代码设置为null;并将要提交的项目设置为P53_AUTHOR。

  8. 添加在执行 PL/SQL 代码操作之后触发的新操作。将Action设置为Refresh，将Selection Type设置为Item(s)，将Item(s)设置为P53_BOOK。

如果你运行它，它应该会按预期工作（大部分情况下）。最大的问题是，如果您对一个项目进行更改并刷新另一个项目，则另一个项目中的选择将始终丢失 - 即使刷新后的项目中存在预刷新值。

以下步骤可用于自动重新选择可用的值。

第 2 部分：恢复先前选择的值（可选）

  1. 转到P53_BOOK 更改的动态操作。添加一个在前两个动作之前触发的新真实动作。将操作设置为执行 JavaScript 代码并在代码字段中输入以下代码：

    $('#P53_BOOK').data('last-val', $v('P53_BOOK'));

    该代码使用 jQuery 的data方法来存储项目预刷新的值。您将在刷新后稍后使用它。

  2. 转到P53_AUTHOR 更改的动态操作。添加一个在前两个动作之前触发的新真实动作。将操作设置为执行 JavaScript 代码并在代码字段中输入以下代码：

    $('#P53_AUTHOR').data('last-val', $v('P53_AUTHOR'));

  3. 右键单击P53_BOOK并选择创建动态操作。将Name设置为P53_BOOK refreshed并将Event设置为After Refresh。

  4. 在操作级别，将操作设置为执行 JavaScript 代码并在代码字段中输入以下内容：

    $s('P53_BOOK', $('#P53_BOOK').data('last-val'), null, true);

    该代码使用该方法设置 P53_BOOK 的值data（这次作为 getter）。$s( )的最后一个参数true被传递以抑制更改事件，否则会创建更多循环逻辑。

  5. 右键单击P53_AUTHOR并选择Create Dynamic Action。将Name设置为P53_AUTHOR refreshed并将Event设置为After Refresh。

  6. 在操作级别，将操作设置为执行 JavaScript 代码并在代码字段中输入以下内容：

    $s('P53_AUTHOR', $('#P53_AUTHOR').data('last-val'), null, true);

那应该这样做。但是还有一件更烦人的事情......如果您在任一字段中选择一个空值，您可能希望它刷新两个字段（显示两者的所有选项），但它不会那样工作。如果需要，我建议只添加一个单独的重置按钮。否则，您最好用原始 JavaScript 代码编写所有这些内容。

推荐阅读