AMis 文档

title: 渲染器

AMis 页面是通过 Json 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。

Page

Json 配置最外层是一个 Page 渲染器。效果如下：（Demo 支持修改配置，及时渲染）。然后在各个区域（容器）内中放各种子组件拼凑出页面。

{
  "type": "page",
  "title": "Title",
  "subTitle": "SubTitle",
  "remark": "Remark",
  "aside": "Aside",
  "body": "Body",
  "toolbar": "Toolbar"
}

Form

Form 是 AMis 中用得最多的渲染模型了，它可以作为 Container 的成员，放在你想要放置的区域。

比如：

{
  "type": "page",
  "body": {
    "type": "form",
    "name": "sample1",
    "api": "/api/mock/saveForm",
    "controls": [
      {
        "name": "email",
        "label": "Email",
        "type": "email",
        "desc": "描述文字"
      },
      {
        "name": "text",
        "type": "text",
        "label": "Text"
      }
    ]
  }
}

表单中，主要的成员由表单项组成，有三种设置方式，分别是：controls、[tabs](#tabs(form)和fieldSet。

controls

类型是数组，成员主要是FormItem，默认一行一个（当然 form 是 inline 模式时例外），如果想一行多个，可以将多个FormItem合并成数组作为 controls 的成员。

```schema:height="360" scope="body"
{
"type": "form",
"name": "sample2",
"controls": [
{
"type": "text",
"name": "test",
"label": "Label",
"placeholder": "Placeholder"
},

{
  "type": "divider"
},

[
  {
    "type": "text",
    "name": "test1",
    "label": "Label",
    "placeholder": "Placeholder"
  },

  {
    "type": "text",
    "name": "test2",
    "label": "Label",
    "placeholder": "Placeholder"
  }
]

]
}

水平模式的 Form 也能很好的展现。
<div class="md-section-divider"></div>
```schema:height="370" scope="body"
{
  "type": "form",
  "mode": "horizontal",
  "name": "sample3",
  "controls": [
    {
      "type": "text",
      "name": "test",
      "label": "Label",
      "placeholder": "Placeholder"
    },
    {
      "type": "divider"
    },
    [
      {
        "type": "text",
        "name": "test1",
        "label": "Label",
        "placeholder": "Placeholder"
      },
      {
        "type": "text",
        "name": "test2",
        "label": "Label",
        "placeholder": "Placeholder"
      }
    ],
    {
      "type": "divider"
    },
    [
      {
        "type": "text",
        "name": "test3",
        "label": "Label",
        "inline": true,
        "placeholder": "Placeholder"
      },
      {
        "inline": true,
        "inlineLabelClassName": "w-auto",
        "type": "text",
        "name": "test4",
        "label": "Label",
        "placeholder": "Placeholder"
      }
    ]
  ]
}

tabs(form)

FormItem 可以通过 controls 设置，也可以通过 tabs 设置。格式如下：

Array of Tab

• title Tab 的标题
• controls Tab 里面的 controls
• hiddenOn 通过表达式来配置当前表单项是否隐藏。
• visibleOn 通过表达式来配置当前表单项是否显示。

```schema:height="400" scope="body"
{
"type": "form",
"title": "",
"api": "/api/mock/saveForm",
"name": "sample4",
"actions": [
{
"type": "submit",
"label": "保存",
"primary": true
}
],
"tabs": [
{
"title": "Tab 1",
"controls": [
{
"type": "text",
"name": "test",
"label": "Label",
"placeholder": "Placeholder"
},

    {
      "type": "divider"
    },

    [
      {
        "type": "text",
        "name": "test1",
        "label": "Label",
        "placeholder": "Placeholder"
      },

      {
        "type": "text",
        "name": "test2",
        "label": "Label",
        "placeholder": "Placeholder"
      }
    ]
  ]
},

{
  "title": "Tab 2",
  "controls": [
    {
      "type": "text",
      "name": "test",
      "label": "Label",
      "placeholder": "Placeholder",
      "desc": "Description"
    }
  ]
}

]
}

<div class="md-section-divider"></div>
### fieldSet
除了用 [tabs](#tabs(form)) 来分组 [FormItem](#FormItem) 外，还可以用 filedSet。格式如下：
Array of `FieldSet` 或者 `FieldSet`
* `title` FieldSet 的标题
* `collapsed` 是否默认收起， 使用此属性时，记得给 form 开启 `collapsable`
* `controls` FieldSet 里面的 controls
* `className` FieldSet 里面的 类名，可以考虑添加  `fieldSet`、`fieldSet-xs`、`fieldSet-sm`、`fieldSet-md` 或者 `fieldSet-lg`。
* `hiddenOn` 通过[表达式](#表达式)来配置当前表单项是否隐藏。
* `visibleOn` 通过[表达式](#表达式)来配置当前表单项是否显示。
<div class="md-section-divider"></div>
```schema:height="600" scope="body"
{
  "type": "form",
  "api": "/api/mock/saveForm",
  "collapsable": true,
  "name": "sample5",
  "actions": [
    {
      "type": "submit",
      "label": "保存",
      "primary": true
    }
  ],
  "fieldSet": [
    {
      "title": "基本信息",
      "controls": [
        {
          "type": "text",
          "name": "test",
          "label": "Label",
          "placeholder": "Placeholder"
        },
        {
          "type": "divider"
        },
        [
          {
            "type": "text",
            "name": "test1",
            "label": "Label",
            "placeholder": "Placeholder"
          },
          {
            "type": "text",
            "name": "test2",
            "label": "Label",
            "placeholder": "Placeholder"
          }
        ]
      ]
    },
    {
      "title": "附加信息",
      "collapsed": true,
      "controls": [
        {
          "type": "text",
          "name": "test",
          "label": "Label",
          "placeholder": "Placeholder",
          "desc": "Description"
        }
      ]
    }
  ]
}

FormItem

Form 中主要是由各种 FormItem 组成。FormItem 中主要包含这些字段。

• name 字段名，表单提交时的 key。
• value 值，可以通过它设置默认值。
• label 描述标题。
• desc 描述内容。
• placeholder 占位内容。
• type 指定表单类型，如： text、textarea、date、email等等
• inline 是否为 inline 模式。
• submitOnChange 是否该表单项值发生变化时就提交当前表单。
• unsetValueOnInvisible 是否隐藏的时候把改值设置为空。
• className 表单最外层类名。
• disabled 当前表单项是否是禁用状态。
• disabledOn 通过表达式来配置当前表单项的禁用状态。
• hiddenOn 通过表达式来配置当前表单项是否隐藏。
• visibleOn 通过表达式来配置当前表单项是否显示。
• inputClassName 表单控制器类名。
• labelClassName label 的类名。
• inlineLabelClassName inline 模式的 label 的类名，如果 Form 是水平模式则默认会设置一个左测占比的类名。
• inputWrapClassName 配置 input 的container的className。
• required 是否为必填。
• requiredOn 通过表达式来配置当前表单项是否为必填。
• min 限制最小值
• max 限制最大值
• maxLength 限制最多输入的字符数，不光验证，而且还实时提示还可以输入多少个。如果只需要验证，请通过 validations 设置。
• valueTemplate 设置一个表达式，用来计算该表单的值
• valueWatch 设置watch哪些变量(逗号分割)，如果为空就是所有，如果为false就是不watch
• detectValuePropName 设置valueWatch的主对象是哪一个(跟xxxOn的detectPropName相似)，默认是data
• validations 格式验证，支持设置多个，多个规则用英文逗号隔开。
  
  • matchRegexp:/foo/ 必须命中某个正则。
  • isEmail 必须是 Email。
  • isUrl 必须是 Url。
  • isNumeric 必须是 数值。
  • isAlphanumeric 必须是 字母或者数字。
  • isInt 必须是 整形。
  • isFloat 必须是 浮点形。
  • minLength:length 最小长度。
  • maxLength:length 最大长度。
  • maximum:length 最大值。
  • minimum:length 最小值。
  • isJson 是否是合法的 Json 字符串。

• validationErrors 自定义错误提示, 配置为Object, key为规则名, value为错误提示字符串(提示:其中$1表示输入)

  详情

```schema:height="200" scope="form-item" asideWidth="400"
{
"type": "text",
"name": "test1",
"label": "Label",
"desc": "Description...",
"placeholder": "Placeholder",
"validations": "matchRegexp: /^a/, minLength:3,maxLength:5",
"validationErrors": {
"matchRegexp": "必须为a开头",
"minLength": "小朋友，最低为$1个字符!"
}
}

不同类型的表单，可配置项还有增多，具体请看下面对应的类型。
<div class="md-section-divider"></div>
### basic
基本的表单类型如： text, number, url, email, hidden, password, textarea。
* `source` 配置autoComplete的api, 与autoComplete.api不同的是, 配置source会在组件初始化拉取，以后输入的时候不会再拉取。
* `options` 选项配置，类型为数组，成员格式如下。
    * `label` 文字
    * `value` 值
* `autoComplete` 如果设置为`string`类型，即为Api 地址，每次输入框的值发生变化都会请求该接口[详情](/docs/api#select)
* `autoComplete.api` 同上。
* `autoComplete.matchHighlight` 默认为 `true`，当不存在tpl的时候，按照默认的方式渲染建议列表会标红输入项，设为`false`则不标红。
* `autoComplete.lazySeconds` 防抖时间，默认为500毫秒，输入后多少毫秒开始拉取api
* `autoComplete.maxCount` 默认为 `100`, 默认前端最多展示多少项
* `autoComplete.matchReg` 用在两个地方, 一是当`source`配置生效的时候，用来过滤建议；而是标红输入项，比如`/^(${value})/`, `${value}`会被替换成输入框的值, 第一个括号会被分组捕获作为标红的地方。
* `autoComplete.reqOn` 默认为`true`, 当满足什么条件的时候才触发拉取接口
* `autoComplete.reqField` 默认为`value`, 指定一个字段作为请求接口时的key
* `autoComplete.tpl` 设置建议的每一条的tpl[详情](/docs/renderers#tpl)
* `autoComplete.reqOn` 默认为`true`, 当满足什么条件的时候才触发拉取接口
* `autoComplete.multiple` 默认为`false`, 是否支持多个输入
* `autoComplete.delimiter` 默认为`;`,如果支持多个输入，用什么字符分割
<div class="md-section-divider"></div>
```schema:height="450" scope="form"
[
  {
    "type": "text",
    "name": "test1",
    "label": "Text"
  },
  {
    "type": "number",
    "name": "test2",
    "label": "Number"
  },
  {
    "type": "url",
    "name": "test3",
    "label": "Url"
  },
  {
    "type": "email",
    "name": "test4",
    "label": "Email"
  },
  {
    "type": "hidden",
    "name": "test5"
  },
  {
    "type": "password",
    "name": "test6",
    "label": "Password"
  },
  {
    "type": "textarea",
    "name": "test7",
    "label": "Textarea"
  }
]

divider

分割线

```schema:height="200" scope="form-item" asideWidth="400"
{
"type": "divider"
}

<div class="md-section-divider"></div>
### select
选项表单。
* `options` 选项配置，类型为数组，成员格式如下。
    * `label` 文字
    * `value` 值
* `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。[详情](/docs/api#select) 另外也可以用 `$xxxx` 来获取当前作用域中的变量。
* `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
* `joinValues` 默认为 `true`
 * 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
 * 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
* `delimiter` 默认为 `,`
* `clearable` 默认为 `false`, 当设置为 `true` 时，已选中的选项右侧会有个小 `X` 用来取消设置。
* `searchable` 默认为 `true`，表示可以通过输入部分内容检索出选项。
单选
<div class="md-section-divider"></div>
```schema:height="250" scope="form" asideWidth="350"
[
    {
      "type": "select",
      "name": "select",
      "label": "单选",
      "clearable": true,
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        }
      ]
    },
    {
      "type": "static",
      "name": "select",
      "label": "当前值"
    }
]

