Mapping 映射

基本用法

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "mapping",
  5.         "value": "1",
  6.         "map": {
  7.             "1": "第一",
  8.             "2": "第二",
  9.             "3": "第三",
  10.             "*": "其他"
  11.         }
  12.     }
  13. }

渲染 HTML

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "mapping",
  5.         "value": "2",
  6.         "map": {
  7.             "1": "<span class='label label-info'>漂亮</span>",
  8.             "2": "<span class='label label-success'>开心</span>",
  9.             "3": "<span class='label label-danger'>惊吓</span>",
  10.             "4": "<span class='label label-warning'>紧张</span>",
  11.             "*": "<span class='label label-default'>其他：${type}</span>"
  12.         }
  13.     }
  14. }

支持数组

1.5.0 及以上版本

如果返回值是数组会显示为多个

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "mapping",
  5.         "value": ["1", "2", "3", "4", "5"],
  6.         "map": {
  7.             "1": "<span class='label label-info'>漂亮</span>",
  8.             "2": "<span class='label label-success'>开心</span>",
  9.             "3": "<span class='label label-danger'>惊吓</span>",
  10.             "4": "<span class='label label-warning'>紧张</span>",
  11.             "*": "<span class='label label-default'>其他</span>"
  12.         }
  13.     }
  14. }

用作 Field 时

当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置name属性，映射同名变量

Table 中的列类型

```schema: scope=”body” { “type”: “table”, “data”: { “items”: [ { “id”: “1”, “type”: “1” }, { “id”: “2”, “type”: “2” }, { “id”: “3”, “type”: “3” } ] }, “columns”: [ { “name”: “id”, “label”: “Id” },

  1.     {
  2.         "name": "type",
  3.         "label": "映射",
  4.         "type": "mapping",
  5.         "map": {
  6.             "1": "<span class='label label-info'>漂亮</span>",
  7.             "2": "<span class='label label-success'>开心</span>",
  8.             "3": "<span class='label label-danger'>惊吓</span>",
  9.             "4": "<span class='label label-warning'>紧张</span>",
  10.             "*": "其他：${type}"
  11.         }
  12.     }
  13. ]

}

  2. List 的内容、Card 卡片的内容配置同上
  4. ### Form 中静态展示
  6. ```schema: scope="body"
  7. {
  8.     "type": "form",
  9.     "data": {
  10.         "type": "2"
  11.     },
  12.     "body": [
  13.         {
  14.             "type": "static-mapping",
  15.             "name": "type",
  16.             "label": "映射",
  17.             "map": {
  18.                 "1": "<span class='label label-info'>漂亮</span>",
  19.                 "2": "<span class='label label-success'>开心</span>",
  20.                 "3": "<span class='label label-danger'>惊吓</span>",
  21.                 "4": "<span class='label label-warning'>紧张</span>",
  22.                 "*": "其他：${type}"
  23.             }
  24.         }
  25.     ]
  26. }

布尔值映射

```schema: scope=”body” { “type”: “form”, “data”: { “type”: true }, “body”: [ { “type”: “static-mapping”, “name”: “type”, “label”: “映射”, “map”: { “1”: “开“, “0”: “关“ } } ] }

  2. 或者
  4. ```schema: scope="body"
  5. {
  6.     "type": "form",
  7.     "data": {
  8.         "type": true
  9.     },
  10.     "body": [
  11.         {
  12.             "type": "static-mapping",
  13.             "name": "type",
  14.             "label": "映射",
  15.             "map": {
  16.                 "true": "<span class='label label-info'>开</span>",
  17.                 "false": "<span class='label label-default'>关</span>"
  18.             }
  19.         }
  20.     ]
  21. }

远程拉取字典

since 1.1.6

通过配置 source 接口来实现，接口返回字典对象即可，数据格式参考 map 配置。

```schema: scope=”body” { “type”: “form”, “data”: { “type”: “2” }, “body”: [ { “type”: “mapping”, “name”: “type”, “label”: “映射”, “source”: “/api/mapping” } ] }

  2. > 默认 source 是有 30s 缓存的，通常字典数据不长变更。如果想修改，请参考 [API]($docs-types-api) 文档配置缓存。
  4. ### 关联上下文变量
  6. > since 1.1.6
  8. 同样通过配置 `source` 来实现，只是格式是取变量。
  10. > 注意：当数据域里的变量值为`$$`时, 表示将所有接口返回的`data`字段值整体赋值到对应的 key 中
  12. ```schema: scope="body"
  13. {
  14.     "type": "form",
  15.     "initApi": {
  16.         "url": "/api/mapping",
  17.         "method": "get",
  18.         "responseData": {
  19.             "zidian": "$$$$",
  20.             "type": "2"
  21.         }
  22.     },
  23.     "body": [
  24.         {
  25.             "type": "mapping",
  26.             "name": "type",
  27.             "label": "映射",
  28.             "source": "$${zidian}"
  29.         }
  30.     ]
  31. }

占位文本

通过 placeholder 可以控制数据不存在时的展现

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "mapping",
  5.         "placeholder": "数据不存在",
  6.         "map": {
  7.             "1": "第一",
  8.             "2": "第二",
  9.             "3": "第三",
  10.             "*": "其他"
  11.         }
  12.     }
  13. }

属性表

属性名 类型 默认值 说明
className string 外层 CSS 类名
placeholder string 占位文本
map object 映射配置
source string or API API 或 数据映射