视图类型

在Oinone平台中，界面设计器提供了多种视图类型，以满足不同应用场景下的界面设计需求。

以下是关于表单、表格、详情、画廊和树视图这五种视图类型的介绍：

一、表单

表单视图是一种用于数据输入和展示的视图类型。它通常包含多个字段（如文本框、下拉列表、单选按钮等），用户可以在这些字段中输入或选择数据。表单视图适用于需要用户填写并提交信息的场景，如注册页面、信息填写表单等。

举例

表单视图展示效果：

在画布设计区，表单视图会默认提供一个表单组件，在该表单组件中配置的属性可作用于整个表单视图

标题排列方式：即标题与其内容的排列，分为横向和纵向两种。
禁用数据加载：开启此选项后，将不执行数据加载函数。
加载函数：若开启禁用数据加载，不显示该属性。在实际页面中选择某一选项值时，将执行该函数加载数据。
关联关系更新类型：当表单中的关联关系字段更新时数据的提交方式，包括全量提交与差量提交。
- 全量提交：提交全部数据。
- 差量提交：仅提交有更新的数据。

举例

若表单中有多个字段，其中只有部分字段的数据发生了变化

选择差量提交时，仅会提交这些发生变化的字段数据
选择全量提交时，则会提交表单中所有字段的数据，无论其是否发生变化。

二、详情

详情视图用于展示数据项的详细信息，不可编辑。它通常与其他视图配合使用，用户可以通过其他视图中的链接或按钮进入详情视图查看数据项的详细信息。详情视图可以包含多种类型的字段，以提供丰富的信息展示。

举例

详情视图展示效果：

在画布设计区，详情视图会默认提供一个详情组件，在该详情组件中配置的属性可作用于整个详情视图

标题排列方式：即标题与其内容的排列，分为横向和纵向两种。
详情页样式：提供两种详情页的展示效果
- 无边框：界面呈现简洁无装饰的效果
- 有边框：详情内容外围会增加边框与圆角阴影的装饰效果，让信息模块更具容器区分感
禁用数据加载：开启此选项后，将不执行数据加载函数。
加载函数：若开启禁用数据加载，不显示该属性。在实际页面中选择某一选项值时，将执行该函数加载数据。

三、表格

表格视图用于以行和列的形式展示数据集合。每一行代表一个数据项，每一列代表数据项的一个属性。它适用于需要直观展示和操作数据集合的场景，如订单管理、客户列表等。

提示

在表格中，除常规表格外，还支持树表和级联两种高级视图，以满足更复杂的展示需求。

举例

默认表格视图展示效果：

在画布设计区，表格视图默认包含一个搜索组件和一个表格组件，对这两个组件的属性配置将影响全局设置。当拖动其他组件进入画布时，必须将其放置在搜索组件或表格组件的内部，否则将无法成功创建该组件。

（一）默认表格

