添加一个小部件

要添加小部件，请导航至右侧栏中的“小部件管理器”。它将显示可以添加到应用程序的内置小部件列表。使用搜索功能快速找到您想要的小部件。

拖放一个小部件

让我们向应用程序添加一个“表格”小部件，以显示我们在前面步骤中创建的查询中的客户数据。 要添加小部件，请将小部件拖放到画布上。

调整小部件的大小

小部件可以在画布内调整大小和重新定位。

将小部件添加到模态

添加一个widget到Modal，我们需要触发Show modal action

:::info 在触发“Show modal action”之前，我们需要向画布添加一个模态小部件。 :::

• 向应用程序添加一个“模态小部件”
• 触发显示模态动作
• 单击“Widget manager”侧边栏的画布区域
• 导航到右侧栏上的小部件管理器并将小部件拖放到模式中

调整表格列的大小

我们可以使用列的调整大小句柄调整列宽。

更改小部件属性

单击小部件以打开右侧栏上的检查面板。您可以在此处更改小部件的属性。让我们配置表列以显示客户数据。可以通过拖动列名称附近的图标来更改列的显示顺序。

将数据与小部件连接

现在我们将“获取客户”查询的“数据”对象与表连接起来。单击表格小部件以打开右侧栏中的检查器。我们可以看到表的数据属性有一个空数组作为值。与编辑器上几乎所有其他字段一样，数据字段支持双括号内的单行 javascript 代码。当您在字段中键入代码时，变量建议将显示为下拉列表。

让我们选择“postgresql”查询的“数据”对象。

{{queries.postgresql1.data}}

由于我们已经在上一步中运行了查询，因此数据将立即显示在表中。

到目前为止，在本教程中，我们已经连接到 PostgreSQL 数据库并将数据显示在表中。

:::tip 在 此处 阅读表的小部件参考，了解更多自定义设置，例如服务器端分页、操作、编辑数据。 :::