跳到主要内容
版本:v2.0.0-zh

表格

表格可用于显示和编辑数据。

表数据

ToolJet - 小部件参考 - 表格

要在表格上显示的对象数组。它通常用于显示来自查询的数据({{queries.restapi1.data}})。表数据需要一个对象数组,例如:

{{[{ id: 1, name: 'Sarah', email: 'sarah@example.com'}]}}

一旦提供了预期的表数据(对象数组),表组件将自动生成所有列

ToolJet - 小部件参考 - 表格

单元格数据类型

您可以使用以下命令根据表格的数据源定义单元格类型:

  • 字符串 |默认:用于呈现单元格类型的数据:文本或文本区域
  • Number:此单元格类型将只需要numerical 值,并且可以按升序或降序排序
  • Badge:这是一个标签组件,用于显示带有徽章的数据,例如 status of a shipment
  • 多个徽章:类似于徽章,用于以对象数组的形式显示多个数据徽章,
  • 标签:用于以标签形式显示对象数组,例如状态、级别、步骤
  • Dropdown:当数据是要选择的选项数组的形式时,例如 select priority
  • Radio:用于从一组选项中进行选择,例如 select your salary-range
  • Multiselect:类似于下拉菜单,但从选项列表中收集多个用户输入,
  • 拨动开关:允许用户在两​​种状态之间更改设置,例如在是/否之间选择
  • 日期选择器:允许用户显示和选择日期,例如交货日期
  • Image:此单元格类型需要图像的 URL,并将在单元格中显示图像。它还可以选择设置图像样式。
信息

检查此 操作指南 以动态更改表中行和列中文本的颜色。

显示数据

数据对象应该是一个对象数组。可以从检查器中添加、删除、重新排列表格列。 key 属性是用于从表数据对象的单个元素获取数据的访问器键。例如:

如果表数据是:

[
{
`审查`{
"title": "应用评论"
},
`用户`{
`名字``山姆`
`电子邮件``sam@example.com`
},
}
]

要显示电子邮件列,该列的键应该是 user.email

保存数据

启用列的 可编辑 属性以使单元格可编辑。如果未选择数据类型,则选择 字符串 作为数据类型。

如果单元格中的数据发生更改,表对象的 changeSet 属性将具有更改的行和字段的索引。 例如,如果更改了 显示数据 部分中示例第二行的名称字段,则 changeSet 将如下所示:

{
2{
"name": "新名字"
}
}

changeSet 一起,dataUpdates 属性也会在单元格的值发生变化时发生变化。 dataUpdates 将从表数据中获得更改索引的全部数据。对于我们的示例,dataUpdates 将如下所示:

[{
`审查`{
"title": "应用评论"
},
`用户`{
"名称": "新名称",
`电子邮件``sam@example.com`
},
}]

如果更改了单元格的数据, 保存更改 按钮将显示在表格的底部。单击此按钮将触发 批量更新查询 事件。此事件可用于运行查询以更新数据源上的数据。

验证

在列属性下,展开列类型的详细视图以访问名为 使可编辑 的切换按钮。您可以将其切换为 ON 以分别使用以下内容对每列应用验证。

正则表达式

使用此字段输入将验证密码约束的正则表达式。

最小长度

输入允许的最小密码长度的数字。

最长长度

输入允许的最大密码长度的数字。

自定义验证

如果条件为真,则验证通过,否则返回应显示为错误消息的字符串。例如:{{components.passwordInput1.value === 'something' ?真: 价值应该是某种东西 }}

动作按钮

ToolJet - 小部件参考 - 表格

操作按钮将显示为表格的最后一列。这些按钮的样式可以自定义,并且可以配置 点击 操作。单击时,表格的 selectedRow 属性将具有该行的表格数据。

物业说明
背景颜色(操作按钮)操作按钮的背景颜色。
文本颜色(操作按钮)操作按钮的按钮文本颜色。

选项

信息

任何在其字段旁边具有 Fx 按钮的属性都可以以编程方式配置

服务器端分页

服务器端分页可用于在页面更改时运行查询。转到检查器的事件部分并更改 on page changed 事件的操作。每页的记录数需要在您的查询中处理。如果启用了服务器端分页,pageIndex 属性将在表对象上公开,该属性将具有当前页面索引。 pageIndex 可用于在页面更改时查询下一组结果。

启用服务器端分页后,您将能够设置其他三个表格属性:

  • 启用上一页按钮:启用服务器端分页时,默认启用此按钮。关闭此选项以禁用表格中的上一页按钮。
  • 启用下一页按钮:启用服务器端分页时,默认启用此按钮。关闭此选项以禁用表格中的下一页按钮。
  • 服务器端总记录数:设置一个数值以显示特定的记录数。

客户端分页

默认启用客户端分页。当启用客户端分页时({{true}}),将显示另一个属性每页行数,可用于设置每页记录数。默认情况下,该值设置为 10,如果它被禁用({{false}}),那么它将在单个页面中显示所有记录。

服务器端搜索

如果启用服务器端搜索,则在更改 searchText 属性的内容后会触发 on search 事件。 searchText 可用于运行特定查询以搜索数据源中的记录。

