跳到主要内容

列表视图

这是一个基于Steedos对象的列表视图组件，它把对象记录显示为表格，同时包含了对象记录的增删改查以及其他操作按钮功能。

基本用法​

最基本的用法是配置组件的“对象”及“视图”属性，就可以显示出指定对象的列表页面。

如下所示我们配置列表视图的“对象”属性为当前对象，“视图”属性为当前对象的“有效人员”视图：

{
    type: 'page',
    title: '列表视图',
    body: {
        "type": "steedos-object-listview",
        "objectApiName": "${objectName}",
        "listName": "all",
        "crud": {
            "id": "listview_first" //自定义对象列表组件底层crud的ID属性
        }
    },
  }

如果我们新建一个指向人员对象的微页面，并拖动一个列表视图组件到画布，可以看到该组件生成了类似上面的amis Schema配置。

发布后，我们就可以在人员对象的列表页面看到人员列表效果。

objectApiName属性可以被配置为像space_users或accounts这种固定值，也可以配置为变量，而变量objectName在“记录页面”、“列表页面”以及“表单”类型的微页面中存储了当前对象Api名称。

listName属性类似的可以配置为某个固定的列表视图值，也可以配置为某个变量值。

crud属性需要配置对象格式，输入重写列表视图底层crud的各个属性。

选中行​

如果需要获取列表视图组件选中行，可以在 amis自定义JS动作脚本 中运行以下代码：

let scope = event.context.scoped;
let result = scope.getComponentById("listview_project").control.props.data.selectedItems.toJSON();
console.log('选中行：', result);
/*
  选中行：
  [
    {_id: '64545c09f5c344ec8377c6d7', name: 'test9090', project_code: 'XM-2023-0008', project_manager: '07a0f692-1380-485e-9e7c-5429efc28276', status: 'to_be_signed', …}
    {_id: '64545bf8f5c344ec8377c6d5', name: 'testlll', project_code: 'XM-2023-0007', project_manager: '07a0f692-1380-485e-9e7c-5429efc28276', status: 'to_be_signed', …}
  ]
*/

在上述代码中，演示了获取名为project对象的列表视图组件选中行，getComponentById函数中传入的是列表视图组件的id，其规范为listview_${objectApiName}。

属性表​

该组件支持下面的配置。

属性名类型默认值说明
objectApiNamestringspace_users关联对象api名称
listNamestring无要显示的对象视图名称
perPagenumber20设置一页显示多少条数据
showHeaderbooleanfalse显示表头
formFactorstring无显示样式：表格/手机
classNamestring"sm:border sm:shadow sm:rounded sm:border-gray-300 mb-4"CSS类名
crudobject无重写amis底层crud的各个属性

当 showHeader 属性被设置为 true 时，请注意：

  • 因为表头有切换列表视图功能，所以 listName,top,perPage 等属性会被应用到所有视图中。
  • 请不要配置listName属性值，否则当切换列表视图时将始终会跳转到该属性值指向的视图。
  • 设计器中会隐藏listName属性配置栏，因为此时不允许配置listName属性值。

新建“列表页面”类型的微页面时 showHeader 属性会被默认设置为 true 以允许用户在微页面中对表头部分进行二次开发。

动作表​

所有的列表视图组件都监听了对象的 @data.change事件，只要触发对象的@data.change事件，就能间接调用该组件的以下动作：

详情请参考 列表视图源码。

刷新​

以下示例演示点击按钮后，刷新名为project的列表视图组件：

{
  "type": "button",
  "label": "刷新列表视图组件",
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "broadcast",
          "args": {
            "eventName": "@data.changed.project"
          },
          "data": {
            "objectName": "project",
            "recordId": "xxx" // 此处请保持非空，并不需要真实的记录ID，否则将跳转对象表单
          }
        }
      ]
    }
  }
}

点击上述示例中的按钮后会触发绑定project对象的列表视图组件的@data.changed事件，在该事件中，会根据传入的参数判断是否刷新列表视图组件。

要刷新列表视图组件，需在data中配置以下参数：

  • objectName: String。要触发广播事件对象的对象Api名称，即列表视图绑定的对象api名称。
  • recordId: String。此处请保持非空，并不需要真实的记录ID，表示非新建记录，否则将跳转对象表单。

在Steedos列表视图页面中编辑记录后，会刷新列表视图组件，就是因为在弹出的编辑表单组件中监听了提交成功事件并触发了页面中列表视图组件的@data.change事件，在@data.change事件中会执行刷新动作。 详情请参考 对象表单组件源码。

源码中的data没有传入recordId，是因为表单中的数据会传入data，在编辑记录时表单中包含recordId变量，@data.change事件中的event.data.recordId不为空。

跳转到记录详细页​

在Steedos列表视图页面中新建记录后，会跳转到记录详细页，就是因为在弹出的编辑表单组件中监听了提交成功事件并触发了页面中对象表单组件的@data.change事件，在@data.change事件中会执行跳转动作。 详情请参考 对象表单组件源码。

在新建记录时，表单的recordId为空，所以会跳转到记录详细页，而不是刷新列表视图组件。

要跳转到记录详细页，需在data中配置以下参数：

  • objectName: String。要触发广播事件对象的对象Api名称，即列表视图绑定的对象api名称。
  • recordId: String。此处请保持为空，表示新建记录。
微信扫码