amis2/docs-old/renderers/Form/Picker.md
2020-07-28 10:03:53 +08:00

7.2 KiB
Raw Blame History

Picker

列表选取。可以静态数据,或者通过接口拉取动态数据。

  • type 请设置成 picker
  • multiple 是否为多选。
  • options 选项配置,类型为数组,成员格式如下。
    • label 文字
    • value
  • source Api 地址,如果选项不固定,可以通过配置 source 动态拉取。 另外也可以用 $xxxx 来获取当前作用域中的变量。
  • joinValues 默认为 true
  • 单选模式:当用户选中某个选项时,选项中的 value 将被作为该表单项的值提交,否则,整个选项对象都会作为该表单项的值提交。
  • 多选模式:选中的多个选项的 value 会通过 delimiter 连接起来,否则直接将以数组的形式提交值。
  • extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。
  • delimiter 默认为 ,
  • modalMode 设置 dialog 或者 drawer,用来配置弹出方式。
  • pickerSchema 默认为 {mode: 'list', listItem: {title: '${label}'}}, 即用 List 类型的渲染,来展示列表信息。更多的玩法请参考 CRUD 的配置。
  • autoFill 将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中,只在单选时有效
    • 配置"autoFill": {"address": "${label}"},表示将选中项中的label的值,自动填充到当前nameaddress的表单项中
  • 还有更多通用配置请参考 FormItem
{
  "type": "picker",
  "name": "type4",
  "joinValues": true,
  "valueField": "id",
  "labelField": "engine",
  "label": "多选",
  "source": "/api/sample",
  "size": "lg",
  "value": "4,5",
  "multiple": true,
  "pickerSchema": {
    "mode": "table",
    "name": "thelist",
    "quickSaveApi": "/api/sample/bulkUpdate",
    "quickSaveItemApi": "/api/sample/$id",
    "draggable": true,
    "headerToolbar": {
      "wrapWithPanel": false,
      "type": "form",
      "className": "text-right",
      "target": "thelist",
      "mode": "inline",
      "controls": [
        {
          "type": "text",
          "name": "keywords",
          "addOn": {
            "type": "submit",
            "label": "搜索",
            "level": "primary",
            "icon": "fa fa-search pull-left"
          }
        }
      ]
    },
    "columns": [
      {
        "name": "engine",
        "label": "Rendering engine",
        "sortable": true,
        "searchable": true,
        "type": "text",
        "toggled": true
      },
      {
        "name": "browser",
        "label": "Browser",
        "sortable": true,
        "type": "text",
        "toggled": true
      },
      {
        "name": "platform",
        "label": "Platform(s)",
        "sortable": true,
        "type": "text",
        "toggled": true
      },
      {
        "name": "version",
        "label": "Engine version",
        "quickEdit": true,
        "type": "text",
        "toggled": true
      },
      {
        "name": "grade",
        "label": "CSS grade",
        "quickEdit": {
          "mode": "inline",
          "type": "select",
          "options": [
            "A",
            "B",
            "C",
            "D",
            "X"
          ],
          "saveImmediately": true
        },
        "type": "text",
        "toggled": true
      },
      {
        "type": "operation",
        "label": "操作",
        "width": 100,
        "buttons": [
          {
            "type": "button",
            "icon": "fa fa-eye",
            "actionType": "dialog",
            "dialog": {
              "title": "查看",
              "body": {
                "type": "form",
                "controls": [
                  {
                    "type": "static",
                    "name": "engine",
                    "label": "Engine"
                  },
                  {
                    "type": "divider"
                  },
                  {
                    "type": "static",
                    "name": "browser",
                    "label": "Browser"
                  },
                  {
                    "type": "divider"
                  },
                  {
                    "type": "static",
                    "name": "platform",
                    "label": "Platform(s)"
                  },
                  {
                    "type": "divider"
                  },
                  {
                    "type": "static",
                    "name": "version",
                    "label": "Engine version"
                  },
                  {
                    "type": "divider"
                  },
                  {
                    "type": "static",
                    "name": "grade",
                    "label": "CSS grade"
                  },
                  {
                    "type": "divider"
                  },
                  {
                    "type": "html",
                    "html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换todo.</p>"
                  }
                ]
              }
            }
          },
          {
            "type": "button",
            "icon": "fa fa-pencil",
            "actionType": "dialog",
            "dialog": {
              "position": "left",
              "size": "lg",
              "title": "编辑",
              "body": {
                "type": "form",
                "name": "sample-edit-form",
                "api": "/api/sample/$id",
                "controls": [
                  {
                    "type": "text",
                    "name": "engine",
                    "label": "Engine",
                    "required": true
                  },
                  {
                    "type": "divider"
                  },
                  {
                    "type": "text",
                    "name": "browser",
                    "label": "Browser",
                    "required": true
                  },
                  {
                    "type": "divider"
                  },
                  {
                    "type": "text",
                    "name": "platform",
                    "label": "Platform(s)",
                    "required": true
                  },
                  {
                    "type": "divider"
                  },
                  {
                    "type": "text",
                    "name": "version",
                    "label": "Engine version"
                  },
                  {
                    "type": "divider"
                  },
                  {
                    "type": "select",
                    "name": "grade",
                    "label": "CSS grade",
                    "options": [
                      "A",
                      "B",
                      "C",
                      "D",
                      "X"
                    ]
                  }
                ]
              }
            }
          },
          {
            "type": "button",
            "icon": "fa fa-times text-danger",
            "actionType": "ajax",
            "confirmText": "您确认要删除?",
            "api": "delete:/api/sample/$id"
          }
        ],
        "toggled": true
      }
    ]
  }
}