Html在线表单设计器解析字段,一张图解析FastAdmin中的FormBuilder表单生成器

YH8jsJC53PNmCAqN2LRyNQ==

如果此文章有帮忙到你，欢迎打赏支持FastAdmintGUwiIKiBiFGfMeWxU73ow==

功能描述

在使用FastAdmin一键生成CRUD后，默认的生成的都是原生HTML的组件代码，会有许多不熟悉前端的小伙伴改动起来会比较费劲。其实在FastAdmin中有一个简单的FormBuilder，但是它只能生成一些简单的文本框或下拉框，像FastAdmin中常用的动态下拉框、城市选择框、联动框，它就没法实现了。从1.0.1.20180630_beta版本开始，我们可以使用全新的FormBuilder用于生成我们的组件了。blkTjOE4Qtx5M388mVU2tA==千万别忘记在对应的JS方法中添加代码Form.api.bindevent("form[role=form]");进行组件初始化，否则部分组件会不生效。

通用属性$name 通常为我们组件的名称，我们在后台接收时可以通过这个名称来获取到它所对应的值

$value 通常为我们数据库中的值，在新增的时候通常为空，在修改的时候通常需要是数据库中对应字段的值

$options 组件的扩展属性，通常为一一键值匹配并最终渲染在组件的属性中，通常我们使用的有data-rule/disabled/readonly/multiple等等，也常用于自定义组件属性。

支持组件//生成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所支持的所有组件调用示例，你可以复制你所需要的组件到你的表单中，然后按需要修改名称或值即可IJm/CnlnCO8hLDJJT9WVhA==

{:__('文本框')}:

{:Form::text('row[text]', '', ['data-rule'=>'required'])}

{:__('多行文本框')}:

{:Form::textarea('row[textarea]', '', ['data-rule'=>'required'])}

{:__('富文本编辑器')}:

{:Form::editor('row[editor]', '', ['data-rule'=>'required'])}

{:__('单选')}:

{:Form::radios('row[radio]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

{:__('复选')}:

{:Form::checkboxs('row[checkbox]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

{:__('下拉列表')}:

{:Form::select('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

{:__('下拉列表(多选)')}:

{:Form::selects('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

{:__('下拉列表(友好)')}:

{:Form::selectpicker('row[selectpicker]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

{:__('下拉列表(友好)(多选)')}:

{:Form::selectpickers('row[selectpickers]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

{:__('动态下拉列表')}:

{:Form::selectpage('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}

{:__('动态下拉列表(多选)')}:

{:Form::selectpages('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}

{:__('城市选择框')}:

{:Form::citypicker('row[citypicker]', 2, ['data-rule'=>'required'])}

{:__('日期')}:

{:Form::datepicker('row[datepicker]', '', ['data-rule'=>'required'])}

{:__('时间')}:

{:Form::timepicker('row[timepicker]', '', ['data-rule'=>'required'])}

{:__('日期时间')}:

{:Form::datetimepicker('row[timepicker]', '', ['data-rule'=>'required'])}

{:__('日期区间')}:

{:Form::daterange('row[daterange]', '', ['data-rule'=>'required'])}

{:__('时间区间')}:

{:Form::timerange('row[timerange]', '', ['data-rule'=>'required'])}

{:__('日期时间区间')}:

{:Form::datetimerange('row[datetimerange]', '', ['data-rule'=>'required'])}

{:__('动态字段列表')}:

{:Form::fieldlist('row[fieldlist]', ['aa'=>'AA', 'bb'=>'BB'], null, '', ['data-rule'=>'required'])}

{:__('单图')}:

{:Form::image('row[image]', '/uploads/20180629/b83227ea668e7b2d61def9812bbce3da.png', ['data-rule'=>'required'])}

{:__('多图')}:

{:Form::images('row[images]', '', ['data-rule'=>'required'])}

{:__('单文件')}:

{:Form::upload('row[upload]', '', ['data-rule'=>'required'])}

{:__('多文件')}:

{:Form::uploads('row[uploads]', '', ['data-rule'=>'required'])}

{:__('开关')}:

{:Form::switcher('row[switcher1]', '0', ['color'=>'success'])}

{:Form::switcher('row[switcher2]', '1', ['color'=>'yellow', 'disabled'=>true])}

{:Form::switcher('row[switcher3]', 'Y', ['color'=>'navy', 'yes'=>'Y', 'no'=>'N'])}

{:Form::switcher('row[switcher4]', '1', ['color'=>'info'])}

{:Form::switcher('row[switcher4]', '1', ['color'=>'danger', 'disabled'])}

{:__('联动选择')}:

{:Form::cxselect('ajax/area', ['province','city'], ['province'=>37, 'city'=>38])}

{:__('Submit')}

{:__('Reset')}