功能描述
在使用FastAdmin一键生成CRUD后，默认的生成的都是原生HTML的组件代码，会有许多不熟悉前端的小伙伴改动起来会比较费劲。其实在FastAdmin中有一个简单的FormBuilder，但是它只能生成一些简单的文本框或下拉框，像FastAdmin中常用的动态下拉框、城市选择框、联动框，它就没法实现了。从1.0.1.20180630_beta版本开始，我们可以使用全新的FormBuilder用于生成我们的组件了。
千万别忘记在对应的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所支持的所有组件调用示例，你可以复制你所需要的组件到你的表单中，然后按需要修改名称或值即可
1 <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""> 2 <div class="form-group"> 3 <label class="control-label col-xs-12 col-sm-2">{:__('文本框')}:</label> 4 <div class="col-xs-12 col-sm-8"> 5 {:Form::text('row[text]', '', ['data-rule'=>'required'])} 6 </div> 7 </div> 8 9 <div class="form-group"> 10 <label class="control-label col-xs-12 col-sm-2">{:__('多行文本框')}:</label> 11 <div class="col-xs-12 col-sm-8"> 12 {:Form::textarea('row[textarea]', '', ['data-rule'=>'required'])} 13 </div> 14 </div> 15 16 <div class="form-group"> 17 <label class="control-label col-xs-12 col-sm-2">{:__('富文本编辑器')}:</label> 18 <div class="col-xs-12 col-sm-8"> 19 {:Form::editor('row[editor]', '', ['data-rule'=>'required'])} 20 </div> 21 </div> 22 23 <div class="form-group"> 24 <label class="control-label col-xs-12 col-sm-2">{:__('单选')}:</label> 25 <div class="col-xs-12 col-sm-8"> 26 {:Form::radios('row[radio]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])} 27 </div> 28 </div> 29 30 <div class="form-group"> 31 <label class="control-label col-xs-12 col-sm-2">{:__('复选')}:</label> 32 <div class="col-xs-12 col-sm-8"> 33 {:Form::checkboxs('row[checkbox]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])} 34 </div> 35 </div> 36 37 <div class="form-group"> 38 <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表')}:</label> 39 <div class="col-xs-12 col-sm-8"> 40 {:Form::select('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])} 41 </div> 42 </div> 43 44 <div class="form-group"> 45 <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(多选)')}:</label> 46 <div class="col-xs-12 col-sm-8"> 47 {:Form::selects('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])} 48 </div> 49 </div> 50 51 <div class="form-group"> 52 <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(友好)')}:</label> 53 <div class="col-xs-12 col-sm-8"> 54 {:Form::selectpicker('row[selectpicker]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])} 55 </div> 56 </div> 57 58 <div class="form-group"> 59 <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(友好)(多选)')}:</label> 60 <div class="col-xs-12 col-sm-8"> 61 {:Form::selectpickers('row[selectpickers]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])} 62 </div> 63 </div> 64 65 <div class="form-group"> 66 <label class="control-label col-xs-12 col-sm-2">{:__('动态下拉列表')}:</label> 67 <div class="col-xs-12 col-sm-8"> 68 {:Form::selectpage('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])} 69 </div> 70 </div> 71 72 <div class="form-group"> 73 <label class="control-label col-xs-12 col-sm-2">{:__('动态下拉列表(多选)')}:</label> 74 <div class="col-xs-12 col-sm-8"> 75 {:Form::selectpages('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])} 76 </div> 77 </div> 78 79 <div class="form-group"> 80 <label class="control-label col-xs-12 col-sm-2">{:__('城市选择框')}:</label> 81 <div class="col-xs-12 col-sm-8"> 82 {:Form::citypicker('row[citypicker]', 2, ['data-rule'=>'required'])} 83 </div> 84 </div> 85 86 <div class="form-group"> 87 <label class="control-label col-xs-12 col-sm-2">{:__('日期')}:</label> 88 <div class="col-xs-12 col-sm-8"> 89 {:Form::datepicker('row[datepicker]', '', ['data-rule'=>'required'])} 90 </div> 91 </div> 92 93 <div class="form-group"> 94 <label class="control-label col-xs-12 col-sm-2">{:__('时间')}:</label> 95 <div class="col-xs-12 col-sm-8"> 96 {:Form::timepicker('row[timepicker]', '', ['data-rule'=>'required'])} 97 </div> 98 </div> 99 100 <div class="form-group"> 101 <label class="control-label col-xs-12 col-sm-2">{:__('日期时间')}:</label> 102 <div class="col-xs-12 col-sm-8"> 103 {:Form::datetimepicker('row[timepicker]', '', ['data-rule'=>'required'])} 104 </div> 105 </div> 106 107 <div class="form-group"> 108 <label class="control-label col-xs-12 col-sm-2">{:__('日期区间')}:</label> 109 <div class="col-xs-12 col-sm-8"> 110 {:Form::daterange('row[daterange]', '', ['data-rule'=>'required'])} 111 </div> 112 </div> 113 114 <div class="form-group"> 115 <label class="control-label col-xs-12 col-sm-2">{:__('时间区间')}:</label> 116 <div class="col-xs-12 col-sm-8"> 117 {:Form::timerange('row[timerange]', '', ['data-rule'=>'required'])} 118 </div> 119 </div> 120 121 <div class="form-group"> 122 <label class="control-label col-xs-12 col-sm-2">{:__('日期时间区间')}:</label> 123 <div class="col-xs-12 col-sm-8"> 124 {:Form::datetimerange('row[datetimerange]', '', ['data-rule'=>'required'])} 125 </div> 126 </div> 127 128 <div class="form-group"> 129 <label class="control-label col-xs-12 col-sm-2">{:__('动态字段列表')}:</label> 130 <div class="col-xs-12 col-sm-8"> 131 {:Form::fieldlist('row[fieldlist]', ['aa'=>'AA', 'bb'=>'BB'], null, '', ['data-rule'=>'required'])} 132 </div> 133 </div> 134 135 <div class="form-group"> 136 <label class="control-label col-xs-12 col-sm-2">{:__('单图')}:</label> 137 <div class="col-xs-12 col-sm-8"> 138 {:Form::image('row[image]', '/uploads/20180629/b83227ea668e7b2d61def9812bbce3da.png', ['data-rule'=>'required'])} 139 </div> 140 </div> 141 142 <div class="form-group"> 143 <label class="control-label col-xs-12 col-sm-2">{:__('多图')}:</label> 144 <div class="col-xs-12 col-sm-8"> 145 {:Form::images('row[images]', '', ['data-rule'=>'required'])} 146 </div> 147 </div> 148 149 <div class="form-group"> 150 <label class="control-label col-xs-12 col-sm-2">{:__('单文件')}:</label> 151 <div class="col-xs-12 col-sm-8"> 152 {:Form::upload('row[upload]', '', ['data-rule'=>'required'])} 153 </div> 154 </div> 155 156 <div class="form-group"> 157 <label class="control-label col-xs-12 col-sm-2">{:__('多文件')}:</label> 158 <div class="col-xs-12 col-sm-8"> 159 {:Form::uploads('row[uploads]', '', ['data-rule'=>'required'])} 160 </div> 161 </div> 162 163 <div class="form-group"> 164 <label class="control-label col-xs-12 col-sm-2">{:__('开关')}:</label> 165 <div class="col-xs-12 col-sm-8"> 166 {:Form::switcher('row[switcher1]', '0', ['color'=>'success'])} 167 {:Form::switcher('row[switcher2]', '1', ['color'=>'yellow', 'disabled'=>true])} 168 {:Form::switcher('row[switcher3]', 'Y', ['color'=>'navy', 'yes'=>'Y', 'no'=>'N'])} 169 {:Form::switcher('row[switcher4]', '1', ['color'=>'info'])} 170 {:Form::switcher('row[switcher4]', '1', ['color'=>'danger', 'disabled'])} 171 </div> 172 </div> 173 174 <div class="form-group"> 175 <label class="control-label col-xs-12 col-sm-2">{:__('联动选择')}:</label> 176 <div class="col-xs-12 col-sm-8"> 177 {:Form::cxselect('ajax/area', ['province','city'], ['province'=>37, 'city'=>38])} 178 </div> 179 </div> 180 181 <div class="form-group layer-footer"> 182 <label class="control-label col-xs-12 col-sm-2"></label> 183 <div class="col-xs-12 col-sm-8"> 184 <button type="submit" class="btn btn-success btn-embossed disabled">{:__('Submit')}</button> 185 <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button> 186 </div> 187 </div> 188 </form>