07技术太卷我学APEX-动态菜单+URL传参数给页面

07技术太卷我学APEX-动态菜单+URL传参数给页面

0 应用场景

《技术太卷我学APEX》收集的项目越来越多，我想把【类】【子类】加到导航菜单栏，点击不同的分类菜单栏，对列表进行过滤，也可以全部浏览，如下图：

1 Apex导航菜单基础

Apex的导航菜单分静态和动态菜单。静态菜单是固定不变的Apex列表，动态菜单根据sql查询结果动态变化。
参阅 某书 大挪移的分享 《Oracle APEX实现动态导航菜单》
导航菜单列表需要8项数据分别为 ：

项目	说明	备注
LEVEL_VALUE	表示几级菜单项，1表示一级菜单项，2表是二级菜单项，以此类推	必须有值
LABEL_VALUE	表示菜单项显示的文本	必须有值
TARGET_VALUE	表示点击菜单项之后要链接到的页面	必须有值
IS_CURRENT	表示是不是当前选中的菜单项，官方文档的说法是这个地方可以设置NULL，或者’YES’，‘NO’，设置为NULL的时候被点击的菜单项会高亮显示	还没搞明白咋设置，先都null
IMAGE_VALUE	使用Font APEX图标库里class名
IMAGE_ATTR_VALUE	未知	null即可
IMAGE_ALT_VALUE	未知	null即可
DISPLAY_ORDER	表示菜单自上而下的显示顺序	查询的时候一定要通过该字段进行排序，排过序之后，APEX就知道你定义的二级菜单到底应该归属到哪个一级菜单之下，即自动把二级菜单归属到离它最近的上一条记录中的一级菜单之下

2 创建菜单视图

2.1 基础数据

k_class 为一级菜单要显示的文本，k_subclass为二级菜单要显示的文本。

2.2 创建视图v_menu加上显示序号

视图v_menu代码如下：

CREATE OR REPLACE FORCE EDITIONABLE VIEW "V_MENU" ("M1", "K_CLASS", "M2", "K_SUBCLASS") AS 
  select d.m1, s.k_class,rownum + d.m1 as m2,s.k_subclass
from (select distinct k_class,k_subclass from apex_learn order by k_class,k_subclass ) s
left join 
(select rownum*1000 as m1, m.k_class from (select distinct k_class from apex_learn order by k_class ) m) d on d.k_class = s.k_class

视图的输出结果：

这里采用了 oracle 排序后的 rownum，编码后符合Apex的导航菜单的规则。

2.3 创建视图 v_nav_menu 加上Apex导航菜单的其它数据项

视图V_nav_menu代码：

CREATE OR REPLACE FORCE EDITIONABLE VIEW "V_NAV_MENU" ("LEVEL_VALUE", "LABEL_VALUE", "TARGET_VALUE", "IS_CURRENT", "IMAGE_VALUE", "IMAGE_ATTR_VALUE", "IMAGE_ALT_VALUE", "DISPLAY_ORDER") AS 
  select 1 as LEVEL_VALUE,'首页' as LABEL_VALUE，'f?p=&APP_ID.:1:&SESSION.::&DEBUG.::::' as TARGET_VALUE,
  	'' as IS_CURRENT,'fa-home' as IMAGE_VALUE,'' as IMAGE_ATTR_VALUE,'' as IMAGE_ALT_VALUE, 10 as DISPLAY_ORDER
	from dual
union all
  select distinct 1 as LEVEL_VALUE, k_class as LABEL_VALUE, 'f?p=&APP_ID.:2:&SESSION.::&DEBUG.::' || 'KV_CLASS,KV_SUBCLASS:' || k_class || ',' as TARGET_VALUE,  
	'' as IS_CURRENT,'fa-table' as IMAGE_VALUE,'' as IMAGE_ATTR_VALUE,'' as IMAGE_ALT_VALUE,
	m1 as DISPLAY_ORDER  from v_menu
