门户开发-组件介绍-嵌入视图、嵌入统计、嵌入查询视图-门户管理-O2OA企业应用开发平台-人人都是协同系统开发专家

门户开发-组件介绍-嵌入视图、嵌入统计、嵌入查询视图

时间：2023-03-20

内容导读

本篇介绍 O2OA 平台门户设计器中的嵌入视图、嵌入统计与嵌入查询组件。视图用于展现流程实例或内容管理实例的列表，统计用于汇总视图数据并生成统计表与常用图表，查询视图用于呈现自建表、流程实例或内容管理实例的列表。文中分别说明各组件的属性、事件与方法，并给出过滤条件中路径与值的填写方式，便于在门户页面中直接嵌入这些元素并完成交互配置。

O2OA 平台具备门户页面定制与集成的能力，通过门户定制可根据企业文化与业务需要，设计符合企业需要的统一信息门户和系统首页等 UI 界面。本篇介绍页面设计器元素组件中的三个组件：嵌入视图、嵌入统计与嵌入查询。

一、先决条件

1、O2Server 服务器正常运行，系统安装部署请参考文档《如何在服务器上安装部署 O2OA》

2、以拥有管理员权限或拥有门户管理员（PortalManager角色）的用户账号登录 O2OA 平台，如：xadmin

3、可以进入门户管理平台并且有开发权限，请参考《门户开发-门户设计开发入口和权限说明》

二、嵌入视图

视图是平台提供的一种设计元素，可在数据中心创建，用于展现流程实例或内容管理实例的列表，也可以直接嵌入页面进行展现。

具体视图的创建开发，请参考https://www.yuque.com/o2oa/cfst8l/bh42xi

1、嵌入视图属性

嵌入视图基本属性如下：

其中“标题样式”通过 css 设置视图标题的展现样式，“数据样式”通过 css 设置视图条目的展现样式。

嵌入视图中的“视图”标签页属性如下：

属性	描述	备注
视图	选择要嵌入的视图
立即载入	是否在页面加载时同时加载视图	如果选择“否“，您可以在任何时候通过脚本：view.active(); 方法来加载视图
显示标题	是否显示视图的列标题
默认展开	当视图为分类视图时，是否展开每一项
选择文件	选择是否可以选择视图中条目。	不允许：不能选择；单选：可以选择单个条目多选：可以选择多个条目
操作条	视图的操作条是否显示
过滤	对视图内容进行过滤	下面详细说明

视图的过滤是视图的核心功能，需要填写“路径“、”数据类型“、”逻辑“、”比较“和”值之后，点击按钮，将一条过滤添加到默认过滤条件中。可以添加多条过滤条件，它们之间的关系由每条的“逻辑“属性决定。下面是每个过滤条件属性的含义：

属性	描述	备注
路径	要过滤的 JSON 数据路径	流程和内容管理的数据，都以 JSON 格式存储和展现，如果数据格式如以下形式： { “title“:”标题”, ”count”:5, ”keyword”:”测试”, ”item”:{ “name”: “123”, “value”: “456” } }，这时要用 title 进行过滤，数据路径就是”title“；如果要对 item 中的 value 进行过滤，路径就是 item.value。
数据类型	要过滤的数据的类型
逻辑	多条过滤条件连接的逻辑运算符	and 或 or
比较	路径和值的比较符
值	和路径数据比较的值。	通过脚本返回值

2、嵌入视图事件

嵌入视图事件如下：

事件名	描述
queryLoad	元素载入之前执行
load postLoad	元素被载入之后执行如果立即载入选择“是”，该事件在视图开始载入动作执行之后触发；由于视图载入是异步过程，此时并不能保证视图已经载入完成。如果立即载入为“否“：此时计算到了要载入的视图，然后执行此事件
beforeLoadView	视图开始载入之前执行。
loadView	当视图完全载入之后执行。
select	如果视图允许选择，在选择视图条目时触发
openDocument	如果视图允许打开文档（在视图中配置），在打开文档之前触发

