组件
FastAdmin默认集成了多个第三方组合，如表单验证、文件上传、下拉列表、时间选择、城市选择、Selectpage，所有的组件都必须使用Form.api.bindevent("form[role=form]")来进行初始化，如果不进行初始化是无法对相应组件进行渲染和事件绑定。
如果我们想单独为元素绑定事件和渲染，我们可以使用如下的代码
| 组件 | 代码 | 介绍 |
|---|---|---|
| 文件上传 | Form.events.plupload($(“form”)); | 渲染并绑定form中的上传组件 |
| 动态下拉列表 | Form.events.selectpage($(“form”)); | 渲染并绑定form中的Selectpage组件 |
| 表单验证 | Form.events.validator($(“form”)); | 渲染并绑定form中的表单验证 |
| 城市选择 | Form.events.citypicker($(“form”)); | 渲染并绑定form中的城市选择组件 |
| 日期时间 | Form.events.datetimepicker($(“form”)); | 渲染并绑定form中的日期时间组件 |
| 下拉列表 | Form.events.selectpicker($(“form”)); | 渲染并绑定form中的Selectpicker组件 |
| 附件选择 | Form.events.faselect($(“form”)); | 渲染并绑定form中的选择附件组件 |
| 键值配置 | Form.events.fieldlist($(“form”)); | 渲染并绑定form中的选择键值配置组件 |
文件上传
FastAdmin支持将文件或图片直传到第三方云存储服务器而不需要通过服务器进行中转
你可以直接在后台插件管理安装第三方云存储的插件后使用，目前支持以下云储存平台：
| 平台 | 特点 | 插件下载 |
|---|---|---|
| 又拍云 | 申请加入联盟可享每月免费15G流量、图片处理 | 下载 |
| 七牛云 | 实名认证后免费10G流量、稳定、图片处理 | 下载 |
| 阿里OSS | 阿里系、稳定、图片处理、支持挂载为分区 | 下载 |
| Ucloud | 每月20G免费流量、图片处理 | 下载 |
在使用第三方云存储功能之前请先注册一个账号并新增一个云储存服务,你可以通过FastAdmin的邀请链接注册，FastAdmin会获得相应平台的CDN流量
又拍云：https://console.upyun.com/register/?invite=SyAt3ehQZ
七牛云：https://portal.qiniu.com/signup?code=3l79xtos9w9qq
阿里云：https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=t50mdbun&utm_source=t50mdbun
FastAdmin的上传功能非常强大，我们只需要简单的配置即可支持单图或多图上传。
<div class="form-group"><label for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label><div class="col-xs-12 col-sm-8"><div class="input-group"><input id="c-avatar" data-rule="" class="form-control" size="50" name="row[avatar]" type="text" value="{$row.avatar}"><div class="input-group-addon no-border no-padding"><span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上传</button></span><span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span></div><span class="msg-box n-right" for="c-avatar"></span></div><ul class="row list-inline plupload-preview" id="p-avatar"></ul></div></div>
我们可以看到这里配置了一个文本框、一个上传按钮、一个选择按钮和一个预览的DIV
| 类型 | 说明 |
|---|---|
| 文本框 | 主要用于接收上传后返回的图片链接，文本框id属性是必选的，这里的id是c-avatar |
| 上传按钮 | 主要用于点击后上传文件，有几个属性非常重要，请参考下方的上传按钮属性介绍 |
| 选择按钮 | 主要用于点击后选择已经上传的文件，有几个属性非常重要，请参考下方的选择按钮属性介绍 |
| 预览区域 | 主要用于预览上传或选择文件后的预览。id属性是改造的，这里的id是p-avatar |
上传按钮支持属性
| 属性 | 示例值 | 说明 |
|---|---|---|
| data-url | ajax/upload | 用于配置上传文件接收的地址 |
| data-multipart | {“key1”:”value1”} | 用于上传时附加额外的参数信息 |
| data-input-id | c-avatar | 用于填充返回URL地址的设文本框 |
| data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 |
| data-multiple | false | 是否支持多图或多文件模式 |
| data-preview-id | p-avatar | 用于预览返回URL地址的DIV |
| data-maxsize | 10M | 用于限制最大可上传的文件大小 |
选择按钮支持属性
| 属性 | 示例值 | 说明 |
|---|---|---|
| data-input-id | c-avatar | 用于填充返回URL地址的设文本框 |
| data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 |
| data-multiple | false | 是否支持多图或多文件模式 |
| data-preview-id | p-avatar | 用于预览返回URL地址的DIV |
如果我们想直接通过JS上传一个文件到我们的服务器，我们可以使用Upload.api.send(file, success, failure, complete)来上传文件。
动态下拉列表
FastAdmin中的动态下拉列表使用的是优秀强大的Selectpage插件来支持，FastAdmin对其进行了二次开发。
下面介绍一个最基础的动态下拉列表示例，如下
<input id="c-name" data-rule="required" data-source="category/selectpage" class="form-control selectpage" name="row[name]" type="text" value="">
其中需要给元素class添加一个selectpage，其次需要增加一个data-source="category/selectpage"这个属性，category/selectpage为我们控制器提交列表的方法
FastAdmin的Selectpage列表中显示字段默认读取的是name字段，如果我们返回的列表中不包含name字段，将无法展现下拉列表数据。此时我们需要添加使用data-field="你要显示的字段"即可。
FastAdmin的Selectpage列表中主键字段默认读取的是id字段，如果我们的主键不是id字段，则我们可以添加并使用data-primary-key="你的主键ID字段"来修改。
Selectpage所支持的扩展属性
| 属性 | 功能 | 示例 |
|---|---|---|
| data-source | 提供数据源的URL地址 | data-source=”category/index” |
| data-field | 列表显示读取的字段 | data-field=”username” |
| data-primary-key | 列表选中后渲染的字段 | data-primary-key=”uid” |
| data-pagination | 是否开启分页 | data-pagination=”true” |
| data-page-size | 分页大小 | data-page-size=”10” |
| data-multiple | 是否支持多选 | data-multiple=”true” |
| data-max-select-limit | 最多可选择数量 | data-max-select-limit=”3” |
| data-order-by | 排序字段 | data-order-by=”id” |
| data-params | 自定义扩展参数 | data-params=’{“custom[type]”:”test”}’ |
| data-select-only | 是否为只读模式 | data-select-only=”true” |
FastAdmin在生成CRUD时会对包含下划线的字段默认生成selectpage模式，比如
user_id将自动生成data-source="user/index"，默认读取的是id和name字段，如果需要修改，请参考上方的修改方法。
更多的使用方法请参考Selectpage官方教程
富文本编辑器
FastAdmin的富文本编辑器只需要给对应的textarea增加一个class为editor即可，FastAdmin在渲染时即会将textarea渲染为富文本编辑器，目前支持summernote、wangeditor和ueditor富文本编辑器，需安装对应的插件即可正常使用。
| 插件 | 特点 | 插件下载 |
|---|---|---|
| Summernote | 操作简单、易用、图片直传第三方存储 | 下载 |
| Wangeditor | 轻量、简洁、易用、图片直传第三方存储 | 下载 |
| Simeditor | 漂亮、简单、功能简单、图片直传第三方存储 | 下载 |
| Umeditor | 百度出品、简单、易用、支持公式、图片直传第三方存储 | 下载 |
| Ueditor | 百度出品、复杂、功能全、图片不能直传第三方存储 | 下载 |
在安装完对应的富文本插件后切记启用、刷新插件缓存并清除浏览器缓存后才生效。
表单验证
FastAdmin的表单验证采用的是Nice-validator验证插件，Nice-validator是一款非常强大的表单验证插件，通过简单在元素上配置规则，即可达到验证的效果。在FastAdmin当中我们只需要给元素添加data-rule="规则"即可开启Nice-validator的验证，常用的规则如下
| 规则 | 描述 | 示例 |
|---|---|---|
| required | 字段必填 | required |
| checked | 必选，只适用于checkbox和radio | checked |
| match(name) | 当前字段值必须和 name 字段的值匹配 | match(‘row[username]’) |
| remote(URL) | 请求服务端验证 | remote(‘validate/check_username_unique’) |
| integer | 整数 | integer |
| range(n~) | 数值范围, 请填写不小于 n 的数 | range(3~) |
| length(n) | 请填写 n 个字符 | length(3) |
| filter | 过滤 <>`”‘ 和字符实体编码的字符 | filter |
| digits | 必须为数字 | digits |
| letters | 必须为字母 | letters |
| date | 必须为日期,yyyy-mm-dd格式 | date |
| time | 必须为时间,hh:ii格式 | time |
| 必须为email格式 | ||
| url | 必须为URL链接 | url |
| 必须为QQ号 | ||
| IDcard | 必须为身份证号码 | IDcard |
| tel | 必须为电话号码 | tel |
| mobile | 必须为手机号码 | mobile |
| zipcode | 必须为邮箱 | zipcode |
| chinese | 必须为中文字符 | chinese |
| username | 必须为3-12位数字、字母、下划线 | username |
| password | 必须为6-16位字符，不能有空格 | password |
更多的使用方法请参考Nice-validator官方教程
城市选择
FastAdmin中集成了强大的city-picker城市选择插件，可以很方便的选择省份和城市。
我们只需要简单的为input元素添加一个data-toggle="city-picker"属性即可自动渲染相应的城市选择组件 。
我们还可以通过添加以下属性来扩展城市选择组件的功能
| 属性 | 描述 | 示例 |
|---|---|---|
| data-level | 选择城市的级别，支持province/city/district，默认为district | data-level=”city” |
| data-simple | 使用简单的地址，比如使用内蒙古替代内蒙古自治区，默认为false | data-simple=”true” |
| data-responsive | 是否为自适应，默认为false | data-responsive=”true” |
| placeholder | 默认提示的文字 | placeholder=”请选择省/市” |
city-picker组件默认选择后渲染的是中文城市信息，我们可以通过在JS中监听city-picker更新后的事件来获取省份城市地区对应的code值。代码如下：
$("#city-picker").on("cp:updated", function() {var citypicker = $(this).data("citypicker");var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");$("#code").val(code);});
如果我们数据库中存放的是地区的code值，在显示时我们则需要把对应的code通过读取数据库转换成我们的地区中文，然后再设定input的value值即可。
更多的使用方法请参考city-picker官方教程
日期时间
在FastAdmin中的日期时间组件采用的是Bootstrap-datetimepicker插件
我们在使用只可以为文本框添加一个class为datetimepicker的值即可自动添加日期时间选择框。
同时我们还可以通过配置以下属性来自定义我们日期选择器的功能
| 属性 | 描述 | 示例 |
|---|---|---|
| data-format | 日期时间的格式，支持Moment.js的格式 | data-format=” YYYY-MM-DD” |
| data-min-date | 最小可选择的日期 | date-min-date=”2011-10-01” |
| data-max-date | 最大可选择的日期 | date-max-date=”2046-10-01” |
| data-use-current | 使用当前的日期时间 | data-use-current=”true” |
| data-default-date | 默认日期 | data-default-date=”2011-10-01” |
| data-disabled-dates | 禁用的日期组 | data-disabled-dates=”[‘2011-10-01’]” |
| data-enabled-dates | 可用的日期组 | data-enabled-dates=”[‘2011-10-01’]” |
| data-use-strict | 使用严格的日期时间,错误日期将被忽略 | data-use-strict=”true” |
| data-side-by-side | 日期时间并排显示 | data-side-by-side=”true” |
更多的使用方法请参考Bootstrap-datetimepicker官方教程
下拉列表
在FastAdmin中集成了Bootstrap-select插件，可以对原有的select元素重新渲染，并增加相应的功能。
我们可以直接给select元素添加一个class为selectpicker的值即可，FastAdmin在检测到以后会自动进行渲染，我们同时可以给select添加以下属性用于配置selectpicker
| 属性 | 介绍 | 添加位置 | 示例 | |
|---|---|---|---|---|
| data-live-search | 是否启用动态搜索 | select | data-live-search=”true” | |
| data-tokens | 添加搜索的关键字 | option | data-tokens=”keyword keyword2” | |
| data-max-options | 最大可选择option的数量 | select\ | optgroup | data-max-options=”2” |
| title | 自定义默认提示语 | select | title=”请选择相应的分类” | |
| title | 自定义选中以后显示的文字 | option | title=”分类1” | |
| data-style | 定义样式 | select | data-style=”btn-primary” |
更多的使用方法请参考：Selectpicker官方教程