搜索组件属性
- 隐藏搜索按钮：若启用此选项，搜索组件中的所有动作按钮将会被隐藏。如需进行搜索，可按下回车键来执行搜索操作。
- 禁用折叠：若启用此选项，搜索区域将保持固定状态，不允许进行展开或收起操作。
- 选项卡标签：当页面所在模型下存在数据字典类型字段时，可为搜索组件设置选项卡标签。配置后，搜索栏将以标签卡的形式呈现。
表格组件属性
- 显示行号：若启用此选项，表格将自动在首列添加序号列，以便用户更便捷地查看数据顺序。
- 显示复选框：若启用此选项，表格将在起始位置显示复选框，允许用户勾选所需的数据项。
- 复选框可选范围：可设置复选框可被选择的条件，符合条件的数据的复选框可选，不符合条件时禁用。未设置条件则所有均可选
- 自动列宽：若启用此选项，表格的表头宽度将根据其内容自动进行适配调整。
- 最小列宽：即表格每列所允许的最小宽度。
- 自动行高：当单个单元格的高度超过其他单元格时，当前行高会根据最高单元格进行变化。
- 行高：可自定义表格显示的最小行高。
- 切换行高：启用此属性后，表格在运行时会显示行高调节图标。用户可点击图标，从下拉菜单中选择行高，包括：默认（使用设计时设置的行高）、低、中、高、自适应（行高根据内容自动调整）。
注意
如果用户在使用表格时切换了行高，则设置的自动行高将失去效果
- 操作列显示数量：表格最右侧的操作列将默认展示一定数量的操作项，超出此数量的操作项将被折叠收起。
- 操作列排列方向：表格最右侧操作列中的动作项可按照水平或竖直方向进行排列。
- 操作列宽度：允许用户自定义表格最右侧操作列的宽度。
- 操作列按钮样式：操作列中的动作项可采用不同的按钮样式，包括主要按钮、次要按钮以及不设置样式三种选项。
注意
主要按钮：以按钮形式呈现，具有底色，突出显示。
次要按钮：同样以按钮形式呈现，但无底色，相对低调。
不设置样式：不采用按钮样式，动作项以普通文本形式展示。
- 分页器风格：分页器的展示样式，提供简约、标准以及隐藏三种风格供选择。
- 默认分页条数：即每页显示的数据条目数。
- 查询条件：在实际页面展示中，会按照配置的查询条件展示数据。
- 支持展开行：若开启此选项，可选定展示字段设置展开行视图
  - 默认展开全部：若启用此功能，在实际展示页面中，所有展开行将直接呈现，无需额外操作。
  - 展开操作展示字段定义：可从当前页面所属模型中选择字段，选定后，在实际展示页面中可展开该字段，以查看所设置的展开行视图。
  - 设置展开行视图：可根据当前模型或关联模型自定义展开行的视图。不同模型提供的视图类型可能有所不同，请根据实际情况进行选择。可选择复制已有页面，或使用新页面来创建展开行视图。
  - 展开行上下文：当数据在不同位置名称不一致，但实质上指代同一数据时，可通过配置展开行上下文来实现数据的映射。
- 支持树形展示:若启用此功能，表格数据将根据设置的关联字段和展开字段，以树形结构的形式进行直观展示。
  - 默认展开全部：若启用此功能，在实际展示页面中，所有展开行将直接呈现，无需额外操作。
  - 关联字段：需从表格所属模型中选择一个自关联字段，作为树形结构中的关联依据。
  - 展开字段：可选择表格中的某一字段作为树形结构的展开字段，以便更好地展现数据的层次和关系。
- 双击行动作：允许用户自定义跳转动作，当在表格中双击某一行时，将自动执行所设定的动作。
- 启用行内编辑：若启用此功能，用户无需跳转至编辑页面，即可直接在表格中对数据进行快捷编辑。该功能提供三种编辑模式，分别为整行编辑、单元格编辑与自定义编辑。
  - 整行编辑：当用户点击某一数据项时，整行数据将进入编辑状态，方便用户对该行数据进行全面修改。
  - 单元格编辑：当用户点击某一数据项时，仅该特定单元格将进入编辑状态，实现精准修改。
  - 自定义编辑：用户可根据实际需求，自定义编辑操作的范围和具体编辑动作，提供更高的灵活性和个性化设置。
- 禁用数据加载：开启此选项后，将不执行数据加载函数。
- 加载函数：若开启禁用数据加载，不显示该属性。在实际页面中选择某一选项值时，将执行该函数加载数据。
- 切换全屏：开启此属性后，用户可手动选择是否全屏展示表格
- 快捷键：启用此功能后，用户可在表格视图中使用以下快捷键对允许编辑的字段列进行快速操作。此外用户可在表格右上方查看快捷键提示面板。
注意
1. 以上可编辑单元格的快捷键，仅对表头带“编辑图标”的单元格生效
2. 整行编辑完成后，单元格内所有可编辑数据将统一提交;若在编辑过程中按下Enter 键本行中已编辑但尚未提交的数据也会同步提交
3. 若在编辑过程中按下 ESC 键，本行内已编辑但尚未提交的数据将被一井丢弃

