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

功能描述

在使用FastAdmin一键生成CRUD后，默认的生成的都是原生HTML的组件代码，会有许多不熟悉前端的小伙伴改动起来会比较费劲。其实在FastAdmin中有一个简单的FormBuilder，但是它只能生成一些简单的文本框或下拉框，像FastAdmin中常用的动态下拉框、城市选择框、联动框，它就没法实现了。从1.0.1.20180630_beta版本开始，我们可以使用全新的FormBuilder用于生成我们的组件了。

通用属性

$name 通常为我们组件的名称，我们在后台接收时可以通过这个名称来获取到它所对应的值
$value 通常为我们数据库中的值，在新增的时候通常为空，在修改的时候通常需要是数据库中对应字段的值
$options 组件的扩展属性，通常为一一键值匹配并最终渲染在组件的属性中，通常我们使用的有data-rule/disabled/readonly/multiple等等，也常用于自定义组件属性。

完整代码复制粘贴即可

<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"><label class="control-label col-xs-12 col-sm-2">{:__('单选')}:</label><div class="col-xs-12 col-sm-8">{:Form::radios('row[radio]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['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::checkboxs('row[checkbox]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['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::select('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['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::selects('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['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::selectpicker('row[selectpicker]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['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::selectpickers('row[selectpickers]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['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::selectpage('row[select]', 2, 'category/selectpage', null, null, ['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::selectpages('row[select]', 2, 'category/selectpage', null, null, ['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::citypicker('row[citypicker]', 2, ['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::datepicker('row[datepicker]', '', ['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::timepicker('row[timepicker]', '', ['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::datetimepicker('row[timepicker]', '', ['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::daterange('row[daterange]', '', ['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::timerange('row[timerange]', '', ['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::datetimerange('row[datetimerange]', '', ['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::fieldlist('row[fieldlist]', ['aa'=>'AA', 'bb'=>'BB'], null, '', ['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::image('row[image]', '/uploads/20180629/b83227ea668e7b2d61def9812bbce3da.png', ['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::images('row[images]', '', ['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::upload('row[upload]', '', ['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::uploads('row[uploads]', '', ['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::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'])}</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::cxselect('ajax/area', ['province','city'], ['province'=>37, 'city'=>38])}</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">{:__('Submit')}</button><button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button></div></div>
</form>

一张图解析FastAdmin中的FormBuilder表单生成器相关推荐

button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题
解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...
php表单完整代码,php中一个完整表单处理实现代码_PHP教程
一个完整表单处理下面我们将创建一个复杂的表单,代码如下所示. 复制代码代码如下: 姓名: 密码: 年龄: 小于16 16-30 31-50 51-80 自我介绍: 请输入您的自我介绍体育爱好: ...
HTML中的form表单有一个关键属性 enctype
HTML中的form表单有一个关键属性 enctype＝application/x-www-form-urlencoded 或multipart/form-data. 1.enctype=" ...
项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
html表单居中_如何在IE低版本中兼容HTML5表单属性placeholder属性
WEB开发数据提交是必不可少的,为了更友好的用户体验,通常需要给输入框一个默认的提示信息.HTML5技术提供了一个表单属性placeholder专门用于输入框默认提示,但是在IE低版本中根本不兼容. ...
html语言怎么清除用户名 name= password=,在html页面中填写注册表单后，它会给出这个错误，并使用用户名和密码并将值存储在登录表单中...
在html页面中填写注册表单后,它会给出此错误,并使用用户名和密码并将值存储在登录表单中:TypeError at /login/ argument of type 'NoneType' is not ...
Magento教程 13：在Magento中设定联络表单的收件信箱
Magento系统有预设的联络表单功能,位置是在您网站的网址/contacts Magento教程 13:在Magento中设定联络表单的收件信箱如画面所见,提供简单的栏位让顾客可以透过表单寄送电子 ...
react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...

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

功能描述

通用属性

完整代码复制粘贴即可

一张图解析FastAdmin中的FormBuilder表单生成器相关推荐

最新文章

热门文章