O2OA(翱途)开发平台[下称O2OA开发平台或者O2OA]拥有门户页面定制与集成的能力,平台通过门户定制,可以根据企业的文化,业务需要设计符合企业需要的统一信息门户,系统首页等UI界面。从本篇讲的是页面设计器元素组件中数据获取相关的三个组件:数据源、子数据源和数据文本。
一、先决条件
1、O2Server服务器正常运行,系统安装部署请参考文档《如何在服务器上安装部署O2OA》
2、以拥有管理员权限或拥有门户管理员(PortalManager角色)的用户账号登录O2OA(翱途)开发平台,如:xadmin
3、可以进入门户管理平台并且有开发权限,请参考《门户开发-门户设计开发入口和权限说明》
数据源用于获取系统提供的restfulAPI接口数据,其视觉表现和容器相同。
数据源发起restful请求是异步的,所以,并不能保证在页面上部的数据源一定会比页面下部的数据源先加载完成。
数据源基本属性与容器相同。
数据源中“数据源”属性如下表:
属性 | 描述 | 备注 |
方法 | 接口提供的http方法 | 一般为:GET、POST、PUT中的一种。 |
应用服务 | 系统提供的restfulAPI的应用 | 可以通过http://server:20030/x_program_center/jest/list.html来查询到所有的服务应用和请求地址。(其中server请更换为您的center服务器地址或域名;20030请更换为您的center服务器的端口) |
路径 | 接口的请求地址 | |
参数 | 请求地址中的参数 | 路径中带有{}的部分需要通过定义参数替换。 参数通过编写脚本赋值 |
请求正文 | Restful请求的的body | 如果方法为POST或PUT时可能需要提供请求正文,一般为JSON,通过脚本返回请求正文内容,格式见http://server:20030/x_program_center/jest/list.html中的说明 |
数据源系统事件如下表:
事件名 | 描述 |
queryLoad | |
load postLoad | 容器被载入之后执行,不能确保容器中的子表单元素或一些异步元素加载完成。 |
postLoadData | 当restful请求执行完成后执行(子数据源未加载) |
LoadData | 当数据源完全加载完成后执行 |
数据源对象可以通过以下脚本获取:
var el = this.page.get(name); //name为数据源的标识
获取的数据源有以下方法可以使用:
方法名(属性) | 用法 | 描述 |
show | el.show() | 显示元素 |
hide | el.hide() | 隐藏元素 |
addEvent | el.addEvent(name, fun) | 给元素绑定系统事件。 name:事件按名称 fun: 执行的方法 |
node | var dom=el.node | 获取html原生Dom对象 |
_getO2Uri | el. _getO2Uri() | 重新计算数据源路径和请求正文 |
setBody | el.setBody(json) | 重新设置数据源请求正文 |
setParameters | el.setParameters (json) | 重新设置数据源参数 |
addParameters | el.addParameters (json) | 增加数据源参数 |
reload | el.reload() | 重新加载数据源 |
data | var data = el.data | 数据源通过接口调用获取到的json数据 |
子数据源只能在数据源内部创建,它必须和数据源一起使用。用于过滤数据源返回的json数据。
当子数据源过滤的数据为数组时,它会被拷贝与数组长度相同数量的份数,并将数组的每一个元素值绑定到了对应的拷贝上。
子数据源基本属性只有一个和数据源不同:
属性 | 描述 | 备注 |
JSON路径 | 子数据源要处理的JSON路径 | 如:data 或 data.personList |
子数据源事件和数据源的事件一样。
子数据源对象可以通过以下脚本获取:
var el = this.page.get(name); //name为子数据源的标识
获取的子数据源对象有以下方法可以使用:
方法名(属性) | 用法 | 描述 |
show | el.show() | 显示元素 |
hide | el.hide() | 隐藏元素 |
addEvent | el.addEvent(name, fun) | 给元素绑定系统事件。 name:事件按名称 fun: 执行的方法 |
node | var dom=el.node | 获取html原生Dom对象 |
_getSource | var module = el. _getSource() | 获取父数据源对象 |
data | var data = el.data | 子数据源绑定到的json数据 |
数据文本只允许在数据源或子数据源内被创建。用于展现通过数据源获取的数据的具体字段。
数据文本基本属性比数据源的属性多了一个JSON路径和一个处理:
属性 | 描述 | 备注 |
JSON路径 | 数据文本要展现的json数据 | |
处理 | 可以对要展现的数据文本内容进行脚本处理,最终展现脚本返回的结果 |
数据文本事件和数据源相比缺少:postLoadData、LoadData两个事件,其它都一样。
数据文本方法和子数据源一致。
以上是门户设计器中数据源、子数据源和数据文本组件的简单说明,希望对您有帮助,关于门户页面开发的更多介绍请参考以下文章:
《门户开发-快速入门开发一个门户实例》
《门户开发-组件介绍-容器、通用元素》
《门户开发-组件介绍-数据源、子数据源、数据文本》
《门户开发-组件介绍-文本、图片、按钮》
《门户开发-组件介绍-表格》
《门户开发-组件介绍-iframe、HTML》
《门户开发-组件介绍-嵌入视图、嵌入统计、嵌入查询视图》
《门户开发-组件介绍-文本字段、多行文本、地址、组合框》
《门户开发-组件介绍-人员组织》
《门户开发-组件介绍-日期选择》
《门户开发-组件介绍-下拉框、单选框、多选框》
《门户开发-组件介绍-平台应用》
《门户开发-组件介绍-数据表格》
《门户开发-组件介绍-ElementUI组件》
《门户开发-组件介绍-部件、部件元素》