功能组件

多语言

在FastAdmin中可以在任何位置(控制器、视图、JS)使用__('语言标识');
调用语言包，如果语言标识不存在，则直接输出该语言标识

使用方法

__('My name is %s', "FastAdmin");

将会返回

My name is FastAdmin

如果需要在HTML视图文件中使用多语言，则需要如下调用

{:__('Home')}

而在PHP和JS中均可以使用

__('Home')

加载方式

在FastAdmin当中，框架会自动按照当前请求的控制器进行加载对应的语言包。例如当前是中文环境，如果请求的是

https://demo.fastadmin.net/admin/dashboard/index

则FastAdmin会自动加载

application/admin/lang/zh-cn.php
application/admin/lang/zh-cn/Dashboard.php

文件上传

我们可以看到这里配置了一个文本框、一个上传按钮、一个选择按钮和一个预览的DIV

<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>

上传按钮支持属性

选择按钮支持属性

上传按钮事件

动态下拉(SelectPage)

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="你要显示的字段"即可，例如data-field="title"

FastAdmin的Selectpage列表中主键字段默认读取的是id字段，如果我们的主键不是id字段，则我们可以添加并使用data-primary-key="你的主键ID字段"来修改,例如data-primary-key="productid"

Selectpage所支持的扩展属性

富文本编辑器

FastAdmin的富文本编辑器只需要给对应的textarea增加一个class为editor即可，FastAdmin在渲染时即会将textarea渲染为富文本编辑器，目前支持summernote、nkeditor和ueditor等富文本编辑器，需安装对应的插件即可正常使用

表单验证

在FastAdmin当中我们只需要给元素添加data-rule="规则"即可开启表单验证，如下

<input id="c-title" class="form-control" data-rule="required;username" name="row[title]" type="text" value="" />

常用的规则如下

如果常用规则不满足开发需求，可以采用自定义规则来实现，如下：

<input id="c-title" class="form-control" data-rule="required;diyname" name="row[title]" type="text" value="" />

然后在JS中定义规则的实现方法，如下：

$.validator.config({
    rules: {
        diyname: function (element) {
            //如果直接返回文本，则表示失败的提示文字
            //如果返回true表示成功
            //如果返回Ajax对象则表示远程验证
            if (element.value.toString().match(/^\d+$/)) {
                return '不能为纯数字';
            }
            if (!element.value.toString().match(/^[a-zA-Z0-9\-_]+$/)) {
                return '请输入字母或数字组合';
            }
            return $.ajax({
                url: 'ajax/check',
                type: 'POST',
                data: {id: $("#c-title").val(), name: element.name, value: element.value},
                dataType: 'json'
            });
        }
    }
});

城市选择

我们只需要简单的为input元素添加一个data-toggle="city-picker"属性即可自动渲染相应的城市选择组件，如下

<div class='control-relative'>
    <input id="c-city" class="form-control" data-toggle="city-picker" name="row[city]" type="text" value="" />
</div>

我们还可以通过添加以下属性来扩展城市选择组件的功能

日期时间

在FastAdmin中的日期时间组件采用的是Bootstrap-datetimepicker插件

我们在使用只可以为文本框添加一个class为datetimepicker的值即可自动添加日期时间选择框

同时我们还可以通过配置以下属性来自定义我们日期选择器的功能

下拉列表

在FastAdmin中集成了Bootstrap-select插件，可以对原有的select元素重新渲染，并增加相应的功能

我们可以直接给select元素添加一个class为selectpicker的值即可，FastAdmin在检测到以后会自动进行渲染

我们同时可以给select添加以下属性用于配置selectpicker

开关组件

使用开关组件只需要给我们的操作按钮添加data-toggle="switcher"即可，如下：

<input  id="c-switch" name="row[switch]" type="hidden" value="0">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0" >
<i class="fa fa-toggle-on text-success {eq name="$row.switch" value="0"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>
</a>

开关提示

从1.2.0版本开始，开关组件支持切换前提示，请尝试给a标签添加一个data-confirm属性即可，如下：

<input  id="c-switch" name="row[switch]" type="hidden" value="0">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0" >
<i class="fa fa-toggle-on text-success {eq name="$row.switch" value="0"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>
</a>

开关事件

如果你需要监听开关切换后的事件，可以在JS中给隐藏的input文本框添加一个change事件，如下：

$(document).on("change", "#c-switch", function(){
    //开关切换后的回调事件
});

日期时间区间

在FastAdmin中的日期时间区间组件采用的是Bootstrap-daterangepicker插件

我们在使用只可以为文本框添加一个class为datetimerange的值即可自动添加日期时间区间选择框

<input type="text" class="form-control datetimerange" placeholder="指定日期" />

<input type="text" class="form-control datetimerange" placeholder="指定日期" value="2021-03-30 00:00:00 - 2021-03-30 23:59:59" />

同时我们还可以通过配置以下属性来自定义我们日期选择器的功能