diff --git a/docs/components/form/options.md b/docs/components/form/options.md index b6e05dd0..af3465eb 100755 --- a/docs/components/form/options.md +++ b/docs/components/form/options.md @@ -390,6 +390,38 @@ order: 2 } ``` +## 检索 searchable + +可以配置 `"searchable": true` 显示前端过滤，适合用于有大量内容的列表。 + +```schema:height="400" scope="body" +{ + "type": "form", + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "searchable": true, + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + ## 拼接符 delimiter 多选模式下，默认表单项值为选中的选项的`value`值，用默认拼接符`,`拼接，如下 @@ -1242,12 +1274,12 @@ order: 2 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | -| ------------ | --------------------------------- | --------- | ---------------------------------------------------------------------- | +| 属性名 | 类型 | 默认值 | 说明 | +|--------------|-----------------------------------|-----------|---------------------------------------------------------------------| | options | `Array`或`Array` | | 选项组，供用户选择 | -| source | `string`或 [API](../../types/api) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 | -| multiple | `boolean` | `false` | 是否多选 | -| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 | -| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 | -| joinValues | `boolean` | `true` | 是否拼接`value`值 | +| source | `string`或 [API](../../types/api) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 | +| multiple | `boolean` | `false` | 是否支持多选 | +| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 | +| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 | +| joinValues | `boolean` | `true` | 是否拼接`value`值 | | extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 | diff --git a/docs/components/form/select.md b/docs/components/form/select.md index 0cddfe55..b5490a85 100755 --- a/docs/components/form/select.md +++ b/docs/components/form/select.md @@ -42,12 +42,14 @@ order: 48 } ``` +更多设置项请参考 [Options](./options.md) + ## 属性表 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 | 属性名 | 类型 | 默认值 | 说明 | -| --------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- | +|-----------------|-----------------------------------|--------------|-------------------------------------------------------------------------------------------------------------------| | options | `Array`或`Array` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) | | source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) | | autoComplete | [API](../../types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) | @@ -60,6 +62,8 @@ order: 48 | checkAllLabel | `string` | `全选` | 全选的文字 | | defaultCheckAll | `boolean` | `false` | 默认是否全选 | | creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) | +| multiple | `boolean` | `false` | [多选](./options#多选-multiple) | +| searchable | `boolean` | `false` | [检索](./options#检索-searchable) | | createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) | | addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) | | addApi | [API](../types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) | diff --git a/docs/start/getting-started.md b/docs/start/getting-started.md index b5790471..7ab57047 100644 --- a/docs/start/getting-started.md +++ b/docs/start/getting-started.md @@ -3,6 +3,15 @@ title: 快速开始 description: --- +amis 有两种使用方法： + +- [npm](#npm) +- [JS SDK](#SDK) + +npm 适合用在 React 项目中，可以完整使用 amis 的所有功能，方便扩展。 + +SDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式难以支持 [自定义组件](./custom)，只能使用 amis 内置的组件。 + ## npm ### 安装 @@ -141,19 +150,21 @@ class MyComponent extends React.Component { }); ``` - 这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的key并不一定必须是 data , 你也可以是其它key，但必须配合schema中的 `detectField` 属性一起使用。 如： - + 这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectField` 属性一起使用。 如： + ```jsx () => - renderAmis({ - //其它配置 - detectField: 'somekey' - }, - { - somekey: { - username: 'amis' + renderAmis( + { + //其它配置 + detectField: 'somekey' + }, + { + somekey: { + username: 'amis' + } } - }); + ); ``` - `env` 环境变量，可以理解为这个渲染器工具的配置项，需要调用者实现部分接口。 @@ -229,71 +240,12 @@ class MyComponent extends React.Component { ## SDK -SDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式不支持 [自定义组件](./custom)，只能使用 amis 内置的组件。 - JSSDK 的代码从以下地址获取： - JS： https://houtai.baidu.com/v2/jssdk - CSS： https://houtai.baidu.com/v2/csssdk -然后在页面中插入下面的代码就能渲染出来了： - -```js -(function () { - var amis = amisRequire('amis/embed'); - amis.embed( - '#container', - { - type: 'page', - title: 'AMIS Demo', - body: 'This is a simple amis page.' - }, - { - // props 一般不用传。 - }, - { - // env - fetcher: () => { - // 可以不传，用来实现 ajax 请求 - }, - - jumpTo: () => { - // 可以不传，用来实现页面跳转 - }, - - updateLocation: () => { - // 可以不传，用来实现地址栏更新 - }, - - isCurrentUrl: () => { - // 可以不传，用来判断是否目标地址当前地址。 - }, - - copy: () => { - // 可以不传，用来实现复制到剪切板 - }, - - notify: () => { - // 可以不传，用来实现通知 - }, - - alert: () => { - // 可以不传，用来实现提示 - }, - - confirm: () => { - // 可以不传，用来实现确认框。 - } - } - ); -})(); -``` - -注意：以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动，如果你的页面已经完成功能回归，请直接使用某个固定地址，这样才不会因为 amis 升级而导致你的页面不可用。 - -另外，sdk 代码也伴随 npm 一起发布了，不使用 CDN 版本，直接替换成 npm 包里面的 `amis/sdk.js` 和 `amis/sdk.css` 即可。 - -完整示例: +以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动，需要将这两个文件下载到本地，分别命名为 sdk.js 和 sdk.css，然后类似如下的方式使用: ```html @@ -336,3 +288,52 @@ JSSDK 的代码从以下地址获取： ``` + +`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在前面也有介绍。 + +```js +amis.embed( + '#root', + { + type: 'page', + title: 'AMIS Demo', + body: 'This is a simple amis page.' + }, + { + // props 一般不用传。 + }, + { + fetcher: (url, method, data, config) => { + // 可以不传，用来实现 ajax 请求 + }, + + jumpTo: (location) => { + // 可以不传，用来实现页面跳转 + }, + + updateLocation: (location, replace) => { + // 可以不传，用来实现地址栏更新 + }, + + isCurrentUrl: (url) => { + // 可以不传，用来判断是否目标地址当前地址。 + }, + + copy: (content) => { + // 可以不传，用来实现复制到剪切板 + }, + + notify: (type, msg) => { + // 可以不传，用来实现通知 + }, + + alert: (content) => { + // 可以不传，用来实现提示 + }, + + confirm: (content) => { + // 可以不传，用来实现确认框。 + } + } +); +``` \ No newline at end of file