Picker 列表选择器

列表选取，在功能上和 Select 类似，但它能显示更复杂的信息。

基本用法

默认和 Select 很像，但请看后面的 pickerSchema 设置。

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “picker”, “name”: “picker”, “label”: “picker”, “options”: [ { “label”:”A”, “value”:”a” }, { “label”:”B”, “value”:”b” }, { “label”:”C”, “value”:”c” } ] } ] }

  2. ## 配置 pickerSchema
  4. 可以配置 pickerSchema，实现弹框 crud 选择模式，更多 crud 配置可查看 crud 文档，选择之后最终的值通过 `valueField` 来设置。
  6. ```schema: scope="body"
  7. {
  8.   "type": "form",
  9.   "api": "/api/mock2/form/saveForm",
  10.   "debug": true,
  11.   "body": [
  12.     {
  13.       "type": "picker",
  14.       "name": "type4",
  15.       "joinValues": true,
  16.       "valueField": "id",
  17.       "labelField": "engine",
  18.       "label": "多选",
  19.       "source": "/api/mock2/sample",
  20.       "size": "lg",
  21.       "value": "4,5",
  22.       "multiple": true,
  23.       "pickerSchema": {
  24.         "mode": "table",
  25.         "name": "thelist",
  26.         "quickSaveApi": "/api/mock2/sample/bulkUpdate",
  27.         "quickSaveItemApi": "/api/mock2/sample/$id",
  28.         "draggable": true,
  29.         "headerToolbar": {
  30.           "wrapWithPanel": false,
  31.           "type": "form",
  32.           "className": "text-right",
  33.           "target": "thelist",
  34.           "mode": "inline",
  35.           "body": [
  36.             {
  37.               "type": "input-text",
  38.               "name": "keywords",
  39.               "addOn": {
  40.                 "type": "submit",
  41.                 "label": "搜索",
  42.                 "level": "primary",
  43.                 "icon": "fa fa-search pull-left"
  44.               }
  45.             }
  46.           ]
  47.         },
  48.         "columns": [
  49.           {
  50.             "name": "engine",
  51.             "label": "Rendering engine",
  52.             "sortable": true,
  53.             "searchable": true,
  54.             "type": "text",
  55.             "toggled": true
  56.           },
  57.           {
  58.             "name": "browser",
  59.             "label": "Browser",
  60.             "sortable": true,
  61.             "type": "text",
  62.             "toggled": true
  63.           },
  64.           {
  65.             "name": "platform",
  66.             "label": "Platform(s)",
  67.             "sortable": true,
  68.             "type": "text",
  69.             "toggled": true
  70.           },
  71.           {
  72.             "name": "version",
  73.             "label": "Engine version",
  74.             "quickEdit": true,
  75.             "type": "text",
  76.             "toggled": true
  77.           },
  78.           {
  79.             "name": "grade",
  80.             "label": "CSS grade",
  81.             "quickEdit": {
  82.               "mode": "inline",
  83.               "type": "select",
  84.               "options": ["A", "B", "C", "D", "X"],
  85.               "saveImmediately": true
  86.             },
  87.             "type": "text",
  88.             "toggled": true
  89.           },
  90.           {
  91.             "type": "operation",
  92.             "label": "操作",
  93.             "width": 100,
  94.             "buttons": [
  95.               {
  96.                 "type": "button",
  97.                 "icon": "fa fa-eye",
  98.                 "actionType": "dialog",
  99.                 "dialog": {
  100.                   "title": "查看",
  101.                   "body": {
  102.                     "type": "form",
  103.                     "body": [
  104.                       {
  105.                         "type": "static",
  106.                         "name": "engine",
  107.                         "label": "Engine"
  108.                       },
  109.                       {
  110.                         "type": "divider"
  111.                       },
  112.                       {
  113.                         "type": "static",
  114.                         "name": "browser",
  115.                         "label": "Browser"
  116.                       },
  117.                       {
  118.                         "type": "divider"
  119.                       },
  120.                       {
  121.                         "type": "static",
  122.                         "name": "platform",
  123.                         "label": "Platform(s)"
  124.                       },
  125.                       {
  126.                         "type": "divider"
  127.                       },
  128.                       {
  129.                         "type": "static",
  130.                         "name": "version",
  131.                         "label": "Engine version"
  132.                       },
  133.                       {
  134.                         "type": "divider"
  135.                       },
  136.                       {
  137.                         "type": "static",
  138.                         "name": "grade",
  139.                         "label": "CSS grade"
  140.                       },
  141.                       {
  142.                         "type": "divider"
  143.                       },
  144.                       {
  145.                         "type": "html",
  146.                         "html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
  147.                       }
  148.                     ]
  149.                   }
  150.                 }
  151.               },
  152.               {
  153.                 "type": "button",
  154.                 "icon": "fa fa-pencil",
  155.                 "actionType": "dialog",
  156.                 "dialog": {
  157.                   "position": "left",
  158.                   "size": "lg",
  159.                   "title": "编辑",
  160.                   "body": {
  161.                     "type": "form",
  162.                     "name": "sample-edit-form",
  163.                     "api": "/api/mock2/sample/$id",
  164.                     "body": [
  165.                       {
  166.                         "type": "input-text",
  167.                         "name": "engine",
  168.                         "label": "Engine",
  169.                         "required": true
  170.                       },
  171.                       {
  172.                         "type": "divider"
  173.                       },
  174.                       {
  175.                         "type": "input-text",
  176.                         "name": "browser",
  177.                         "label": "Browser",
  178.                         "required": true
  179.                       },
  180.                       {
  181.                         "type": "divider"
  182.                       },
  183.                       {
  184.                         "type": "input-text",
  185.                         "name": "platform",
  186.                         "label": "Platform(s)",
  187.                         "required": true
  188.                       },
  189.                       {
  190.                         "type": "divider"
  191.                       },
  192.                       {
  193.                         "type": "input-text",
  194.                         "name": "version",
  195.                         "label": "Engine version"
  196.                       },
  197.                       {
  198.                         "type": "divider"
  199.                       },
  200.                       {
  201.                         "type": "select",
  202.                         "name": "grade",
  203.                         "label": "CSS grade",
  204.                         "options": ["A", "B", "C", "D", "X"]
  205.                       }
  206.                     ]
  207.                   }
  208.                 }
  209.               },
  210.               {
  211.                 "type": "button",
  212.                 "icon": "fa fa-times text-danger",
  213.                 "actionType": "ajax",
  214.                 "confirmText": "您确认要删除?",
  215.                 "api": "delete:/api/mock2/sample/$id"
  216.               }
  217.             ],
  218.             "toggled": true
  219.           }
  220.         ]
  221.       }
  222.     }
  223.   ]
  224. }

内嵌模式

可以配置"embed": true，实现内嵌 picker

schema: scope="body" { "type": "form", "api": "/api/mock2/form/saveForm", "body": [ { "type": "picker", "name": "type4", "joinValues": true, "valueField": "id", "labelField": "engine", "label": "Picker", "embed": true, "source": "/api/mock2/crud/tree?waitSeconds=1", "size": "lg", "value": "4,5", "multiple": true, "pickerSchema": { "mode": "table", "name": "thelist", "quickSaveApi": "/api/mock2/sample/bulkUpdate", "quickSaveItemApi": "/api/mock2/sample/$id", "draggable": true, "headerToolbar": { "wrapWithPanel": false, "type": "form", "className": "text-right", "target": "thelist", "mode": "inline", "body": [ { "type": "input-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", "body": [ { "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/mock2/sample/$id", "body": [ { "type": "input-text", "name": "engine", "label": "Engine", "required": true }, { "type": "divider" }, { "type": "input-text", "name": "browser", "label": "Browser", "required": true }, { "type": "divider" }, { "type": "input-text", "name": "platform", "label": "Platform(s)", "required": true }, { "type": "divider" }, { "type": "input-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/mock2/sample/$id" } ], "toggled": true } ] } } ] }

属性表

当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名 类型 默认值 说明
options Array<object>或Array<string> 选项组
source string或 API 或 数据映射 动态选项组
multiple boolean 是否为多选。
delimiter boolean false 拼接符
labelField boolean "label" 选项标签字段
valueField boolean "value" 选项值字段
joinValues boolean true 拼接值
extractValue boolean false 提取值
autoFill object 自动填充
modalMode string "dialog" 设置 dialog 或者 drawer，用来配置弹出方式。
pickerSchema string {mode: 'list', listItem: {title: '${label}'}} 即用 List 类型的渲染，来展示列表信息。更多配置参考 CRUD
embed boolean false 是否使用内嵌模式

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

事件名称 事件参数 说明
change event.data.value: string
event.data.option: Option 选中值		 选中值变化时触发