操作	快捷键
向左移动单元格	`Shift` + `Tab`
向右移动单元格	`Tab`
提交数据	`Enter`
取消编辑	`Esc`

排序

开启了“允许用户排序”后，此功能允许您在表格中设置和管理数据的排序规则，以便更高效地查看和分析信息。

默认排序：如果系统在设计时配置了默认排序规则，表格加载时，数据将按照预设的默认排序规则进行排列。
- 单字段排序：相应列标题旁显示当前排序顺序
- 多字段排序：弹窗中将默认显示该字段及其当前的排序配置。
排序方式：表格提供两种设置排序的方式，它们的生效范围不同：
- 单字段排序（表头设置）
  - 操作位置：直接点击表格的列标题旁排序图标。
  - 生效逻辑：排序仅对当前点击的字段生效。这是一种快速的单级排序方式，会覆盖当前已应用的所有排序规则（包括弹窗中设置的多字段排序）。
- 多字段排序（图标弹窗设置）
  - 操作位置：点击表格右上角的排序图标。
  - 生效逻辑：可对多个字段设置排序规则，并支持手动拖拽调整优先级（排在越上方的字段，优先级越高）。完成配置后，点击“确定”按钮应用多级排序。
删除排序
- 单字段排序：点击列标题旁“取消排序”按钮。
- 多字段排序：点击字段旁的删除图标

分组

开启了“允许数据分组”后，此功能允许您根据选择的一个或多个字段对表格数据进行组织和分类，从而提高数据的可读性和分析效率。

注意

分组功能与树形表格互斥，两者不可同时开启。

默认分组设置：在表格设计时配置，用于确定表格加载时的初始分组状态。
- 配置权限：仅在设计时开启“允许数据分组”后生效。
- 字段范围：可选择该表格中字段作为默认分组字段，不受限于表格当前展示的列。
- 设置多个字段：可选择一个或多个字段。若设置多个，运行时将按照列表的优先级顺序（从上至下）依次对数据进行分组。
分组方式：运行时，用户可以通过两种方式设置或修改分组字段。
- 表头分组
  - 操作位置：在表格的列标题（表头）中，点击 “以此字段分组”。
  - 功能：快速将该字段添加为分组字段。新字段会追加到现有分组列表的末尾，优先级依次降低。
  - 取消分组：如果该列已经是分组字段，则表头显示 “取消分组” 选项，点击可移除该分组设置。
- 高级分组
  - 操作位置：点击表格右上角的分组图标
  - 功能：支持添加一个或多个字段作为分组字段。可手动拖拽弹窗中已添加的字段，调整其分组优先级
删除分组
- 表头分组：点击列标题旁“取消分组”按钮。
- 高级分组：点击字段旁的删除图标

（二）树表

举例

表格-树表视图展示效果：

树表与默认表格在搜索组件和表格组件上保持一致，其区别在于树表额外增加了树形结构。通过设置树形结构，树表能够以层次化的形式展示数据，使得数据呈现更加清晰直观，在此，仅针对树的相关属性进行介绍，如需了解搜索组件与表格组件的详情，请查阅默认表格的相关介绍。

联动关系：指树形结构中需要展示的模型字段，用户可自定义设置多层联动关系。
- 层级关联关系字段：在设置多层联动关系时，从第二级开始及其后续层级中，将显示此属性，用于定义与上级模型的关联关系字段。
- 数据标题：即选项值名称，当进行多选时，这些数据将被拼接起来显示。默认选项字段为名称。
- 筛选条件：在实际页面展示中，会按照配置的筛选条件展示数据。
- 表格关联关系字段：指当前层级模型与页面所选模型之间的关联关系字段。
- 自关联关系字段：指当前层级模型中，与自身模型相一致的字段。

注意

必须构成完整的关联关系字段，才能成功生成联动关系。

支持搜索：若开启此功能，将在树形结构中展示搜索框，可对层级字段进行筛选。
展开层级：若设置了多层联动关系，可指定展开至哪一层级。

（三）级联