显示下载按钮

在表页脚显示或隐藏下载按钮。

隐藏/显示列

表格标题有一个选项(眼睛图标)来显示/隐藏表格中的一个或多个列。

显示过滤器按钮

在表格标题处显示或隐藏过滤器按钮。以下过滤器可用:

  • 包含
  • 不含
  • 火柴
  • 不匹配
  • 等于
  • 不等于
  • 是空的
  • 不为空
  • 比...更棒
  • 大于或等于
  • 少于
  • 小于或等于

显示更新按钮

它默认启用。每当编辑单元格时,表页脚将显示两个更新按钮保存更改放弃更改。切换 关闭 以隐藏更新按钮。

批量选择

要让用户从表格的当前页面中选择一行或多行,请从检查器中启用 批量选择 。所选行的值将显示为 selectedRows

高亮选中的行

启用此选项可突出显示最后选择(单击)的行。

禁用排序

启用此选项可在单击列名称时锁定列的排序。

服务器端排序

启用服务器端排序时,单击列标题不会自动对表格进行排序,而是会触发 应用排序 事件,并将应用的排序显示为 sortApplied 。您可以使用此数据运行任何查询,以反映所应用排序的方式将数据馈送到表中。

服务器端过滤器

启用服务器端过滤器后,应用过滤器不会自动过滤表格,而是会触发 过滤器已更改 事件,并将应用的过滤器公开为 过滤器 。您可以使用此数据运行任何查询,以反映所应用过滤器的方式将数据提供给表。

显示搜索框

它可用于显示或隐藏表格搜索框。默认情况下启用客户端搜索,并且可以从检查器的事件部分启用服务器端搜索。每当搜索文本发生变化时,表格组件的 searchText 属性就会更新。如果启用服务器端搜索,则在更改 searchText 属性的内容后会触发 on search 事件。 searchText 可用于运行特定查询以搜索数据源中的记录。

如果您不想完全使用搜索功能,可以从检查器中禁用它。

加载状态(布尔值)

加载状态显示表格的加载骨架。此属性可用于在加载数据时在表上显示加载状态。查询的 isLoading 属性可用于获取查询的状态。

事件

行悬停

当鼠标指针移到表中的一行上时会触发此事件。表格的 hoveredRowId 公开变量将包含最新悬停行的 ID,表格的 hoveredRow 属性将包含对象格式的悬停行的数据。

行被点击

单击表格行时会触发此事件。表格的 selectedRowId 公开变量将包含所选行的 ID,表格对象的 selectedRow 属性将包含所选行的表格数据。

保存更改

如果表格的任何单元格被编辑, 保存更改 按钮会出现在表格的底部。单击此按钮时会触发保存更改事件。

取消更改

如果表格的任何单元格被编辑, 放弃更改 按钮会出现在表格的底部。单击此按钮时会触发取消更改事件。

页面已更改

如果启用了服务器端分页,则当当前页面更改时会触发此事件。此事件在更新 pageIndex 变量后触发。

搜索

当在表格的搜索输入框中输入文本时会触发此事件。 searchText 变量在触发此事件之前更新。

应用排序

单击列名称标题以应用 ascdesc 中的排序时会触发此事件。 sortApplied 变量被更新为具有 columndirection 值的对象。

单元格值已更改

如果表格的任何单元格被编辑,就会触发 单元格值已更改 事件。

过滤器已更改

当从表的过滤器部分添加、删除或更新过滤器时,将触发此事件。表的 filters 属性已更新,以反映所应用过滤器的状态。这些对象将具有属性:conditionvaluecolumn

暴露的变量

变量说明
当前数据表格当前显示的数据(包括编辑,如果有的话)
当前页面数据如果启用分页,则显示在当前页面上的数据(包括编辑,如果有的话)
页面索引当前页的索引,从 1
变更集以行号为键的对象,以编辑字段的对象及其值为值
数据更新就像 changeSet 但包括整行的数据
选择行最后单击的行的数据。单击操作按钮时,selectedRow 也会发生变化
搜索文本启用服务器端分页时搜索字段的值

风格

款式说明
文字颜色通过提供 十六进制颜色代码 或从选择器中选择一个来更改表格中文本的颜色
动作按钮半径该字段可用于为所有操作按钮提供半径。默认值为 0
表格类型从下拉列表中选择一种表格。
单元格大小这决定了表格单元格的大小。您可以在表格单元格的 紧凑 尺寸或 宽敞 尺寸之间进行选择
能见度打开或关闭以控制小部件的可见性。您可以通过单击旁边的 Fx 按钮以编程方式更改其值。如果为 {{false}},则在部署应用程序后小部件将不可见。默认情况下,它设置为 {{true}}
禁用打开以锁定小部件。您可以通过单击旁边的 Fx 按钮以编程方式更改其值,如果设置为 {{true}} ,该小部件将被锁定并变得无法使用。默认情况下,它的值设置为 {{false}}
边界半径使用此属性修改按钮的边框半径。
信息

任何在其字段旁边具有 Fx 按钮的属性都可以以编程方式配置