union all
select distinct 2 as LEVEL_VALUE, k_subclass as LABEL_VALUE,'f?p=&APP_ID.:2:&SESSION.::&DEBUG.::' || 'KV_CLASS,KV_SUBCLASS:' || k_class || ',' || k_subclass as TARGET_VALUE, 
	'' as IS_CURRENT,'fa-clipboard-list' as IMAGE_VALUE,'' as IMAGE_ATTR_VALUE,'' as IMAGE_ALT_VALUE,
	m2 as DISPLAY_ORDER  from v_menu
union all 
  select 1 as LEVEL_VALUE, '全部列表' as LABEL_VALUE, 'f?p=&APP_ID.:2:&SESSION.::&DEBUG.::' || 'KV_CLASS,KV_SUBCLASS:' || ',' as TARGET_VALUE,  
	'' as IS_CURRENT,'fa-table' as IMAGE_VALUE,'' as IMAGE_ATTR_VALUE,'' as IMAGE_ALT_VALUE,
	100 as DISPLAY_ORDER  from dual
union all 
select 1 as LEVEL_VALUE,'管理' as LABEL_VALUE，'f?p=&APP_ID.:10000:&SESSION.::&DEBUG.::::' as TARGET_VALUE,
  	'' as IS_CURRENT,'fa-user-wrench' as IMAGE_VALUE,'' as IMAGE_ATTR_VALUE,'' as IMAGE_ALT_VALUE, 10000 as DISPLAY_ORDER
	from dual
order by DISPLAY_ORDER

视图v_nav_menu的查询结果：

要点说明：
display_order 的编号顺序很重要，二级菜单紧跟在所在一级项下。
Target_Value: f?p=&APP_ID.:2:&SESSION.::&DEBUG.::KV_CLASS,KV_SUBCLASS:SQL工作室,
前半部分固定套路，【f?p=&APP_ID.:2:&SESSION.::&DEBUG.::】不用动，注意冒号:的不能少。
后半部分【KV_CLASS,KV_SUBCLASS:SQL工作室,】为url传递给页面2的参数名和参数值，这里传了2个参数相当于KV_CLASS=SQL工作室 & KV_SUBCLASS:空值，页面接收这两个参数，并在sql里引用。

3 创建动态菜单并设置使用

Step1 打开共享组件-导航菜单-创建一个动态列表

Step 2 共享组件-用户界面-用户界面属性-设置导航菜单为【太卷导航菜单】

Step 3 到这里动态菜单就可以也页面上出来了。如下图：

4 URL参数传递给页面并在SQL里引用

Setp 1 打开页面2增加2个页面隐藏项KV_CLASS和KV_SUBCLASS,注意名称要和URL的参数名称相同，如下图：

改一下标识名称，其它都默认即可。

Setp 2 列表数据源绑定引用KV_CLASS和KV_SUBCLASS

数据源SQL语法如下：

select "P_ID","K_CLASS","K_SUBCLASS","S_TITLE","KEY_WORD","S_TEXT",
sys.dbms_lob.getlength("B_FILE")"B_FILE","S_NOTE","F_USER","DATE_TIME",
"B_FILE_NAME","B_FILE_MIME_TYPE"
from "APEX_LEARN"
--where k_class = nvl(v('KV_CLASS'),k_class) and k_subclass = nvl(v('KV_SUBCLASS'),k_subclass)
where k_class = nvl(:KV_CLASS,k_class) and k_subclass = nvl(:KV_SUBCLASS,k_subclass)
order by "K_CLASS","K_SUBCLASS"

引用在Where子句，用两种绑定引用方式 v(‘KV_CLASS’) 或 :KV_CLASS

nvl(v(‘KV_CLASS’),k_class) 参数为空时可查询全部。

4 最后效果

可查询全部，也可以按一级菜单筛选查询，也可以按二级菜单删选查询。

在线DEMO ： https://apex.oracle.com/pls/apex/r/blma/learn_apex