# checkbox

# `Schema`类静态属性

Schema类静态属性请访问 Schema.js类静态属性及值逻辑与事件逻辑关系

{
  widget: 'checkbox',
  title: '多选框',
  preview: '',
  type: ['array<string>', 'array<number>'],
  validators: [],
  logic: {
    value: ['<>', '><'],
    event: []
  }
}

1
2
3
4
5
6
7
8
9
10
11

# `schema.default`

默认[]

# `schema.option`定义

schema完整定义请访问schema

{
  type: "static",          // 可选项数据来源方式，可选：static、dynamic
  data: [{                 // 当type为static时，可选项数据源，为{key, value}键值对
    key: "A",
    value: "A选项"
  }],
  direction: "horizontal", // 选项排列方式，horizontal为水平方向，vertical为垂直方向排列，默认水平
  url: "",                 // 当type为 dynamic 时，接口地址
  adapter: "",             // 当type为 dynamic 时，适配脚本，使用见下方
  dynamicData: []          // 当type为 dynamic 时，可选项数据源，经过 adapter 转换之后
}

1
2
3
4
5
6
7
8
9
10
11

# `adapter`使用说明

示例

需求：通过 http://mock.com/list 接口返回作为可选项

{
  type: "dynamic",
  data: [],
  direction: "horizontal",
  url: "http://mock.com/list",
  adapter: "",
  dynamicData: []
}

1
2
3
4
5
6
7
8

假设 http://mock.com/list 返回值为

[
  { id: 2, name: 'tom'},
  { id: 3, name: 'lilei'},
  ...
]

1
2
3
4
5

dynamicData 必须为 {key, value} 键值对列表，所以adapter可以这么写:

return data.map(function(item){
  return {key: item.id, value: item.name}
})

1
2
3

TIP

关于adapter如何写？以及adapter可用的内置方法可参考 Worker

转换之后 dynamicData 的数据为：

[
  { key: 2, value: 'tom'},
  { key: 3, value: 'lilei'},
  ...
]

1
2
3
4
5

于是得到schema.option如下:

{
  type: "dynamic",
  data: [],
  direction: "horizontal",
  url: "http://mock.com/list",
  adapter: "return data.map(function(item){return {key: item.id, value:  item.name}})",
  dynamicData: []
}

1
2
3
4
5
6
7
8

adapter注意

最后必须return出数组
adapter内部被注入的data变量为接口返回值，可以根据此变量执行map操作返回，结果会自动传给dynamicData
return的数组必须为 {key, value} 键值对列表，key用于最终表单值，value用于显示

# 示例展示

# 静态数据示例

完整示例 codeSandbox (opens new window)

schema

{
  "key": "kZSgpj0xe",
  "widget": "checkbox",
  "hidden": false,
  "option": {
    "type": "static",
    "direction": "horizontal",
    "url": "",
    "adapter": "",
    "dynamicData": [],
    "data": [
      {
        "key": "apple",
        "value": "苹果"
      },
      {
        "key": "banana",
        "value": "香蕉"
      },
      {
        "key": "orange",
        "value": "桔子"
      },
      {
        "key": "lemon",
        "value": "柠檬"
      }
    ]
  },
  "name": "fruit",
  "type": "array<string>",
  "label": "水果",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "type": "array",
      "trigger": "change"
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 动态数据示例

完整示例 codeSandbox (opens new window)

schema

{
  "key": "kOL0pyiFN",
  "widget": "checkbox",
  "hidden": false,
  "option": {
    "type": "dynamic",
    "direction": "horizontal",
    "url": "https://8fd7b.csb.app/checkobx-dynamic.json",
    "adapter": "return data.map(function(item){ return { key: item.id, value: item.name }})",
    "dynamicData": [],
    "data": []
  },
  "name": "fruit",
  "type": "array<string>",
  "label": "水果",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "type": "array",
      "trigger": "change"
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 表单值类型示例

完整示例 codeSandbox (opens new window)

WARNING

请仔细观察示例表单值类型及下方schema高亮部分

schema.option.type 为 dynamic时，与实例中为static一样

schema

[
  {
    "key": "kLTisg5HL",
    "widget": "checkbox",
    "hidden": false,
    "option": {
      "type": "static",
      "direction": "horizontal",
      "url": "",
      "adapter": "",
      "dynamicData": [],
      "data": [
        {
          "key": "apple",
          "value": "苹果"
        },
        {
          "key": "banana",
          "value": "香蕉"
        }
      ]
    },
    "name": "fruit",
    "type": "array<string>",
    "label": "水果",
    "description": "",
    "help": "",
    "disabled": false,
    "rules": [
      {
        "required": false,
        "message": "必填",
        "type": "array",
        "trigger": "change"
      }
    ]
  },
  {
    "key": "kZSwpc0qe",
    "widget": "checkbox",
    "hidden": false,
    "option": {
      "type": "static",
      "direction": "horizontal",
      "url": "",
      "adapter": "",
      "dynamicData": [],
      "data": [
        {
          "key": 1001,
          "value": "北京"
        },
        {
          "key": 1002,
          "value": "上海"
        }
      ]
    },
    "name": "city",
    "type": "array<number>",
    "label": "城市",
    "description": "",
    "help": "",
    "disabled": false,
    "rules": [
      {
        "required": false,
        "message": "必填",
        "type": "array",
        "trigger": "change"
      }
    ]
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

这里可选项列表表示schema.option.data或schema.option.dynamicData

可以看出因为Schema.type等于['array<string>', 'array<number>']，所以 schema.type的可选值只有2种，schema.rule[0].type皆为array

← radio datePicker →