与树表相似，其区别在于级联中增加了级联组件。在实际页面展示中，树表会动态地在下方展示子级选项，而级联则会动态地在右侧展示子级选项。在此，仅针对级联的相关属性进行介绍，如需了解搜索组件与表格组件的详情，请查阅默认表格的相关介绍。

举例

表格-级联视图展示效果：

联动关系：指树形结构中需要展示的模型字段，用户可自定义设置多层联动关系。
- 层级关联关系字段：在设置多层联动关系时，从第二级开始及其后续层级中，将显示此属性，用于定义与上级模型的关联关系字段。
- 数据标题：即选项值名称，当进行多选时，这些数据将被拼接起来显示。默认选项字段为名称。
- 筛选条件：在实际页面展示中，会按照配置的筛选条件展示数据。
- 表格关联关系字段：指当前层级模型与页面所选模型之间的关联关系字段。
- 自关联关系字段：指当前层级模型中，与自身模型相一致的字段。

注意

必须构成完整的关联关系字段，才能成功生成联动关系。

支持搜索：若开启此功能，将在树形结构中展示搜索框，可对层级字段进行筛选。

四、画廊

画廊视图以卡片的形式展示内容项，用户可以直观的浏览不同的内容项。适用于需要展示视觉内容丰富的场景，如产品展示、相册浏览等。

举例

画廊视图展示效果：

在画布设计区，画廊视图由两个页面组成，分别为“设计卡片”和“设计其他”。在“设计卡片”页面，用户可以对画廊中的单个卡片视图进行设计，设计效果将应用于所有卡片。而“设计其他”页面则默认包含一个搜索组件和一个画廊组件，对这两个组件的属性配置将影响全局的设置。

卡片属性：
- 卡片
  - 排列顺序：包含三个区域，分别为标题区、内容区与动作区，可自由拖拽展示顺序
  - 单击跳转：可以配置点击卡片主体区域时的跳转行为，配置方式同跳转动作
  - 文字动作区：位于卡片右上角，是一个可下拉展开的动作集合，下拉后可使用各类操作动作
  提示
  若需配置该区域的动作，可按以下步骤操作：
  1. 找到卡片配置界面中的 “文字动作区” 模块，点击模块区域将其展开；
  2. 在组件库中，找到你需要的动作并拖拽至 “文字动作区” 内；
  3. 完成拖拽后，配置的动作会自动加入右上角的动作集合，后续查看卡片时，点击右上角的动作区下拉，即可看到并使用这些操作
  - 时间差：启用此功能后，卡片内会自动展示当前系统实际时间与预先选择的 “绑定字段”中的时间之间的时间间隔，可以快速掌握两个时间节点的差距
  - 卡片最小/大宽度：可设置卡片宽度的展示区间
  - 卡片最小高度：限定卡片高度的 “下限值”，无论卡片内的内容多少，卡片高度都不会小于设置的这个值。
- 标题区/内容区/操作区
  - 边框可见性：可自定义设置边框的四边是否可见。
  - 边框颜色：当存在可见边框时，显示该属性。可为可见边框设定颜色。
  - 内容超长时：针对卡片标题区与内容区，单独配置 “内容超长时” 的显示规则：找到对应区域的配置项后，点击 “内容超长时” 下拉菜单，即可选择 “自动换行” 或 “禁用自动换行” 两种模式。
    - 若选择 “自动换行”，当标题或内容的长度超出卡片宽度时，系统会自动将多余内容折行显示，确保所有信息完整呈现，无需手动调整即可查看全部内容。
    - 若选择 “禁用自动换行”，当标题或内容超出卡片显示范围时，系统会自动截断超出部分（避免内容溢出影响界面整洁）

搜索组件属性
- 隐藏搜索按钮：若启用此选项，搜索组件中的所有动作按钮将会被隐藏。如需进行搜索，可按下回车键来执行搜索操作。
- 禁用折叠：若启用此选项，搜索区域将保持固定状态，不允许进行展开或收起操作。
- 选项卡标签：当页面所在模型下存在数据字典类型字段时，可为搜索组件设置选项卡标签。配置后，搜索栏将以标签卡的形式呈现。

