跳到主要内容
版本: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 变量在触发此事件之前更新。

应用排序​

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

单元格值已更改​

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

过滤器已更改​

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

暴露的变量​

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

风格​

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

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