数据组件

数据

隐藏

You can use the Hidden component to create a resource property that can be custom set inside a form. It doesn't display in rendered forms.

容器

You can use the Container component to wrap a set of fields into an object with a container key. A Container with the key financialPerformance submits as:

{
                    data: {
                    financialPerformance {
                    grossProfitMargin: "0.83",
                    [tab]netProfitMargin: "0.43"
                    }
                    }
                    }

数据映射

数据类型： System.Collections.Generic.Dictionary<System.String,System.String>

使用“数据映射”组件创建键值对。该组件在运行时可编辑，因此用户可以通过单击“添加其他”创建新的键值对 。

备注：

“键”字段默认为文本字段，无法更改。“值”字段可随其他组件一起更改。

• “键列的标签” - 设置要为“键”列显示的标签。如果留空，则列的名称仍为键。
• “禁用添加/删除行” - 在表单显示时隐藏允许添加或删除行的按钮。
• 在值之前显示键列- 选择是否要在值列之前显示键列。
• 添加其他文本- 设置为“添加其他”按钮显示的文本。

“布局”选项卡仅特定于“数据映射”组件：

• HTML 属性- 向组件添加自定义 HTML 属性。
  备注：

  其他组件的属性主导您配置的属性。

• PDF 覆盖- 将样式设置应用于 PDF 表单。

要了解如何使用“数据映射”组件，请查看使用数据映射组件教程。

数据网格

You can use the Data Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple components in the Data Grid to match your use case.

In the Form Renderer window, the rows inside the Data Grid component can be added or removed.

• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Allow Reorder - reorder rows by dragging and dropping them.
• Equal Column Width - makes the widths of columns equal.
• Enable Row Groups - allows separating rows into groups. Add groups, label them, and select the rows for each group.
• Initialize Empty - the Data Grid will have no visible rows when initialized.

编辑网格

You can use the Edit Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple form components into the Edit Grid, to capture loads of data.

When the form renders, you can add a duplicate of the Edit Grid, by clicking Add Another.

• Open First Row when Empty - opens the first row when the Edit Grid is empty.
• “禁用添加/删除行” - 在表单显示时隐藏允许添加或删除行的按钮。
• Add Another Text - changes the name of the Add Another button.
• Save Row Text - changes the text of the Save Row button.
• Remove Row Text - changes the text of the Remove Row button.

“模板”选项卡仅适用于“编辑网格”组件。页眉、行和页脚模板允许您使用 JavaScript 自定义网格。您可以修改在网格的行中显示的组件类型或页眉/页脚的外观。

标头模板

This is the Lodash Template used to render the header of the Edit Grid component.

重要提示：

标头模板不适用于表单操作。

有两个变量可用：

• value - the array of row data.
• components - the array of components in the grid.

行模板

This is the Lodash Template used to render each row of the Edit Grid component.

重要提示：

行模板不适用于表单操作。

提供三个变量：

• row - object of one row's data.
• components - the array of components in the grid.
• state - current row's state (draft/saved).

To add Click type events, add the following classes to elements: editRow and removeRow.

页脚模板

This is the Lodash Template used to render the footer of the Edit Grid component.

有两个变量可用：

• value - the array of row data.
• components - the array of components in the grid.

数据表

您可以使用数据表组件呈现多行数据，就像数据表一样。数据表是一个只读组件，可用于显示大量数据。您可以将多个表单组件拖放到数据表组件中。

• 可排序- 按升序或降序对列内的数据进行排序。您可以在运行时对数据进行排序。
• 可筛选- 筛选每列中的数据。在运行时筛选数据。
• 可调整大小的列- 在运行时更改列宽。“列”可调整大小功能可让您更好地查看列中的数据。
• 分页- 在编号的页面上显示数据表组件的数据。分页功能还包括设置每页的项目数。
• 内联编辑- 允许在运行时进行编辑，类似于在 Excel 中进行的编辑。

可排序

您可以按升序或降序对列中的数据进行排序。 您可以在 Runtime的表单中对数据进行排序。

数据表中数据的显示顺序与输入数据表中的顺序相同。要对数据表中的所有数据进行排序，请单击表单中的任何列标题。

• First click sorts the data in ascending order.

• Second click sorts the data in descending order.

• Third click restores the original order.

  

可筛选

您可以筛选每列中的数据。 您可以在显示表单时筛选数据。

要筛选列中的数据，请执行以下操作：

1. 将鼠标悬停在列标题上，然后单击三元组菜单。
2. 选择筛选操作。
3. Input a value in the Filter field of the triple bar menu. The input value in the Filter field is a condition for the filtering operation.

根据数据类型，可以使用以下筛选操作：

筛选操作	文本	数字	日期/时间
包含	✅	❌	❌
不包含	✅	❌	❌
等于	✅	✅	✅
不等于	✅	✅	✅
开头为	✅	❌	❌
结尾为	✅	❌	❌
小于	❌	✅	✅
小于或等于	❌	✅	❌
大于	❌	✅	✅
大于或等于	❌	✅	❌
在范围内	❌	✅	✅
空白	✅	✅	✅
非空白	✅	✅	✅