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

添加一个小部件

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

widget

拖放一个小部件

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

调整小部件的大小

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

resize

将小部件添加到模态

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

信息

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

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

调整表格列的大小

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

resize-table-column

更改小部件属性

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

检查面板

将数据与小部件连接

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

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

{{queries.postgresql1.data}}

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

表格数据

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

提示

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