一张图解析 FastAdmin 中的 FormBuilder 表单生成器

功能描述

在使用 FastAdmin 一键生成 CRUD 后，默认生成的组件代码通常为原生 HTML，这对不熟悉前端的小伙伴来说，修改起来可能较为费劲。事实上，FastAdmin 提供了一个简化的 FormBuilder，虽然它可以生成一些基本的文本框或下拉框，但对于像动态下拉框、城市选择框、联动框等复杂组件则力不从心。从版本 1.0.1.20180630_beta 开始，FastAdmin 引入了全新的 FormBuilder，使得生成这些高级组件变得更加简便。

注意： 请务必在对应的 JS 方法中添加 Form.api.bindevent("form[role=form]"); 来进行组件初始化，否则部分组件可能无法正常工作。

通用属性

• $name：通常为组件的名称，用于后台接收并获取对应的值。
• $value：通常为数据库中的值，新建时通常为空，修改时为数据库中对应字段的值。
• $options：组件的扩展属性，通常为键值对，最终渲染在组件的属性中，例如 data-rule、disabled、readonly、multiple 等，也可以用于自定义组件属性。

支持的组件

以下是 FormBuilder 支持的组件及其调用示例：

// 生成Token
Form::token()

// Label标签
Form::label(string $name, string $value = null, array $options = [])

// 按类型生成文本框
Form::input($type, $name, string $value = null, array $options = [])

// 普通文本框 
Form::text(string $name, string $value = null, array $options = [])

// 密码文本框
Form::password(string $name, array $options = [])

// 隐藏文本框
Form::hidden(string $name, string $value = null, array $options = [])

// Email文本框 
Form::email(string $name, string $value = null, array $options = [])

// URL文本框
Form::url(string $name, string $value = null, array $options = [])

// 文件组件
Form::file(string $name, array $options = [])

// 多行文本框
Form::textarea(string $name, string $value = null, array $options = [])

// 富文本编辑器
Form::editor(string $name, string $value = null, array $options = [])

// 下拉列表组件
Form::select(string $name, array $list = [], string $selected = null, array $options = [])

// 下拉列表组件(多选)
Form::selects(string $name, array $list = [], string $selected = null, array $options = [])

// 下拉列表组件(友好)
Form::selectpicker(string $name, array $list = [], string $selected = null, array $options = [])

// 下拉列表组件(友好)(多选)
Form::selectpickers(string $name, array $list = [], string $selected = null, array $options = [])

// 动态下拉列表组件
Form::selectpage(string $name, string $value, string $url, string $field = null, string $primaryKey = null, array $options = [])

// 动态下拉列表组件(多选)
Form::selectpages(string $name, string $value, string $url, string $field = null, string $primaryKey = null, array $options = [])

// 城市选择组件
Form::citypicker(string $name, string $value, array $options = [])

// 开关组件
Form::switcher(string $name, string $value, array $options = [])

// 日期选择组件
Form::datepicker(string $name, string $value, array $options = [])

// 时间选择组件
Form::timepicker(string $name, string $value, array $options = [])

// 日期时间选择组件
Form::datetimepicker(string $name, string $value, array $options = [])

// 日期区间组件
Form::daterange(string $name, string $value, array $options = [])

// 时间区间组件
Form::timerange(string $name, string $value, array $options = [])

// 日期时间区间组件
Form::datetimerange(string $name, string $value, array $options = [])

// 字段列表组件
Form::fieldlist(string $name, string $value, string $title = null, string $template = null, array $options = [])

// 联动组件
Form::cxselect(string $url, array $names = [], array $values = [], array $options = [])

// 选择数字区间
Form::selectRange(string $name, string $begin, string $end, string $selected = null, array $options = [])

// 选择年
Form::selectYear(string $name, string $begin, string $end, string $selected = null, array $options = [])

// 选择月
Form::selectMonth(string $name, string $selected = null, array $options = [], string $format = '%m')

// 单个复选框
Form::checkbox(string $name, string $value = '1', string $checked = null, array $options = [])

// 一组复选框
Form::checkboxs(string $name, array $list = [], string $checked = null, array $options = [])

// 单个单选框
Form::radio(string $name, string $value = null, string $checked = null, array $options = [])

// 一组单选框
Form::radios(string $name, array $list = [], string $checked = null, array $options = [])

// 上传图片组件
Form::image(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = [])

// 上传图片组件(多图)
Form::images(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = [])

// 上传文件组件
Form::upload(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = [])

// 上传文件组件(多文件)
Form::uploads(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = [])

// 表单button
Form::button(string $value = null, array $options = [])

完整示例

以下是使用 FormBuilder 支持的组件的表单示例，你可以根据需要复制并调整组件：

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">文本框:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::text('row[text]', '', ['data-rule'=>'required'])}
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">多行文本框:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::textarea('row[textarea]', '', ['data-rule'=>'required'])}
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">富文本编辑器:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::editor('row[editor]', '', ['data-rule'=>'required'])}
        </div>
    </div>

    <!-- 其他组件示例... -->

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">提交</button>
            <button type="reset" class="btn btn-default btn-embossed">重置</button>
        </div>
    </div>
</form>

通过使用 FastAdmin 的 FormBuilder，你可以更高效地创建各种类型的表单组件，并且根据实际需求进行灵活配置。希望本文能帮助你快速掌握 FormBuilder 的使用，提升开发效率。