视图类型

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

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

一、表单

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

举例

表单视图展示效果：

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

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

举例

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

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

二、详情

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

举例

详情视图展示效果：

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

标题排列方式：即标题与其内容的排列，分为横向和纵向两种。
禁用数据加载：开启此选项后，将不执行数据加载函数。
加载函数：若开启禁用数据加载，不显示该属性。在实际页面中选择某一选项值时，将执行该函数加载数据。

三、表格

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

提示

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

举例

默认表格视图展示效果：

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

（一）默认表格

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

（二）树表

举例

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

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

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

注意

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

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

（三）级联

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

举例

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

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

注意

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

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

四、画廊

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

举例

画廊视图展示效果：

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

卡片属性：
- 边框可见性：可自定义设置边框的四边是否可见。
- 边框颜色：当存在可见边框时，显示该属性。可为可见边框设定颜色。
搜索组件属性
- 隐藏搜索按钮：若启用此选项，搜索组件中的所有动作按钮将会被隐藏。如需进行搜索，可按下回车键来执行搜索操作。
- 禁用折叠：若启用此选项，搜索区域将保持固定状态，不允许进行展开或收起操作。
- 选项卡标签：当页面所在模型下存在数据字典类型字段时，可为搜索组件设置选项卡标签。配置后，搜索栏将以标签卡的形式呈现。
画廊组件属性
- 一行展示卡片数量：即在一行中能够展示的卡片数量。
- 分页器风格：分页器的展示样式，提供简约、标准以及隐藏三种风格供选择。
- 默认分页条数：即每页显示的数据条目数。
- 查询条件：在实际页面展示中，会按照配置的查询条件展示数据。
- 禁用数据加载：开启此选项后，将不执行数据加载函数。
- 加载函数：若开启禁用数据加载，不显示该属性。在实际页面中选择某一选项值时，将执行该函数加载数据。

五、树视图

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

注意

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

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

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

（一）树表

举例

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

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

（二）级联

举例

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

注意

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

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