SemDB 示例教程
页面发布：动态页面

在 SemDB 的页面发布模块中，通过创建动态页面，可以制作包含自定义页面布局和简单的交互功能的页面。 本教程展示如何制作一个可以读取并更新后台表格数据的简单页面。

在这一教程中，我们接续 《数据操作基础教程（一）》 ，从一个已经完成数据导入的快照开始操作，如下所示。

点击左侧导航栏第七个按钮，进入发布页面，然后点击左侧列表下方的加号按钮，创建一个页面，输入页面名称然后选择页面类型为动态后提交。

在左侧列表选择刚创建的页面，在上方可以给页面添加一个标题。

在下方的配置代码框内，输入下面的 JSON 设置。

{
  "type": "column",
  "align": "center",
  "child": [
    { "type": "text-field", "bind": "id", "label": "id", "valueType": "integer" },
    { "type": "text-field", "bind": "A", "label": "A", "valueType": "integer" },
    { "type": "text-field", "bind": "B", "label": "B", "valueType": "integer" },
    { "type": "text-field", "bind": "C", "label": "C", "valueType": "integer" },
    {
      "type": "row",
      "justify": "end",
      "child": [
        {
          "type": "column",
          "cols": "auto",
          "child": [{ "type": "button", "bind": "get", "label": "获取数据" }]
        },
        {
          "type": "column",
          "cols": "auto",
          "child": [{ "type": "button", "bind": "post", "label": "提交数据" }]
        }
      ]
    }
  ]
}

关于页面配置的详细信息可以在 SemDB 的帮助附录内查看。 保存后，切换到函数栏，添加函数 get。

其内容为：

$util.capsule('Dir.CapsuleA', {
  data: { MiniTableA: [{ id: $state.id }] },
  handle: (data) => {
    $state.A = data.MiniTableB[0].a
    $state.B = data.MiniTableB[0].b
    $state.C = data.MiniTableB[0].c
  }
})

上面的代码本质上是在调用一个数据查询的胶囊，并使用其返回值修改页面信息。 这里我们略过了创建名为 Dir.CapsuleA 的胶囊的步骤，具体可参见 《胶囊：查询表格数据》 教程。

可以注意到 get 函数在上方的页面设置中被绑定在获取数据的按钮上，因此我们点击该按钮即可调用这一函数。

按照类似步骤我们可以再添加一个 post 函数，其内容为：

$util.capsule('Dir.CapsuleB', {
  data: { MiniTableA: [{ id: $state.id, A: $state.A, B: $state.B, C: $state.C }] },
  handle: () => {
    $util.setSuccess('保存数据成功')
  }
})

这里我们略过了创建名为 Dir.CapsuleB 的胶囊的步骤，具体可参见 《胶囊：修改表格数据》 教程。 保存后，我们前往所创建的页面，如下所示。

在输入 id 后，点击获取数据按钮，即可看到数据被读取到页面中。

此外点击提交数据按钮可以将数据录入到后台表格内，这里不再展示。

© 2025