画廊组件属性
- 一行展示卡片数量：即在一行中能够展示的卡片数量。
- 分页器风格：分页器的展示样式，提供简约、标准以及隐藏三种风格供选择。
- 默认分页条数：即每页显示的数据条目数。
- 查询条件：在实际页面展示中，会按照配置的查询条件展示数据。
- 禁用数据加载：开启此选项后，将不执行数据加载函数。
- 加载函数：若开启禁用数据加载，不显示该属性。在实际页面中选择某一选项值时，将执行该函数加载数据。

五、树视图

树视图用于以层次结构的形式展示数据项。每个数据项可以包含子项，形成层级结构。树视图支持展开和折叠操作，方便用户查看和管理具有层级关系的数据。适用于需要展示具有层级关系的数据的场景，如组织架构图、分类目录等。

注意

表格中的树表与树视图中的树表有所区别，级联同理：

表格中的树表以表格的模型为主模型
树视图中的树表则以树表的模型为主模型，左侧表单为展开的内容部分。

树视图分为树表和级联两种类型，由级联组件（或树形组件）与选定的视图类型组件共同构成。关于表单组件的相关属性，已在上述内容中详细介绍，此处不再赘述。

（一）树表

举例

树视图-树表视图展示效果：

联动关系：指树形结构中需要展示的模型字段，用户可自定义设置多层联动关系。
- 层级关联关系字段：在设置多层联动关系时，从第二级开始及其后续层级中，将显示此属性，用于定义与上级模型的关联关系字段。
- 数据标题：即选项值名称，当进行多选时，这些数据将被拼接起来显示。默认选项字段为名称。
- 筛选条件：在实际页面展示中，会按照配置的筛选条件展示数据。
- 自关联关系字段：指当前层级模型中，与自身模型相一致的字段。
支持展开页面：启用此功能后，可设置展开行视图。在实际展示页面的树形结构中，选择某一项后即可显示该视图。
- 视图类型：用户可选择展开行视图的类型，包括“详情”和“表单”两种选项。
- 页面模型：指当前页面所关联的模型。
- 页面内容：用户可选择复制已有页面或使用新页面。选择使用新页面时，可在所选的视图类型下自定义内容。
- 复制页面：当选择复制已有页面时，此属性将显示。用户可选择当前模型下符合视图类型的已发布页面进行复制。
支持搜索：若开启此功能，将在树形结构中展示搜索框，可对层级字段进行筛选。
展开层级：支持指定页面默认展开至哪一层级。

（二）级联

举例

树视图-级联视图展示效果：

注意

当存在两级以上联动关系时，才会在实际展示页面中以级联的方式呈现。当只有一级联动关系时，实际展示页面与树形树视图的展示页面一致。

联动关系：指树形结构中需要展示的模型字段，用户可自定义设置多层联动关系。
- 层级关联关系字段：在设置多层联动关系时，从第二级开始及其后续层级中，将显示此属性，用于定义与上级模型的关联关系字段。
- 数据标题：即选项值名称，当进行多选时，这些数据将被拼接起来显示。默认选项字段为名称。
- 筛选条件：在实际页面展示中，会按照配置的筛选条件展示数据。
- 自关联关系字段：指当前层级模型中，与自身模型相一致的字段。
- 标题：即每一级联框的标题。
支持展开页面：启用此功能后，可设置展开行视图。在实际展示页面的级联结构中，选择某一项后即可显示该视图。
- 视图类型：用户可选择展开行视图的类型，包括“详情”和“表单”两种选项。
- 页面模型：指当前页面所关联的模型。
- 页面内容：用户可选择复制已有页面或使用新页面。选择使用新页面时，可在所选的视图类型下自定义内容。
- 复制页面：当选择复制已有页面时，此属性将显示。用户可选择当前模型下符合视图类型的已发布页面进行复制。
支持搜索：若开启此功能，将在级联结构中展示搜索框，可对层级字段进行筛选。