baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.4k stars 2.52k forks source link

表单里的表格,只提交选中的行记录,怎么实现? #11115

Open wanquantong opened 3 weeks ago

wanquantong commented 3 weeks ago

实现场景:

表单,里面是表格,可以勾选行。 我只想将选中的记录提交到接口,怎么实现?

{
  "type": "form",
  "id": "u:3356cf723f58",
  "title": "表单-发送选中的记录",
  "mode": "flex",
  "labelAlign": "top",
  "dsType": "api",
  "feat": "Edit",
  "body": [
    {
      "type": "table2",
      "source": "$rows",
      "selectable": true,
      "onEvent": {
        "selectedChange": {
          "actions": [
            {
              "actionType": "toast",
              "args": {
                "msg": "已选择${event.data.selectedItems.length}条记录"
              }
            }
          ]
        }
      },
      "columns": [
        {
          "name": "id",
          "label": "ID",
          "id": "u:25486bbd6839",
          "placeholder": "-"
        },
        {
          "name": "engine",
          "label": "Rendering engine",
          "id": "u:7b89763d129f",
          "placeholder": "-"
        },
        {
          "name": "browser",
          "label": "Browser",
          "id": "u:bfb75d897ba7",
          "placeholder": "-"
        },
        {
          "name": "platform",
          "label": "Platform(s)",
          "id": "u:21528b8b0300"
        },
        {
          "name": "version",
          "label": "Engine version",
          "id": "u:1d10d2bac22a"
        },
        {
          "name": "grade",
          "label": "CSS grade",
          "id": "u:e6498f2140d0"
        }
      ],
      "id": "u:bf0752d28a1b",
      "showHeader": true,
      "editorSetting": {
        "mock": {
          "enable": true,
          "maxDisplayRows": 5
        }
      }
    }
  ],
  "actions": [
    {
      "type": "button",
      "label": "发送选中的记录",
      "onEvent": {
        "click": {
          "actions": [
            {
              "actionType": "submit",
              "componentId": "u:3356cf723f58"
            },
            {
              "ignoreError": false,
              "actionType": "toast",
              "args": {
                "msgType": "info",
                "position": "top-right",
                "closeButton": true,
                "showIcon": true,
                "msg": "GETRENDERERDATA(id, path)",
                "className": "theme-toast-action-scope"
              }
            }
          ]
        }
      },
      "level": "primary",
      "id": "u:b5f6cda8c4be"
    }
  ],
  "resetAfterSubmit": true,
  "initApi": "https://aisuda.bce.baidu.com/amis/api/mock2/sample?perPage=10"
}
github-actions[bot] commented 3 weeks ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

lhtuling commented 3 weeks ago

自定义js 进阶用法了 获取选中的行

event.context.scoped.getComponentById("u:bf0752d28a1b").getData().selectedItems

然后用ajax的动作执行api请求,不要用表单提交了

Amis低代码前端框架交流群【QQ 1群】:717791727 Amis低代码前端框架交流群【QQ 2群】:721182449