1.How?
参考文档:
https://community.oracle.com/search.jspa?q=Dynamic+Navigation+Menu+Lists
https://community.oracle.com/message/14363198#14363198
https://community.oracle.com/message/14220243#14220243
Step1.新建一张菜单条目表
create table CUX_APEX_APP_LIST_ENTRIES
(
LEVEL_VALUE NUMBER,
LABEL_VALUE VARCHAR2(100),
TARGET_VALUE VARCHAR2(100),
IS_CURRENT VARCHAR2(100),
IMAGE_VALUE VARCHAR2(100),
IMAGE_ATTR_VALUE VARCHAR2(100),
IMAGE_ALT_VALUE VARCHAR2(100),
DISPLAY_ORDER NUMBER
)
Step2.初试化菜单列表条目
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (1, '首页', 'f?p=&APP_ID.:1:&SESSION.::&DEBUG.::::', '', 'fa-home', '', '', 1);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (1, '一级菜单1', 'f?p=&APP_ID.:2:&SESSION.::&DEBUG.::::', '', 'fa-emoji-sweet-smile', '', '', 10);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (1, '一级菜单2', 'f?p=&APP_ID.:3:&SESSION.::&DEBUG.::::', '', 'fa-emoji-slight-smile', '', '', 20);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (1, '一级菜单3', 'f?p=&APP_ID.:4:&SESSION.::&DEBUG.::::', '', 'fa-emoji-happy-smile', '', '', 30);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (2, '二级菜单11', 'f?p=&APP_ID.:5:&SESSION.::&DEBUG.::::', '', 'fa-emoji-big-eyes-smile', '', '', 11);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (2, '二级菜单21', 'f?p=&APP_ID.:6:&SESSION.::&DEBUG.::::', '', 'fa-emoji-cool
', '', '', 21);
Step3.创建动态导航菜单
Step3.1.点击<共享组件>->[导航菜单]
Step3.2.点击[创建]
Step3.3.选择[从头开始]
Step3.4.新建的动态导航菜单叫“Cux Navigation Menu”,类型选择[动态]
Step3.5.填写动态的SQL查询语句
select LEVEL_VALUE,
LABEL_VALUE,
TARGET_VALUE,
IS_CURRENT,
IMAGE_VALUE,
IMAGE_ATTR_VALUE,
IMAGE_ALT_VALUE,
DISPLAY_ORDER
from CUX_APEX_APP_LIST_ENTRIES
order by DISPLAY_ORDER asc
Step3.6.点击[创建]即可
Step3.7.创建完成
Step4.把刚创建的导航菜单应用到当前的Universal主题
Step4.1.点击<共享组件>->[用户界面属性]
Step4.2.点击Desktop前的[编辑]
Step4.3.当导航菜单列表设置为刚创建的Cux Navigation Menu
Step5.大功告成,查看运行结果
2.Why?
CUX_APEX_APP_LIST_ENTRIES表字段的含义解析
序号 | 字段名称 | 字段含义 | 我的备注 |
---|---|---|---|
1 | LEVEL_VALUE | 表示几级菜单项,1表示一级菜单项,2表是二级菜单项,以此类推 | 必须有值 |
2 | LABEL_VALUE | 表示菜单项显示的文本 | 必须有值 |
3 | TARGET_VALUE | 表示点击菜单项之后要链接到的页面 | 必须有值 |
4 | IS_CURRENT | 表示是不是当前选中的菜单项,官方文档的说法是这个地方可以设置NULL,或者'YES','NO',设置为NULL的时候被点击的菜单项会高亮显示 | 这个字段值的需要读者自行测试,后面会介绍如何通过设置主题颜色来实现粉色高亮显示刚刚被点击过的菜单项,我测试的结果是:要么全部赋值NULL,要么全部赋值'NO'只留一个'YES' |
5 | IMAGE_VALUE | 这个地方我只测试了可以使用Font APEX图标库里class名 | |
6 | IMAGE_ATTR_VALUE | 未测试 | NULL即可 |
7 | IMAGE_ALT_VALUE | 未测试 | NULL即可 |
8 | DISPLAY_ORDER | 表示菜单自上而下的显示顺序 | 查询的时候一定要通过该字段进行排序,排过序之后,APEX就知道你定义的二级菜单到底应该归属到哪个一级菜单之下,即自动把二级菜单归属到离它最近的上一条记录中的一级菜单之下 |
3.Additional
粉色高亮显示选择的导航菜单项
Step1.创建完成.点击[ThemeRolloer],找到Navigation Style,修改选中状态为粉色。
Step2.保存该主题样式,并命名为“Cux Vita”。
Step3.当该样式应用为当前使用的样式。
相关的APEX标准表
SELECT *
FROM APEX_APPLICATION_LISTS
where workspace = 'CUX'
and application_id = 115;
SELECT *
FROM APEX_APPLICATION_LIST_ENTRIES
where workspace = 'CUX'
and application_id = 115
and list_name = 'Desktop Navigation Menu';