javascript - APEX:如何实现循环级联选择列表(多对多)

Question

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

例如，我创建了一个简单的测试应用程序，该程序可以跟踪书籍和作者。
(这比我的实际业务场景更简单，并且更清楚地显示了问题。)

主页包含:

一个提交页面

的按钮

书籍选择列表

作者的选择列表

我之所以使用“提交”按钮，是因为我的实际业务场景中包含一个非常冗长的报告，需要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)中:



到现在为止还挺好。
现在，当用户选择一本书时，作者选择列表会自动刷新。

但是，在为其他选择列表配置级联设置时，也会遇到问题:



现在，当我们运行页面并尝试选择书籍或作者时，页面崩溃并出现Java脚本异常:





错误是Maximum call stack size exceeded，它指示无限循环执行(带有递归)。

这似乎可能是APEX代码中的错误/疏忽，因为使用正确/可靠的逻辑可以轻松解决技术问题。

也就是说，我该如何解决？
有没有其他方法可以配置级联选项来实现此目的？
还是可以编写自定义动态操作和Javascript来手动提交单个项目，并手动刷新选择列表？

Answer 1

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

如您所见，“级联”部分是从父级流到子级的，而不是循环的(这可能导致堆栈溢出!抱歉，无法抗拒)。

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

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

第1部分:基础知识

将页面项添加到该区域。将名称设置为 P53_BOOK ，将类型设置为选择，然后将值列表将类型设置为 SQL查询。在 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

将另一个项目添加到该区域。将名称设置为 P53_AUTHOR ，将类型设置为选择，然后将值列表将类型设置为 SQL查询。在 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

在页面设计器的“呈现” Pane 中，右键单击 P53_BOOK ，选择创建动态操作，然后将其名称设置为 P53_BOOK更改为。设置客户端条件并将键入 JavaScript表达式，然后在 JavaScript Expression 字段中输入以下代码:

this.browserEvent.originalEvent !== undefined

虽然看起来很奇怪，但是这将防止在刷新其他项目时触发动态 Action (防止发生其他循环逻辑问题；请参阅this for details)。

在操作级别，将操作从显示更改为执行PL / SQL代码。将 PL / SQL代码设置为null;和项目，以将提交到 P53_BOOK 。该操作仅在更新操作之前用于更新P53_BOOK的 session 状态。

添加一个在执行PL / SQL代码操作之后触发的新操作。将操作设置为刷新，将选择类型设置为项目，将项目设置为 P53_AUTHOR 。

右键单击 P53_AUTHOR ，选择创建动态操作，然后将其名称设置为 P53_AUTHOR更改为。设置客户端条件并将键入 JavaScript表达式，然后在 JavaScript Expression 字段中输入以下代码:

this.browserEvent.originalEvent !== undefined

在操作级别，将操作更改为执行PL / SQL代码。将 PL / SQL代码设置为null;和项目，以将提交到 P53_AUTHOR 。

添加一个在执行PL / SQL代码操作之后触发的新操作。将操作设置为刷新，将选择类型设置为项目，将项目设置为 P53_BOOK 。

如果您运行该程序，它应该可以正常工作(大部分情况下)。最大的问题是，如果对一项进行更改并刷新另一项，则即使刷新后该项目中存在刷新前的值，也会丢失另一项中的选择。

如果可用，可以使用以下步骤自动重新选择该值。

第2部分:恢复先前选择的值(可选)

转到 P53_BOOK更改了动态操作。添加一个新的true Action ，该 Action 会在前两个 Action 之前触发。将操作设置为执行JavaScript代码，然后在代码字段中输入以下代码:

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

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

转到 P53_AUTHOR更改了动态操作。添加一个新的true Action ，该 Action 会在前两个 Action 之前触发。将操作设置为执行JavaScript代码，然后在代码字段中输入以下代码:

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

右键单击 P53_BOOK ，然后选择创建动态操作。将名称设置为 P53_BOOK刷新了，并将事件设置为，然后刷新。

在操作级别，将操作设置为执行JavaScript代码，然后在代码字段中输入以下内容:

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

该代码使用data方法设置了P53_BOOK的值(这次是一个 setter/getter )。传递给$s的最后一个参数(true)以阻止change事件，否则将创建更多循环逻辑。

右键单击 P53_AUTHOR ，然后选择创建动态操作。将名称设置为 P53_AUTHOR刷新了，并将事件设置为，然后刷新。

在操作级别，将操作设置为执行JavaScript代码，然后在代码字段中输入以下内容:

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

那应该做。但是还有一个烦人的事情……如果您在任何一个字段中选择一个空值，您可能希望它刷新两个字段(同时显示两个字段的所有选项)，但那样行不通。如果需要的话，我建议您只添加一个单独的重置按钮。否则，最好用原始JavaScript代码编写所有这些代码。