3、嵌入视图方法

对象可以通过以下脚本获取：

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 对象
reload	el.reload()	重新载入视图
active	el.active ()	没有立即载入视图时，通过此方法加载视图。
getData	el.getData ()	如果视图允许选择，此方法获取视图中选中条目的 json 数据

三、嵌入统计

统计是平台提供的一种设计元素，可在数据中心创建，用于统计视图数据并生成统计表和常用图表，也可以直接嵌入页面进行展现。

1、嵌入统计属性

嵌入统计基本属性如下：

属性	描述	备注
统计	选择要嵌入的统计
显示图表	是否显示图表
显示图例	是否显示图例
显示表格	是否显示统计表格

2、嵌入统计事件

事件名	描述
queryLoad	元素载入之前执行
load postLoad	元素被载入之后执行该事件在统计开始载入动作执行之后触发；由于统计载入是异步过程，此时并不能保证统计已经载入完成。
loadStat	当统计完全载入之后执行。

3、嵌入统计方法

对象可以通过以下脚本获取：

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 对象
reload	el.reload()	重新载入统计内容
getData	el.getData ()	获取统计的 json 数据

四、嵌入查询视图

查询视图是平台提供的一种设计元素，可在数据中心创建，用于展现自建表、流程实例或内容管理实例的列表，也可以直接嵌入页面进行展现。

具体查询视图的创建开发，请参考https://www.yuque.com/o2oa/cfst8l/ag18xu

1、嵌入查询视图属性

属性和嵌入视图属性一致。

嵌入查询视图中的“查询”标签页属性如下：

属性	描述	备注
查询	选择要嵌入的查询视图
立即载入	是否在页面加载时同时加载视图	如果选择“否“，您可以在任何时候通过脚本：view.active(); 方法来加载视图
显示标题	是否显示视图的列标题
选择文件	选择是否可以选择视图中条目。	不允许：不能选择；单选：可以选择单个条目多选：可以选择多个条目
操作条	视图的操作条是否显示
过滤	对视图内容进行过滤

属性	描述	备注
路径	要过滤的 JSON 数据路径	流程和内容管理的数据，都以 JSON 格式存储和展现，如果数据格式如以下形式： { “title“:”标题”, ”count”:5, ”keyword”:”测试”, ”item”:{ “name”: “123”, “value”: “456” } }，这时要用 title 进行过滤，数据路径就是”title“；如果要对 item 中的 value 进行过滤，路径就是 item.value。
选择	查询那边配置的字段选择
数据类型	要过滤的数据的类型
逻辑	多条过滤条件连接的逻辑运算符	and 或 or
比较	路径和值的比较符
值	和路径数据比较的值。	通过脚本返回值

2、嵌入查询视图事件

与嵌入视图一致

3、嵌入查询视图方法

以上是门户设计器中嵌入视图、嵌入统计与嵌入查询组件的简要说明，如需了解门户页面开发的更多内容，请参考以下文章：

《门户开发-门户设计开发入口和权限说明》

用户常见问题

整理自藕粉社区真实提问，按浏览量排序

Q门户页面中嵌入了一个视图view和统计stat，如何将统计的数据来源绑定到视图view上？

以上简要说明了门户设计器中嵌入视图、嵌入统计与嵌入查询组件的用法，更多门户页面开发内容可参考以下文章：

查看原帖讨论 · 32,025 次浏览

Q自定义数据表，查询配置新建查询视图，无法多条件过滤

视图过滤是视图的核心功能，填写“路径”、“数据类型”、“逻辑”、“比较”和“值”之后点击添加按钮，即可把该条件加入默认过滤条件中。

查看原帖讨论 · 21,358 次浏览

Q查询视图筛选相关

查询视图是平台提供的一个设计元素，可以在数据中心创建，用于展现自建表、流程实例或内容管理实例的列表。

查看原帖讨论 · 20,558 次浏览

以上问题仍无法解决？到藕粉社区提问，或致电 400-888-0545。