`
waking
  • 浏览: 7208 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Oracle Apex 实用笔记系列 7 - 用Region Selector实现标签功能

 
阅读更多

需求

在一已有一级Tab Set的Apex项目中,笔者被要求实现一个二级Tab Set。一个可行的方案是在一个页面中用一个Region Selector来实现。但是Region Selector有一些自己的特性,比如

第一个选项是Select All
如果从其他页面返回,无法记忆之前的选择项
所以这篇文章着重对以上特性的修改以期模拟标签页的实现。

步骤

  1. 创建Page1, Page2, Page3
    1. 可使用Apex提供的向导实现页面的创建。
    2. 在Page2创建hidden item,比如P2_RETURN_TAB,设置value protected为No。 类似地,在Page3创建P3_RETURN_TAB;
  2. 在Page1的设置
    1. 创建一个Hidden item,比如P1_REGION_SELECTOR, 设置value protected为No;
    2. 创建2个Region,需要注意的地方是在每个Region的配置中的Attribute页面,把Region Display Selector设置为Yes。
    3. 由于Region1和Region2的Region Display Selector被设置为Yes,默认地,除了Region1和Region2的名称,有额外的一个Select All标签出现在标签行的第一项,并且它成为了被选中的那个;
    4. 创建一个Dynamic Action: Name: Selector Load; Event: Page Load; No condition;
    5. 创建一个True Action: Action:Execute Javascript Code;
    6. Code:
    7. $('.apex-rds li:first-child').remove();
      $('.apex-rds li:first-child').addClass('apex-rds-first');
      
      $selector=$v("P1_REGION_SELECTOR");
      if($selector==''){
      $selector='Region1'; 
      }
      
      $('span:contains('+$selector+')').parent().trigger('click');
    8. 创建一个Dynamic Action: Name: Selector Click; Event: Click; Selection Type:JQuery Selector;jQuery Selector:.apex-rds a;No condition;
    9. 创建一个True Action: Action:Execute Javascript Code;
    10. Code:
    11. $selector=$(this.triggeringElement).find('span').text();
      $s('P1_REGION_SELECTOR',$selector);
    12. 在Region1创建1个链接指向Page2,在链接中设置P2_RETURN_TAB的值为P1_REGION_SELECTOR的值。类似地,在Region2创建1个链接指向Page3,在链接中设置P3_RETURN_TAB的值为P1_REGION_SELECTOR的值。
  3. 在Page2的设置
    1. 创建一个button. Action: Redirect to Page in this Application; Page: 1; Set These Items: P1_REGION_SELECTOR; With These values: &P2_RETURN_TAB.;
    2. 在Branch to Page or URL, Branch Point: On Submit:After Processing(After Computation, Validation and Processing); Target Type: Page in this Application; Page:1;Set These Items: P1_REGION_SELECTOR; With These values: &P2_RETURN_TAB.;
  4. 在Page3的设置与在Page2的设置类似。

注意事项

本文是对复杂问题的简化,比如在Region1中到Page2的链接可以不是简单链接<a>而是Report中每一行的link。

分享到:
评论

相关推荐

    Android-Ultra-Photo-Selector多图片选择器的使用.zip

    总的来说,Android-Ultra-Photo-Selector是Android开发中一个实用的工具,它简化了多图片选择的功能实现,让开发者能够专注于应用的其他核心功能。无论你是经验丰富的开发者还是刚刚接触Android开发的新手,都可以从...

    Laravel开发-laravel-lang-selector

    `laravel-lang-selector`是这个生态系统中的一颗明珠,它帮助开发者轻松地实现网站的多语言切换功能,以满足全球用户的需求。 首先,我们要理解Laravel中的语言支持。Laravel内置了对多语言的支持,通过`resources/...

    robot-cases-selector-plugin.hpi

    robot-cases-selector-plugin插件,使用指南请查看另一篇博客

    前端开源库-has-id-selector

    下面我们将详细探讨这个库的功能、使用方法以及在实际开发中的应用场景。 ### ID选择器简介 在CSS中,ID选择器以`#`开头,用于唯一地标识一个元素。例如,`#header`会选择页面上ID为"header"的元素。由于ID必须在...

    react-country-region-selector:国家_地区区域为您的表格添加选择框

    如果需要,还可以使用库使用的源数据。 它使您可以自定义通过白名单,黑名单显示的国家/地区列表。 提供了许多选项,用于样式,事件回调等。 要减小文件大小,可以选择创建自定义版本的库,该库仅包含要显示的...

    playwright-query-selector-all方法详解

    playwright-query-selector-all方法详解

    Android代码-android-multiple-images-selector

    Android Multiple Images Selector Easy-to-use library to select images in Android application Features: select images by folders support to set max number of images to be selected allow filter images ...

    前端开源库-has-element-selector

    此外,库的源代码(在`has-element-selector-master`文件中)可能包含了实现此功能的各种细节,如错误处理、性能优化等。开发者可以通过阅读源码来学习如何高效地遍历DOM和应用CSS选择器,这对于深入理解前端性能...

    vue-tag-selector-类似标签的输入。 轻巧,可自定义并处理REGEX验证!-Vue.js开发

    查看演示安装#使用npm npm install --save vue-tag-selector#带有yarn yarn add vue-tag-selector用法要使用组件,您只需要导入并注册该组件:从'vue-标签选择器的导出默认值{组件:{TagSelector},data(){返回{...

    PyPI 官网下载 | paratext-text-selector-0.3.tar.gz

    《PyPI官网下载 | paratext-text-selector-0.3.tar.gz》 在Python的世界里,PyPI(Python Package Index)是最重要的软件仓库之一,它为开发者提供了丰富的Python库资源。资源“paratext-text-selector-0.3.tar.gz...

    Oracle_APEX_学习心得

    - **复杂数据处理**:虽然 APEX 在某些方面(如值列表返回和触发器机制)不如传统的 Oracle Forms 强大,但它仍然支持复杂的逻辑处理,例如通过编写 PL/SQL 包来实现。 - **动态 SQL**:可以构建动态 SQL 查询,从而...

    postcss-prefix-selector:使用选择器为所有CSS规则添加前缀

    使用自定义命名空间.a =&gt; .prefix .a每个CSS选择器添加前缀。 目录 安装 $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be ...

    react-use-context-selector:React的上下文选择器挂钩

    React使用上下文选择器 React的上下文选择器挂钩 介绍 当前,React中没有使用钩子来订阅部分上下文的本地方法。 这意味着更改上下文的一小部分,可能会导致重新渲染使用上下文的每个组件。 出于相同的目的,还存在...

    前端开源库-stylelint-selector-bem-pattern

    "stylelint-selector-bem-pattern" 是一个非常实用的开源库,它专为实现这一目标而设计。这个库是一个基于Stylelint的插件,利用了PostCSS的BEM(Block Element Modifier)Linter功能,旨在帮助开发者遵循BEM命名...

    multi-image-selector.rar

    在Android应用开发中,用户经常需要选择多张图片来完成某些功能,比如上传个人资料、发布动态等。"multi-image-selector.rar"是一个针对这一需求的解决方案,它提供了一个可定制的多图片选择器,允许用户根据设定的...

    Android -- Time-Selector日期选择控件.zip

    本项目的目标是为开发者提供一个易于使用、功能丰富的日期和时间选择解决方案。 `Time-Selector`控件的特点主要体现在以下几个方面: 1. **界面设计**:与原生的`TimePicker`相比,`Time-Selector`通常会采用更...

    Laravel开发-laravel-data-selector

    总的来说,`lararavel-data-selector`是Laravel开发中一个非常实用的工具,特别是对于那些需要处理复杂数据查询和检索的项目。它提高了开发效率,降低了维护成本,同时提升了应用程序的性能。如果你的项目涉及到大量...

    前端开源库-has-class-selector

    `has-class-selector` 是一个专为前端开发者设计的开源库,它的主要功能是检查一个CSS选择器字符串是否包含了特定的类(class)名称。这个库在实际开发中有着广泛的应用场景,比如验证用户输入的选择器是否正确包含...

    前端开源库-css-selector-extract

    【前端开源库-css-selector-extract】是一个专门用于前端开发的开源工具,它的主要功能是能够从CSS代码中高效地提取出指定的CSS选择器。这个工具对于开发者来说尤其有用,因为它可以帮助他们更好地理解和分析项目中...

    关于XML绘图(bitmap ,shape ,layer-list ,selector ,animation)的demo

    Selector通常用于实现按钮、列表项等的交互反馈效果。在XML中定义一个selector,可以定义不同状态下的shape或bitmap,当视图状态改变时,selector会自动选择相应的状态并显示。 5. **Animation**: 动画是使应用更加...

Global site tag (gtag.js) - Google Analytics