多选

```schema:height="280" scope="form" asideWidth="350"
[
{
"type": "select",
"name": "select",
"label": "多选",
"clearable": true,
"multiple": true,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
},

{
  "type": "static",
  "name": "select",
  "label": "当前值"
}

]

<div class="md-section-divider"></div>
### chained-select
无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 API 拉取数据，只要 API 有返回结果，就能一直无限级别下拉下去。
<div class="md-section-divider"></div>
```schema:height="300" scope="form-item"
{
  "name": "select3",
  "type": "chained-select",
  "label": "Chained Select",
  "source": "/api/mock/chainedOptions?waitSeconds=1&value=$value&level=$level&maxLevel=4&waiSeconds=1"
}

checkbox

可选框

• trueValue 默认 true
• falseValue 默认 false

```schema:height="200" scope="form-item" asideWidth="400"
{
"name": "checkbox",
"type": "checkbox",
"label": "Checkbox"
}

<div class="md-section-divider"></div>
### checkboxes
复选框
* `options` 选项配置，类型为数组，成员格式如下。
    * `label` 文字
    * `value` 值
* `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。[详情](/docs/api#select)
* `joinValues` 默认为 `true`  选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
* `delimiter` 默认为 `,`
* `columnsCount` 默认为 `1` 可以配置成一行显示多个。
* `checkAll` 默认为 `false` 开启后支持全选。
* `checkAllLabel` 默认为 `全选` 全选的文字。
* `defaultCheckAll` 是否默认全选，默认为`false`。
* `addable` 是否可以手动输入增加，默认为`false`。
* `addClassName` 手动输入框的className。
<div class="md-section-divider"></div>
```schema:height="330" scope="form" asideWidth="400"
[
    {
      "name": "checkboxes",
      "type": "checkboxes",
      "label": "Checkboxes",
      "options": [
          {
            "label": "OptionA",
            "value": "a"
          },
          {
            "label": "OptionB",
            "value": "b"
          },
          {
            "label": "OptionC",
            "value": "c"
          },
          {
            "label": "OptionD",
            "value": "d"
          }
        ]
    },
    {
        "type": "static",
        "name": "checkboxes",
        "label": "当前值"
    }
]

radios

单选框

• options 选项配置，类型为数组，成员格式如下。
  
  • label 文字
  • value 值
• source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。详情

```schema:height="330" scope="form" asideWidth="400"
[
{
"name": "radios",
"type": "radios",
"label": "Radios",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
},

{
    "type": "static",
    "name": "radios",
    "label": "当前值"
}

]

<div class="md-section-divider"></div>
### list
简单的列表选择框。
* `options` 选项配置，类型为数组，成员格式如下。
    * `label` 文字
    * `value` 值
    * `image` 图片的 http 地址。
* `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。[详情](/docs/api#select)
* `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
* `joinValues` 默认为 `true`
 * 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
 * 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
* `delimiter` 默认为 `,`
* `clearable` 默认为 `true`, 表示可以取消选中。
单选
<div class="md-section-divider"></div>
```schema:height="250" scope="form" asideWidth="350"
[
    {
      "type": "list",
      "name": "select",
      "label": "单选",
      "clearable": true,
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        }
      ]
    },
    {
      "type": "static",
      "name": "select",
      "label": "当前值"
    }
]

多选

```schema:height="280" scope="form" asideWidth="350"
[
{
"type": "list",
"name": "select",
"label": "多选",
"clearable": true,
"multiple": true,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
},

{
  "type": "static",
  "name": "select",
  "label": "当前值"
}

]

多选
<div class="md-section-divider"></div>
```schema:height="280" scope="form" asideWidth="350"
[
    {
      "type": "list",
      "name": "select",
      "label": "图片",
      "clearable": true,
      "options": [
        {
          "label": "OptionA",
          "value": "a",
          "image": "raw:https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
        },
        {
          "label": "OptionB",
          "value": "b",
          "image": "raw:https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
        },
        {
          "label": "OptionC",
          "value": "c",
          "image": "raw:https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
        },
        {
          "label": "OptionD",
          "value": "d",
          "image": "raw:https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
        }
      ]
    },
    {
      "type": "static",
      "name": "select",
      "label": "当前值"
    }
]

switch

可选框，和 checkbox 完全等价。

```schema:height="200" scope="form-item" asideWidth="400"
{
"name": "switch",
"type": "switch",
"label": "Switch"
}

<div class="md-section-divider"></div>
### button
按钮, 包含 `button`、`submit` 和 `reset`。 字段说明。
* `label` 按钮文字
* `icon` 按钮图标。可以使用来自 fontawesome 的图标。
* `level` 按钮级别。 包含： `primary`、`success`、`info`、`warning`和`danger`。
* `size` 按钮大小。 包含： `xs`、`sm`、`md`和`lg`
* `className` 按钮的类名。
如果按钮是 `button` 类型，则还需要配置 [Action](#action) 中定义的属性，否则，AMis 不知道如何响应当前按钮点击。
<div class="md-section-divider"></div>
```schema:height="300" scope="form" asideWidth="400"
[
  {
    "type": "text",
    "name": "test",
    "label": "Text"
  },
  {
    "type": "button",
    "label": "Button",
    "actionType": "dialog",
    "dialog": {
      "confirmMode": false,
      "title": "提示",
      "body": "对，你刚点击了！"
    }
  },
  {
    "type": "submit",
    "level": "primary",
    "label": "Submit"
  },
  {
    "type": "reset",
    "label": "Reset",
    "level": "danger"
  }
]

button-toolbar

从上面的例子可以看出，当按钮独立配置的时候，是独占一行的，如果想让多个按钮在一起放置，可以利用 button-toolbar

```schema:height="200" scope="form" asideWidth="400"
[
{
"type": "text",
"name": "test",
"label": "Text"
},

{
"type": "button-toolbar",
"buttons": [
{
"type": "button",
"label": "Button",
"actionType": "dialog",
"dialog": {
"confirmMode": false,
"title": "提示",
"body": "对，你刚点击了！"
}
},

  {
    "type": "submit",
    "label": "Submit"
  },

  {
    "type": "reset",
    "label": "Reset"
  }
]

}
]

<div class="md-section-divider"></div>
### button-group
按钮集合，直接看示例吧。
<div class="md-section-divider"></div>
```schema:height="200" scope="form" asideWidth="400"
[
  {
    "type": "text",
    "name": "test",
    "label": "Text"
  },
  {
    "type": "button-toolbar",
    "buttons": [
      {
        "type": "button-group",
        "buttons": [
          {
            "type": "button",
            "label": "Button",
            "actionType": "dialog",
            "dialog": {
              "confirmMode": false,
              "title": "提示",
              "body": "对，你刚点击了！"
            }
          },
          {
            "type": "submit",
            "label": "Submit"
          },
          {
            "type": "reset",
            "label": "Reset"
          }
        ]
      },
      {
        "type": "submit",
        "icon": "fa fa-check text-success"
      },
      {
        "type": "reset",
        "icon": "fa fa-times text-danger"
      }
    ]
  }
]

button-group 有两种模式，除了能让按钮组合在一起，还能做类似于单选功能。

```schema:height="250" scope="form" asideWidth="350"
[
{
"type": "button-group",
"name": "select",
"label": "单选",
"options": [
{
"label": "Option A",
"value": "a"
},
{
"label": "Option B",
"value": "b"
}
]
},

{
  "type": "static",
  "name": "select",
  "label": "当前值"
}

]

<div class="md-section-divider"></div>
### date
日期类型。
* `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.
* `inputFormat` 默认 `LL` 用来配置显示的时间格式。
* `placeholder` 默认 `请选择日期`
* `value` 这里面 value 需要特殊说明一下，因为支持相对值。如：
  * `-2mins` 2分钟前
  * `+2days` 2天后
  * `-10week` 十周前
* `minDate` 限制最小日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
* `maxDate` 限制最小日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
  可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
<div class="md-section-divider"></div>
```schema:height="250" scope="form" asideWidth="350"
[
    {
      "type": "date",
      "name": "select",
      "label": "日期"
    },
    {
      "type": "static",
      "name": "select",
      "label": "当前值"
    }
]

datetime

日期类型。

日期类型。

• format 默认 X 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.
• inputFormat 默认 LLL 用来配置显示的时间格式。
• placeholder 默认 请选择日期
• timeConstraints 请参考： https://github.com/YouCanBookMe/react-datetime
• value 这里面 value 需要特殊说明一下，因为支持相对值。如：
  
  • -2mins 2分钟前
  • +2days 2天后
  • -10week 十周前
• minDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days
• maxDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days
• minTime 限制最小时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days

• maxTime 限制最大时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days

  可用单位： min、hour、day、week、month、year。所有单位支持复数形式。

```schema:height="250" scope="form" asideWidth="350"
[
{
"type": "datetime",
"name": "select",
"label": "日期"
},

{
  "type": "static",
  "name": "select",
  "label": "当前值"
}

]

<div class="md-section-divider"></div>
### time
日期类型。
日期类型。
* `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.
* `inputFormat` 默认 `HH:mm` 用来配置显示的时间格式。
* `placeholder` 默认 `请选择日期`
* `timeConstraints` 请参考： https://github.com/YouCanBookMe/react-datetime
* `value` 这里面 value 需要特殊说明一下，因为支持相对值。如：
  * `-2mins` 2分钟前
  * `+2days` 2天后
  * `-10week` 十周前
* `minTime` 限制最小时间，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
* `maxTime` 限制最大时间，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
  可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
<div class="md-section-divider"></div>
```schema:height="250" scope="form" asideWidth="350"
[
    {
      "type": "time",
      "name": "select",
      "label": "日期"
    },
    {
      "type": "static",
      "name": "select",
      "label": "当前值"
    }
]

date-range

日期类型。

```schema:height="250" scope="form" asideWidth="350"
[
{
"type": "date-range",
"name": "select",
"label": "日期范围"
},

{
  "type": "static",
  "name": "select",
  "label": "当前值"
}

]

考虑到大家都习惯用两个字段来存储，那么就用 date 来代替吧。
<div class="md-section-divider"></div>
```schema:height="250" scope="form" asideWidth="350"
[
  [
    {
      "type": "date",
      "name": "start",
      "label": "开始日期",
      "maxDate": "$end"
    },
    {
      "type": "date",
      "name": "end",
      "label": "结束日期",
      "minDate": "$start"
    }
  ],
  {
    "type": "static",
    "name": "select",
    "label": "当前值",
    "desc": "包含开始日期和结束日期",
    "tpl": "$start - $end"
  }
]

static

纯用来展现数据的。

• placeholder 默认 （空）
• tpl 如果想一次展示多条数据，可以考虑用 tpl，模板引擎是 lodash template，同时你还可以简单用 $ 取值。 具体请查看 tpl

```schema:height="250" scope="form-item" asideWidth="350"
{
"type": "static",
"name": "select",
"label": "Label",
"value": "A"
}

<div class="md-section-divider"></div>
### static-xxx
现在支持`text`、`plain`、`json`、`date`、`datetime`、`time`、`date-range`、`html`、`tpl`、`map`、`image`、`pic`、`picture`、`progress`、`status`
纯用来展示数据的，用法跟crud里面的[Column](#Column)一样, 注意不能用里面的编辑属性，比如quickEdit。
<div class="md-section-divider"></div>
```schema:height="250" scope="form-item" asideWidth="350"
{
  "type": "static-json",
  "name": "json",
  "label": "Label",
  "value": {
    "a":"dd",
    "b":"asdasd"
  }
}

table(form-item)

主要用来展现数据的,可以用来展示数组类型的数据，比如multiple的子form。

• placeholder 默认 （空）
• columns 跟crud的columns一样，一个数组。

```schema:height="250" scope="form" asideWidth="350"
[
{
"type": "form",
"name": "form",
"label": "子Form",
"btnLabel": "设置子表单",
"multiple": true,
"form": {
"title": "配置子表单",
"controls": [
{
"name": "a",
"label": "A",
"type": "text"
},
{
"name": "b",
"label": "B",
"type": "text"
}
]
}
},
{
"type":"table",
"name":"form",
"columns":[
{
"name": "a",
"label": "A"
},
{
"name": "b",
"label": "B"
}
]
}
]

当然也可以用来作为表单输入。
* `editable` 表示可编辑
* `addable` 表示可新增
* `removable` 表示可删除
* `maxLength` 表示数组最大长度
* `minLength` 表示数组最小长度
<div class="md-section-divider"></div>
```schema:height="250" scope="form-item" asideWidth="350"
{
    "type":"table",
    "name":"form",
    "editable": true,
    "addable": true,
    "removable": true,
    "columns":[
        {
          "name": "a",
          "label": "A"
        },
        {
          "name": "b",
          "label": "B",
          "quickEdit": {
            "type": "select",
              "options": [
                {
                  "label": "A",
                  "value": "a"
                },
                {
                  "label": "B",
                  "value": "b"
                }
              ]
          }
        }
    ]
  }

matrix

矩阵类型的输入框。

• columns 列信息， 数组中 label 字段是必须给出的
• rows 行信息， 数组中 label 字段是必须给出的
• rowLabel 行标题说明
• source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。详情

```schema:height="250" scope="form-item" asideWidth="350"
{
"type": "matrix",
"name": "matrix",
"label": "Matrix",
"rowLabel": "行标题说明",
"columns": [
{
"label": "列1"
},
{
"label": "列2"
}
],
"rows": [
{
"label": "行1"
},
{
"label": "行2"
}
]
}

<div class="md-section-divider"></div>
### tree
树形结构输入框。
* `options` 类似于 [select](#select) 中 `options` 只是支持通过 `children` 无限嵌套。
* `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。[详情](/docs/api#tree)
<div class="md-section-divider"></div>
```schema:height="300" scope="form-item" asideWidth="350"
{
  "type": "tree",
  "name": "tree",
  "label": "Tree",
  "options": [
    {
      "label": "Folder A",
      "value": 1,
      "children": [
        {
          "label": "file A",
          "value": 2
        },
        {
          "label": "file B",
          "value": 3
        }
      ]
    },
    {
      "label": "file C",
      "value": 4
    },
    {
      "label": "file D",
      "value": 5
    }
  ]
}

image

图片格式输入，默认 AMis 会直接存储在贴吧的 hiphoto 里面，提交到 form 是直接的图片 url。

• reciever 默认 /api/upload 如果想自己存储，请设置此选项。
• multiple 是否多选。
• maxLength 默认没有限制，当设置后，一次只允许上传指定数量文件。
• joinValues 多选时是否将多个值用 delimiter 连接起来。
• delimiter 链接符
• autoUpload 是否选择完就自动开始上传？默认为 true
• compress 默认 true 如果想默认压缩请开启。
• compressOptions
  
  • maxWidth 设置最大宽度。
  • maxHeight 设置最大高度。
• showCompressOptions 默认为 false, 开启后，允许用户输入压缩选项。
• crop 用来设置是否支持裁剪。
  
  • aspectRatio 默认 1 即 1:1
• allowInput 默认都是通过用户选择图片后上传返回图片地址，如果开启此选项，则可以允许用户图片地址。
• limit 限制图片大小，超出不让上传。
  
  • width 限制图片宽度。
  • height 限制图片高度。
  • minWidth 限制图片最小宽度。
  • minHeight 限制图片最小高度。
  • maxWidth 限制图片最大宽度。
  • maxHeight 限制图片最大高度。

```schema:height="250" scope="form-item" asideWidth="350"
{
"type": "image",
"name": "image",
"label": "Images"
}

<div class="md-section-divider"></div>
### file
文件输入，AMis 也默认处理了图片存储，提交给 API 的是文件的下载地址。
* `reciever` 默认 `/api/upload/file` 如果想自己存储，请设置此选项。
* `accept` 默认 `text/plain` 默认只支持纯文本，要支持其他类型，请配置此属性。
* `maxSize` 默认没有限制，当设置后，文件大小大于此值将不允许上传。
* `multiple` 是否多选。
* `maxLength` 默认没有限制，当设置后，一次只允许上传指定数量文件。
* `joinValues` 多选时是否将多个值用 `delimiter` 连接起来。
* `delimiter` 链接符
* `autoUpload` 是否选择完就自动开始上传？默认为 `true`
* `fileField` 默认 `file`, 如果你不想自己存储，则可以忽略此属性。
* `downloadUrl` 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。
* `useChunk` 默认为 'auto' amis 所在服务器，限制了文件上传大小不得超出10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。
* `chunkSize` 分块大小，默认为 5M.
* `startChunkApi` 默认 `/api/upload/startChunk` 想自己存储时才需要关注。
* `chunkApi` 默认 `/api/upload/chunk` 想自己存储时才需要关注。
* `finishChunkApi` 默认 `/api/upload/finishChunk` 想自己存储时才需要关注。
<div class="md-section-divider"></div>
```schema:height="250" scope="form-item" asideWidth="350"
{
  "type": "file",
  "name": "file",
  "label": "File",
  "maxSize": 1048576
}

rich-text

富文本编辑器

• saveAsUbb 是否保存为 ubb 格式
• reciever 默认的图片保存 API /api/upload/image

• buttons 默认为

  [
  'paragraphFormat', 'quote', 'color', '|',
  'bold', 'italic', 'underline', 'strikeThrough', '|',
  'formatOL', 'formatUL', 'align', '|',
  'insertLink', 'insertImage', 'insertTable', '|',
  'undo', 'redo', 'html'
  ]

```schema:height="350" scope="form-item" asideWidth="350"
{
"type": "rich-text",
"name": "html",
"label": "Rich Text"
}

<div class="md-section-divider"></div>
### xxx-editor
IDE输入，目前支持多种语言,包括`json-editor`, `js-editor`, `jsx-editor`, `css-editor`, `sql-editor`, `markdown-editor`, `shell-editor`, `python-editor`, `yaml-editor`, `java-editor`
<div class="md-section-divider"></div>
```schema:height="350" scope="form-item" asideWidth="350"
{
  "type": "json-editor",
  "name": "html",
  "label": "json-editor"
}

combo

组合模式，支持自由组合多个表单项。

• multiple 默认为 false 配置是否为多选模式
• controls 配置组合成员，所有成员都是横向展示，可以是任意 FormItem
• form 配置组合成员由form展示，不可与controls一起配置，配置方式跟Form
• controls[x].columnClassName 列的类名，可以用它配置列宽度。默认平均分配。
• controls[x].unique 设置当前列值是否唯一，即不允许重复选择。
• maxLength 当multiple为true的时候启用，设置可以最大项数。
• flat 默认为 false, 是否将结果扁平化(去掉name),只有当controls的length为1且multiple为true的时候才有效。
• joinValues 默认为 true 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用array的方式。
• delimiter 当扁平化开启并且joinValues为true时，用什么分隔符。
• multiLine 默认是横着展示一排，设置以后竖着展示
• draggable 默认为 false, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个$id字段

```schema:height="450" scope="form" asideWidth="350"
[
{
"type": "combo",
"name": "combo",
"label": "单选组合项",
"controls": [
{
"name": "a",
"type": "text"
},
{
"name": "b",
"type": "select",
"options": ["a", "b", "c"]
}
]
},
{
"type": "static",
"name": "combo",
"label": "当前值"
},

{
"type": "combo",
"name": "combo2",
"label": "多选组合项",
"multiple": true,
"draggable": true,
"controls": [
{
"label": "字段1",
"name": "a",
"type": "text"
},
{
"label": "字段2",
"name": "b",
"type": "select",
"options": ["a", "b", "c"],
"unique": true
}
]
},
{
"type": "static",
"name": "combo2",
"label": "当前值"
}
]

combo 多行模式。
<div class="md-section-divider"></div>
```schema:height="450" scope="form" asideWidth="350"
[
{
  "type": "combo",
  "name": "combo",
  "label": "多选组合form",
  "multiple": true,
  "form":{
    "mode":"normal",
    "controls": [
        {
          "label": "字段1",
          "name": "a",
          "type": "text"
        },
        {
          "label": "字段2",
          "name": "b",
          "type": "select",
          "options": ["a", "b", "c"]
        }
      ]
  }
},
{
  "type": "static",
  "name": "combo",
  "label": "当前值"
},
{
  "type": "combo",
  "name": "xxx",
  "label": "单选组合form",
  "form":{
    "mode":"normal",
    "controls": [
        {
          "name": "a",
          "type": "text"
        },
        {
          "name": "b",
          "type": "select",
          "options": ["a", "b", "c"]
        }
      ]
  }
},
{
  "type": "static",
  "name": "xxx",
  "label": "当前值"
}
]

form（子Form）

formItem 还可以是子表单类型。

```schema:height="400" scope="form" asideWidth="350"
[
{
"type": "form",
"name": "form",
"label": "子Form",
"btnLabel": "设置子表单",
"form": {
"title": "配置子表单",
"controls": [
{
"name": "a",
"label": "A",
"type": "text"
},

  {
    "name": "b",
    "label": "B",
    "type": "text"
  }
]

}
},
{
"type": "static",
"name": "form",
"label": "当前值"
},
{
"type": "form",
"name": "form2",
"label": "多选",
"multiple": true,
"maxLength":3,
"btnLabel": "设置子表单",
"form": {
"title": "配置子表单",
"controls": [
{
"name": "a",
"label": "A",
"type": "text"
},

  {
    "name": "b",
    "label": "B",
    "type": "text"
  }
]

}
},
{
"type": "static",
"name": "form2",
"label": "当前值"
}
]

<div class="md-section-divider"></div>
### repeat
可用来设置重复频率
* `options` 默认: `hourly,daily,weekly,monthly`， 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly`
* `placeholder` 默认为 `不重复`, 当不指定值时的说明。
<div class="md-section-divider"></div>
```schema:height="300" scope="form-item" asideWidth="350"
{
  "type": "repeat",
  "name": "repeat",
  "label": "重复频率"
}

hbox(form-item)

支持 form 内部再用 hbox 布局。

• columns 数据，用来配置列内容。每个 column 又一个独立的 form 配置项。
• columns[x].columnClassName 配置列的 className。

```schema:height="200" scope="form-item" asideWidth="350"
{
"type": "hbox",
"columns": [
{
"columnClassName": "w-sm",
"controls": [
{
"name": "text",
"type": "text",
"label": false,
"placeholder": "Text"
}
]
},

{
     "controls": [
        {
            "name": "text",
            "type": "text",
            "label": "Text"
        }
    ]
}

]
}

<div class="md-section-divider"></div>
### grid(form-item)
支持 form 内部再用 grid 布局。
|属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| columns[x] | [Form](#Form) |  |  成员是一个 Form 配置 |
| columns[x].xs | `int` |  |  宽度占比： 1 - 12 |
| columns[x].xsHidden | `boolean` |  |  是否隐藏 |
| columns[x].xsOffset | `int` |  |  偏移量 1 - 12 |
| columns[x].xsPull | `int` |  | 靠左的距离占比：1 - 12  |
| columns[x].xsPush | `int` |  |  靠右的距离占比： 1 - 12 |
| columns[x].sm | `int` |  |  宽度占比： 1 - 12 |
| columns[x].smHidden | `boolean` |  |  是否隐藏 |
| columns[x].smOffset | `int` |  |  偏移量 1 - 12 |
| columns[x].smPull | `int` |  | 靠左的距离占比：1 - 12  |
| columns[x].smPush | `int` |  |  靠右的距离占比： 1 - 12 |
| columns[x].md | `int` |  |  宽度占比： 1 - 12 |
| columns[x].mdHidden | `boolean` |  |  是否隐藏 |
| columns[x].mdOffset | `int` |  |  偏移量 1 - 12 |
| columns[x].mdPull | `int` |  | 靠左的距离占比：1 - 12  |
| columns[x].mdPush | `int` |  |  靠右的距离占比： 1 - 12 |
| columns[x].lg | `int` |  |  宽度占比： 1 - 12 |
| columns[x].lgHidden | `boolean` |  |  是否隐藏 |
| columns[x].lgOffset | `int` |  |  偏移量 1 - 12 |
| columns[x].lgPull | `int` |  | 靠左的距离占比：1 - 12  |
| columns[x].lgPush | `int` |  |  靠右的距离占比： 1 - 12 |
<div class="md-section-divider"></div>
```schema:height="200" scope="form-item" asideWidth="350"
{
  "type": "grid",
  "columns": [
    {
        "md": 3,
        "controls": [
            {
                "name": "text",
                "type": "text",
                "label": false,
                "placeholder": "Text"
            }
        ]
    },
    {
        "md": 9,
         "controls": [
            {
                "name": "text",
                "type": "text",
                "label": "Text"
            }
        ]
    }
  ]
}

panel(form-item)

还是为了布局，可以把一部分 form-item 合并到一个 panel 里面单独展示。

• title panel 标题
• body Container 可以是其他渲染模型。
• bodyClassName body 的 className.
• footer Container 可以是其他渲染模型。
• footerClassName footer 的 className.
• 其他请参考 form 配置项如： controls, tabs, fieldSet 等等。。

```schema:height="400" scope="form-item" asideWidth="350"
{
"type": "hbox",
"columns": [
{
"controls": [
{
"name": "text",
"type": "text",
"label": false,
"placeholder": "Text"
}
]
},

{
     "columnClassName": "w-xl",
     "controls": [
        {
            "type": "panel",
            "title": "bla bla",
            "controls": [
                {
                    "name": "text",
                    "type": "text",
                    "label": false,
                    "placeholder": "Text 1"
                },

                {
                    "name": "text2",
                    "type": "text",
                    "label": false,
                    "placeholder": "Text 2"
                }
            ]
        }
    ]
}

]
}

<div class="md-section-divider"></div>
### tpl(form-item)
具体请查看 [tpl](#tpl)
<div class="md-section-divider"></div>
## Tpl
tpl 类型的渲染器支持用 JS 模板引擎来组织输出，采用的 lodash 的 [template](https://lodash.com/docs/4.15.0#template)，关于语法部分，请前往 lodash 文档页面。
<div class="md-section-divider"></div>
```schema:height="200"
{
  "data": {
    "user": "no one"
  },
  "body": {
    "type": "tpl",
    "tpl": "User: <%= data.user%>"
  }
}

可用 js 方法。

• formatDate(value, format='LLL', inputFormat='') 格式化时间格式，关于 format 请前往 moment 文档页面。
• formatTimeStamp(value, format='LLL') 格式化时间戳为字符串。
• formatNumber(number) 格式化数字格式，加上千分位。
• countDown(value) 倒计时，显示离指定时间还剩下多少天，只支持时间戳。
• 可以联系我们添加更多公用方法。

如：

{
  "data": {
    "user": "no one"
  },
  "body": {
    "type": "tpl",
    "tpl": "User: <%= formatDate(data.time, 'YYYY-MM-DD') %>"
  }
}

如果只想简单取下变量，可以用 $xxx 或者 ${xxx}。同时如果不指定类型，默认就是 tpl, 所以以上示例可以简化为。

取值支持多级，如果层级比较深可以用 . 来分割如： ${xx.xxx.xx}
另外 $& 表示直接获取当前的 data。

{
  "data": {
    "user": "no one"
  },
  "body": "User: $user"
}

通过 $xxx 取到的值，默认是不做任何处理，如果希望把 html 转义了的，请使用：${xxx | html}。

从上面的语法可以看出来，取值时是支持指定 filter 的，那么有哪些 filter 呢？

• html 转义 html 如：${xxx|html}。
• json json stringify。
• raw 表示不转换, 原样输出。
• date 做日期转换如： ${xxx | date:YYYY-MM-DD}
• number 自动给数字加千分位。${xxx | number} 9999 => 9,999
• trim 把前后多余的空格去掉。
• percent 格式化成百分比。${xxx | percent} 0.8232343 => 82.32%
• round 四舍五入取整。
• truncate 切除， 当超出 200 个字符时，后面的部分直接显示 ...。 ${desc | truncate:500:...}
• url_encode 做 url encode 转换。
• url_decode 做 url decode 转换。
• default 当值为空时，显示其他值代替。 ${xxx | default:-} 当为空时显示 -
• join 当值是 array 时，可以把内容连起来。${xxx | join:,}
• first 获取数组的第一个成员。
• last 获取数组的最后一个成员。
• pick 如果是对象则从当前值中再次查找值如： ${xxx|pick:yyy} 等价于 ${xxx.yyy}。如果是数组，则做 map 操作，操作完后还是数组，不过成员已经变成了你选择的东西。
• ubb2html 我想你应该不需要，贴吧定制的 ubb 格式。
• html2ubb 我想你应该不需要，贴吧定制的 ubb 格式。
• split 可以将字符传通过分隔符分离成数组，默认分隔符为 , 如： ${ids|split|last} 即取一段用逗号分割的数值中的最后一个。
• nth 取数组中的第 n 个成员。如： ${ids|split|nth:1}
• str2date 请参考 date 中日期默认值的设置格式。
• duration 格式化成时间端如：2 -=> 2秒 67 => 1分7秒 1111111 => 13天21时39分31秒

组合使用。

• ${&|json|html} 把当前可用的数据全部打印出来。$& 取当前值，json 做 json stringify，然后 html 转义。
• ${rows:first|pick:id} 把 rows 中的第一条数据中的 id 取到。
• ${rows|pick:id|join:,}

Plain

plain, 单纯的文字输出来。

{
  "body": {
    "type": "plain",
    "text": "Pure Text <html>"
  }
}

Html

html, 当需要用到变量时，请用 Tpl 代替。

{
  "body": {
    "type": "html",
    "html": "支持 Html <code>Html</code>"
  }
}

Action

Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触发事件。

• actionType 【必填】 选项：ajax、link、url或dialog。
• api 当 actionType 为 ajax 时，必须指定，参考 api 格式说明。
• link 当 actionType 为 link 时必须指定。指定相对路径和绝对路径，但是必须是Amis站点的页面。
• url 当 actionType 为 url 时必须指定，按钮点击后，会打开指定页面。
• blank 当 actionType 为 url 时可选，如果为false将在本页面打开。
• dialog 当 actionType 为 dialog 时必须指定。
• nextCondition 当 actionType 为 dialog 时可以用来设置下一条数据的条件，默认为 true。详情请见 Demo。
• confirmText 当设置 confirmText 后，操作在开始前会询问用户。
• reload 指定此次操作完后，需要刷新的目标组件名字（组件的 name 指，自己配置的），多个请用 , 号隔开。
• feedback 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。
• messages，actionType 为 ajax 时才有用。
  
  • success ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。
  • failed ajax 操作失败提示。

示例：

• ajax 当按钮点击时，发送 ajax 请求，发送的数据取决于所在的容器里面。

  {
  "data": {
    "user": "no one"
  },
  "body": {
    "label": "Post",
    "type": "button",
    "actionType": "ajax",
    "confirmText": "确定？",
    "api": "/api/mock/saveForm",
    "messages": {
      "success": "发送成功"
    }
  }
  }

• link 当按钮点击后，无刷新进入 AMis 内部某个页面。

  {
    "body": {
      "label": "进入简介页面",
      "type": "button",
      "level": "info",
      "actionType": "link",
      "link": "/docs/index"
    }
  }

• url 当按钮点击后，新窗口打开指定页面。

  {
    "body": {
      "label": "打开 Baidu",
      "type": "button",
      "level": "success",
      "actionType": "url",
      "url": "raw:http://www.baidu.com"
    }
  }

• dialog 当按钮点击后，弹出一个对话框。 关于 dialog 配置，请查看 Dialog 模型。

  {
    "body": {
      "label": "Dialog Form",
      "type": "button",
      "level": "primary",
      "actionType": "dialog",
      "dialog": {
        "title": "表单设置",
        "body": {
          "type": "form",
          "api": "/api/mock/saveForm?waitSeconds=1",
          "controls": [
            {
              "type": "text",
              "name": "text",
              "label": "文本"
            }
          ]
        }
      }
    }
  }

Dialog

Dialog 由 Action 触发。他是一个类似于 Page 的容器模型。

CRUD

增删改查模型，主要用来展现列表，并支持各类【增】【删】【改】【查】的操作。复杂示例请前往 Demo。

CRUD 支持三种模式：table、grid、list，默认为 table，每种的配置有些不一样，所以这里分开介绍。

Table(CRUD)

```schema:height="800" scope="body"
{
"type": "crud",
"api": "/api/sample",
"syncLocation": false,
"title": null,
"perPageField":"rn",
"defaultParams":{
"rn": 10
},
"columns": [
{
"name": "id",
"label": "ID",
"width": 20,
"sortable": true
},
{
"name": "engine",
"label": "Rendering engine",
"sortable": true,
"toggled": false
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)",
"sortable": true
},
{
"name": "version",
"label": "Engine version"
}
]
}

<div class="md-section-divider"></div>
#### Column
* `type` 默认为 `text`，支持： `text`、`html`、`tpl`、`image`、`progress`、`status`、`date`、`datetime`、`time`、`json`、`map`和`operation`。
* `name` 用来关联列表数据中的变量 `key`。
* `label` 列标题。
* `sortable` 开启后可以根据当前列排序(后端排序)。
* `localSortable` 开启后可以根据当前列排序(前端排序，本页排序)。
* `copyable` 开启后，会支持内容点击复制。
* `width` 列宽度。
* `quickEdit` 是否支持快速编辑。 支持两种配置。
    * [FormItem](#FormItem) 无需配置 name, 自动采用 column 上的 name 值。
    * `boolean` false 不启用，true 启用，且快速编辑的表单为 text 类型。等价于：`{type: "text"}`
* `popOver` 是否支持点击查看详情。当内容较长时，可以开启此配置。
* `toggled` 控制默认是展示还是不展示，只有 Table 的 `columnsTogglable` 开启了才有效。
* `labelGroup` 设置本列的group名，会在表头上面再加一层group显示。
* `tooltip` 设置后鼠标移上去有小tip提示，值为tpl字符串,支持[tpl](#tpl)。
* `searchable` 设置快速过滤功能，跟filter功能一样, 支持两种配置。
    * [FormItem](#FormItem) 无需配置 name, 自动采用 column 上的 name 值。
    * `boolean` false 不启用，true 启用，且快速编辑的表单为 text 类型。等价于：`{type: "text"}`
<div class="md-section-divider"></div>
#### html(Column)
当 column 为 html 类型时才支持 html 标签。
<div class="md-section-divider"></div>
#### tpl(Column)
支持 JS 模板引擎，用法和外层 [tpl](#tpl) 一样。
<div class="md-section-divider"></div>
#### map(Column)
使用此类型，允许配置将值映射成其他内容显示。
如:
<div class="md-section-divider"></div>

{
"type": "map",
"name": "status",
"label": "Map 类型",
"map": {
"1": "新建",
"2": "已上线",
"3": "已删除"
}
}

<div class="md-section-divider"></div>
#### image(Column)
图片类型，让值以图片的形式展示。
<div class="md-section-divider"></div>
#### progress(Column)
进度类型，要求值是 0 - 100 的数值。
<div class="md-section-divider"></div>
#### status(column)
状态类型，非零飘绿，零值飘红。
<div class="md-section-divider"></div>
#### date(column)
日期类型，自动将时间戳格式的数值以 `format=LL` 的形式展示。
* `format` 默认为 `LL` 格式说明请参考  [moment 文档](http://momentjs.com/docs/#/displaying/format/)。
* `valueFormat` 默认为 `X` 格式说明请参考, (PS: 可以留空)  [moment 文档](http://momentjs.com/docs/#/parsing/)。
<div class="md-section-divider"></div>
#### datetime(column)
日期类型，自动将时间戳格式的数值以 `format=LLL` 的形式展示。
* `format` 默认为 `LLL` 格式说明请参考  [moment 文档](http://momentjs.com/docs/#/displaying/format/)。
* `valueFormat` 默认为 `X` 格式说明请参考, (PS: 可以留空)  [moment 文档](http://momentjs.com/docs/#/parsing/)。
<div class="md-section-divider"></div>
#### time(column)
日期类型，自动将时间戳格式的数值以 `format=LT` 的形式展示。
* `format` 默认为 `LT` 格式说明请参考  [moment 文档](http://momentjs.com/docs/#/displaying/format/)。
* `valueFormat` 默认为 `X` 格式说明请参考, (PS: 可以留空)  [moment 文档](http://momentjs.com/docs/#/parsing/)。
<div class="md-section-divider"></div>
#### json(column)
json 类型，方便查看复杂对象。
* levelExpand 初始展开第几层，从0开始
* expandDefaultLevel 点击后展开几级
<div class="md-section-divider"></div>
#### list(column)
如果需要展示的数据是数组格式，则可以考虑用 list 来展示。
* listItem 每行的具体展示内容。
* listItem.title
* listItem.subTitle
* listItem.desc
* listItem.avatar
* listItem.body
* listItem.actions
Demo 待补充。
<div class="md-section-divider"></div>
#### operation(Column)
一般 Column 里面都会配置一个 `Operation` 来实现单条操作。通过配置 `buttons` 来设置按钮。 `buttons` 中可以放 [button](#button) 或者 [button-group](#button-group)。
<div class="md-section-divider"></div>
```schema:height="800" scope="body"
{
    "type": "crud",
    "api": "/api/sample",
    "syncLocation": false,
    "title": null,
    "columns": [
        {
            "name": "id",
            "label": "ID",
            "width": 20
        },
        {
            "name": "engine",
            "label": "Rendering engine",
            "sortable": true
        },
        {
            "type": "operation",
            "label": "操作",
            "width": 200,
            "buttons": [
                {
                    "type": "button-group",
                    "buttons": [
                        {
                            "type": "button",
                            "label": "查看",
                            "actionType": "dialog",
                            "dialog": {
                                "disabled": true,
                                "body": {
                                    "type": "form",
                                    "controls": [
                                        {
                                            "name": "engine",
                                            "label": "Rendering engine",
                                            "type": "static"
                                        }
                                    ]
                                }
                            }
                        },
                        {
                            "type": "button",
                            "label": "编辑",
                            "actionType": "dialog",
                            "dialog": {
                                "body": {
                                    "api": "/api/sample/$id",
                                    "type": "form",
                                    "controls": [
                                        {
                                            "name": "engine",
                                            "label": "Rendering engine",
                                            "type": "text"
                                        }
                                    ]
                                }
                            }
                        },
                         {
                             "type": "button",
                             "label": "删除",
                             "level": "danger",
                             "actionType": "ajax",
                             "confirmText": "确定？",
                             "api": "delete:/api/sample/$id"
                         }
                    ]
                }
            ]
        }
    ]
}

Grid(CRUD)

跟 Table(CRUD) 基本上差不多，主要区别是，不再配置 columns 而是配置 card。

```schema:height="800" scope="body"
{
"type": "crud",
"api": "/api/admin/user/inGroup?groupId=1",
"syncLocation": false,
"mode": "grid",
"defaultParams": {
"perPage": 6
},
"switchPerPage": false,
"placeholder": "没有用户信息",
"columnsCount": 2,
"card": {
"header": {
"className": "bg-white",
"title": "$name", "subTitle": "$realName",
"desc": "$email", "avatar": "${avatar | raw}",
"highlight": "$isSuperAdmin", "avatarClassName": "pull-left thumb-md avatar b-3x m-r" }, "bodyClassName": "padder m-b", "body": "\n <% if (data.roles && data.roles.length) { %>\n <% data.roles.map(function(role) { %>\n <span class=\"label label-default\"><%- role.name %></span>\n <% }) %>\n <% } else { %>\n <p class=\"text-muted\">没有分配角色</p>\n <% } %>\n ", "actions": [ { "label": "编辑", "actionType": "dialog", "dialog": { "title": null, "name": "amis-user-edit", "api": "/api/admin/user/$id?groupId=1", "tabs": [ { "title": "基本信息", "controls": [ { "type": "hidden", "name": "id" }, { "name": "name", "label": "帐号", "disabled": true, "type": "text" }, { "type": "divider" }, { "name": "email", "label": "邮箱", "type": "text", "disabled": true }, { "type": "divider" }, { "name": "isAmisOwner", "label": "管理员", "desc": "设置是否为超级管理", "type": "switch" } ] }, { "title": "角色信息", "controls": [ { "name": "roles", "label": "关联角色", "type": "checkboxes", "source": "/api/admin/user/roles?groupId=1", "placeholder": "当前组下还没创建角色" } ] }, { "title": "设置权限", "controls": [ { "name": "permissions", "label": "权限信息", "type": "checkboxes", "source": "/api/admin/user/permissions?groupId=1", "desc": "推荐通过用户组管理权限, 但是还是可以给个人配置独立权限." } ] } ] } }, { "label": "移除", "confirmText": "您确定要移除该用户?", "actionType": "ajax", "action": "delete:/api/admin/user/$id?groupId=1"
}
]
}
}

<div class="md-section-divider"></div>
### List(CRUD)
跟 [Table(CRUD)](#Table(CRUD)) 基本上差不多，主要区别是，不再配置  `columns` 而是配置 `listItem`。
|属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | `string` |  |  `"crud"` 指定为 CRUD 渲染器 |
| mode | `string` |  |  `"list"` 指定为 List 模式 |
| title | `string` | `"表格"`  |  可设置成空，当设置成空时，没有标题栏 |
| className | `string` |  |  表格外层 Dom 的类名 |
| api | [Api](#api) |  | CRUD 用来获取列表数据的 api。[详情](/docs/api#crud) |
| listItem | [listItem](#listItem) |  | 用来设置卡片信息 |
| filter | [Form](#form) |  | 设置过滤器，当该表单提交后，会把数据带给当前 crud 刷新列表。 |
| syncLocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 |
| draggable | `boolean` | `false` | 是否可通过拖拽排序 |
| saveOrderApi | [Api](#api) |  | 保存排序的 api。[详情](/docs/api#crud)  |
| quickSaveApi | [Api](#api) |  | 快速编辑后用来批量保存的 API。[详情](/docs/api#crud)  |
| quickSaveItemApi | [Api](#api) |  | 快速编辑配置成及时保存时使用的 API。[详情](/docs/api#crud)  |
| messages | `Object` |  | 覆盖消息提示，如果不指定，将采用 api 返回的 message |
| bulkActions | Array Of [Action](#action) |  | 批量操作列表，配置后，表格可进行选中操作。 |
| defaultChecked | `boolean` | `false` | 当可批量操作时，默认是否全部勾选。 |
| switchPerPage | `boolean` | `false` | 是否可修改每页显示多少个。 |
| showPageInfo | `boolean` | `true` | 是否显示列表信息，比如一共多少页，有多少条数据。 |
| columnsTogglable | `boolean` | `true` | 是否可以用户控制显示与不显示某些列。 |
| messages.fetchFailed | `string` |  | 获取失败时提示 |
| messages.saveOrderFailed | `string` |  | 保存顺序失败提示 |
| messages.saveOrderSuccess | `string` |  | 保存顺序成功提示 |
| messages.quickSaveFailed | `string` |  | 快速保存失败提示 |
| messages.quickSaveSuccess | `string` |  | 快速保存成功提示 |
| primaryField | `string` | `"id"` | 设置 ID 字段名。 |
| pageField | `string` | `"page"` | 设置分页页码字段名。 |
| perPageField | `string` | `"perPage"` | 设置分页一页显示的多少条数据的字段名。 |
| orderField | `string` |  | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 |
<div class="md-section-divider"></div>
#### listItem
* `title` 标题
* `subTitle` 副标题
* `desc` 描述
* `avatar` 图片
* `actions` 按钮集合。关于按钮部分查看 [Button](#button)
<div class="md-section-divider"></div>
```schema:height="800" scope="body"
{
"type": "crud",
"api": "/api/admin/permission/inGroup?groupId=1",
"mode": "list",
"placeholder": "当前组内, 还没有配置任何权限.",
"title": null,
"listItem": {
  "title": "$name",
  "subTitle": "$desc",
  "actions": [
    {
      "icon": "fa fa-edit",
      "tooltip": "编辑",
      "actionType": "dialog",
      "dialog": {
        "title": "编辑能力（权限）",
        "name": "amis-permission-edit",
        "api": "/api/admin/permission/$id?groupId=1",
        "controls": [
          {
            "type": "hidden",
            "name": "id"
          },
          {
            "name": "name",
            "label": "权限名称",
            "type": "text",
            "disabled": true
          },
          {
            "type": "divider"
          },
          {
            "name": "desc",
            "label": "描述",
            "type": "textarea"
          }
        ]
      }
    },
    {
      "tooltip": "删除",
      "disabledOn": "~[\"admin:permission\", \"admin:user\", \"admin:role\", \"admin:acl\", \"admin:page\", \"page:readAll\", \"admin:settings\"].indexOf(name)",
      "icon": "fa fa-times",
      "confirmText": "您确定要移除该权限?",
      "actionType": "ajax",
      "action": "delete:/api/admin/permission/$id?groupId=1"
    }
  ]
}
}

Panel

可以把相关信息以盒子的形式展示到一块。

```schema:height="300" scope="body"
{
"type": "panel",
"title": "Panel Heading",
"body": "Panel Body",
"actions": [
{
"type": "button",
"label": "Action 1",
"actionType": "dialog",
"dialog": {
"confirmMode": false,
"title": "提示",
"body": "对，你刚点击了！"
}
},

    {
      "type": "button",
      "label": "Action 2",
      "actionType": "dialog",
      "dialog": {
        "confirmMode": false,
        "title": "提示",
        "body": "对，你刚点击了！"
      }
    }
]

}

<div class="md-section-divider"></div>
## Wrapper
简单的一个容器。
|属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | `string` | `"wrapper"`  |   指定为 Wrapper 渲染器 |
| className | `string` |  |  外层 Dom 的类名 |
| size | `string` |  | 支持: `xs`、`sm`、`md`和`lg` |
| body | [Container](#container) |  | 内容容器 |
<div class="md-section-divider"></div>
```schema:height="200" scope="body"
{
    "type": "wrapper",
    "body": "Wrapped Body"
}

Service

功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据，数据可用于子组件。
该组件初始化时就会自动拉取一次数据，后续如果需要刷新，请结合 Action 实现，可以把 Action 的 actionType 设置为 reload, target 为该组件。
同时该组件，还支持 api 数值自动监听，比如 getData?type=$type 只要当前环境 type 值发生变化，就会自动重新拉取。

```schema:height="200" scope="body"
{
"type": "service",
"api": "/api/mock/pageInfo",
"body": {
"type": "panel",
"title": "$title", "body": "现在是：${time}"
}
}

<div class="md-section-divider"></div>
## Chart
图表渲染器，采用echarts渲染，配置格式跟echarts相同，配置文档[文档](http://echarts.baidu.com/option.html#title)
|属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | `string` | `"chart"`  |   指定为 chart 渲染器 |
| className | `string` |  |  外层 Dom 的类名 |
| body | [Container](#container) |  | 内容容器 |
| api | [api](#api) |  | 配置项远程地址 |
| initFetch | `boolean` |  | 是否默认拉取 |
| interval | `number` |  | 刷新时间(最低3000) |
| config | `object/string` |  | 设置eschars的配置项,当为`string`的时候可以设置function等配置项|
| style | `object` |  | 设置根元素的style |
<div class="md-section-divider"></div>
```schema:height="300" scope="body"
{
    "type": "chart",
    "api": "/api/mock/chart",
    "interval": 3000
}

video

视频播放器。

```schema:height="500" scope="body"
{
"type": "video",
"autoPlay": false,
"src": "raw:https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
"poster": "raw:https://video-react.js.org/assets/poster.png"
}

<div class="md-section-divider"></div>
## table
类似与 CRUD 的，但是该组件没有 CRUD 那么强大的交互功能，只能做简单的渲染，不负责数据的拉取，但是他可以绑定作用域中的变量，或者结合 service 组件通过 api 拉取后再绑定。
|属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | `string` |  |  `"table"` 指定为 table 渲染器 |
| className | `string` |  |  表格外层 Dom 的类名 |
| columns | Array of [Column](#column) |  | 用来设置列信息 |
| rows | * |  | 数据或者 "${xxxx}" 从当前作用域中取变量 |
| placeholder | string | ‘暂无数据’ | 当没数据的时候的文字提示 |
<div class="md-section-divider"></div>
```schema:height="700" scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "panel",
            "title": "简单表格示例1",
            "body": {
                "type": "table",
                "rows": "$rows",
                "columns": [
                    {
                        "name": "engine",
                        "label": "Engine"
                    },
                    {
                        "name": "version",
                        "label": "Version"
                    }
                ]
            }
        },
        {
            "type": "panel",
            "title": "简单表格示例2",
            "body": {
                "type": "table",
                "rows": "$rows",
                "columns": [
                    {
                        "name": "engine",
                        "label": "Engine"
                    },
                    {
                        "name": "version",
                        "label": "Version"
                    }
                ]
            }
        }
    ]
}

Card

卡片的展示形式。

```schema:height="300" scope="body"
{
"type": "card",
"header": {
"title": "Title",
"subTitle": "Sub Title",
"desc": "desc",
"avatarClassName": "pull-left thumb-md avatar b-3x m-r",
"avatar": "raw:http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg"
},
"body": "Body",
"actions": [
{
"type": "button",
"label": "Action 1",
"actionType": "dialog",
"dialog": {
"confirmMode": false,
"title": "提示",
"body": "对，你刚点击了！"
}
},

    {
      "type": "button",
      "label": "Action 2",
      "actionType": "dialog",
      "dialog": {
        "confirmMode": false,
        "title": "提示",
        "body": "对，你刚点击了！"
      }
    }
]

}

<div class="md-section-divider"></div>
## Tabs
|属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | `string` | `"tabs"`  |   指定为 Tabs 渲染器 |
| className | `string` |  |  外层 Dom 的类名 |
| tabsClassName | `string` |  |  Tabs Dom 的类名 |
| tabs | `Array` |  |  tabs 内容 |
| tabs[x].title | `string` |  | Tab 标题 |
| tabs[x].icon | `icon` |  | Tab 的图标 |
| tabs[x].tab | [Container](#container) |  | 内容区 |
| tabs[x].hash | `string` |  | 设置以后将跟url的hash对应 |
| tabs[x].reload | `boolean` |  | 设置以后内容每次都会重新渲染，对于crud的重新拉取很有用 |
| tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 |
<div class="md-section-divider"></div>
```schema:height="300" scope="body"
{
    "type": "tabs",
    "tabs": [
        {
            "title": "Tab 1",
            "tab": "Content 1"
        },
        {
            "title": "Tab 2",
            "tab": "Content 2"
        }
    ]
}

Grid