FastAdmin中的FormBuilder表单生成器

最新推荐文章于 2024-05-10 09:51:44 发布
最新推荐文章于 2024-05-10 09:51:44 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： FastAdmin 文章标签： thinkphp
原文链接：https://ask.fastadmin.net/article/5567.html
版权

在这里插入图片描述

注意:

在对应的JS方法中添加代码Form.api.bindevent(“form[role=form]”);进行组件初始化
(public/assets/js/backend/xxx.js)

通用属性

$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 = [])

完整代码

 <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Input')}:</label>
        <div class="col-xs-12 col-sm-8">
    		{:Form::text('row[input]', '', ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Password')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-password" data-rule="required" class="form-control" name="row[password]" type="password">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Hidden')}:</label>
        <div class="col-xs-12 col-sm-8">
    		 {:Form::hidden('row[hidden]', '隐藏', ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Email')}:</label>
        <div class="col-xs-12 col-sm-8">
    		 {:Form::email('row[email]', '', ['data-rule'=>['required','email']])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Url')}:</label>
        <div class="col-xs-12 col-sm-8">
             {:Form::url('row[url]', '', ['data-rule'=>['required','url']])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Textarea')}:</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">{:__('Editor')}:</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">{:__('Select')}:</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">{:__('Selects')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selects('row[selects]', ['aa'=>'AA', 'bb'=>'BB','cc'=>'CC'], 'cc', ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Selectpicker')}:</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">{:__('Selectpickers')}:</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">{:__('Selectpage')}:</label>
        <div class="col-xs-12 col-sm-8">
    		 {:Form::selectpage('row[selectpage]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Selectpages')}:</label>
        <div class="col-xs-12 col-sm-8">
    		 {:Form::selectpages('row[selectpages]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Citypicker')}:</label>
        <div class="col-xs-12 col-sm-8">
    		 {:Form::citypicker('row[citypicker]','210102', ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Switcher')}:</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[switcher5]', '1', ['color'=>'danger', 'disabled'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Datepicker')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::datepicker('row[datepicker]',date('Y-m-d'), ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Timepicker')}:</label>
        <div class="col-xs-12 col-sm-8">
    		{:Form::timepicker('row[timepicker]',date('H:i:s'), ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Datetimepicker')}:</label>
        <div class="col-xs-12 col-sm-8">
    		{:Form::datetimepicker('row[datetimepicker]',date('Y-m-d H:i:s'), ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Daterange')}:</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">{:__('Timerange')}:</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">{:__('Datetimerange')}:</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">{:__('Fieldlist')}:</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">{:__('Cxselect')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::cxselect('ajax/category', ['province','city'], ['province'=>'', 'city'=>''])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Selectrange')}:</label>
        <div class="col-xs-12 col-sm-8">
    		{:Form::selectRange('row[selectRange]', 1,8,5,['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Selectyear')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectRange('row[selectRange]', 1900,2090,2000,['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Selectmonth')}:</label>
        <div class="col-xs-12 col-sm-8">
    		{:Form::selectMonth('row[selectRange]',5,['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Checkbox')}:</label>
        <div class="col-xs-12 col-sm-8">
                        
           {:Form::checkbox('row[checkbox]', 'aa',true, ['data-rule'=>'required'])}
    
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Checkboxs')}:</label>
        <div class="col-xs-12 col-sm-8">
             {:Form::checkboxs('row[checkboxs]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Radio')}:</label>
        <div class="col-xs-12 col-sm-8">
                        
            {:Form::radio('row[radio]', 'aa',false, ['data-rule'=>'required'])}
    
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Radios')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::radios('row[radios]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" data-rule="required" class="form-control" size="50" name="row[image]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-image"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Images')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-images" data-rule="required" class="form-control" size="50" name="row[images]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-images" class="btn btn-danger plupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-images"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-images"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Upload')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-upload" data-rule="required" class="form-control" size="50" name="row[upload]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-upload" class="btn btn-danger plupload" data-input-id="c-upload" data-multiple="false" data-preview-id="p-upload"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-upload" class="btn btn-primary fachoose" data-input-id="c-upload" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-upload"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-upload"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Uploads')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-uploads" data-rule="required" class="form-control" size="50" name="row[uploads]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-uploads" class="btn btn-danger plupload" data-input-id="c-uploads" data-multiple="true" data-preview-id="p-uploads"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-uploads" class="btn btn-primary fachoose" data-input-id="c-uploads" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-uploads"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-uploads"></ul>
        </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">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>

附上:
1.图片,文件组件最好是curd生成
2.可以先curd生成,再做如上修改

小阿巳
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-formbuilder:ElementUI 表单生成器
05-30
vue-formbuilder2.0 基本代码是从克隆的，并做了一些改进。 项目设置 npm install 为开发编译和热重载 npm run serve 为生产编译和缩小 npm run build 运行你的测试 npm run test Lints 和修复文件 npm run ...
azlan-form-builder:一个ReactJS表单生成器库
03-30
Azlan表单生成器AFB是一个ReactJS Form Builder插件，可以轻松集成到任何react应用中。 它还支持表单元素的拖放更新。安装使用软件包管理器进行安装。 npm install azlan-form-builder用法import FormBuilder from ...
Request.js 在fastadmin中如何调用的
MLONGKRT的博客
04-11 420
模块化 RequestJs是模块化工具，每一个 js文件 或者库 都可以看成是一个模块，按需引入。 <script data-main="js/main" src="js/require.js"></script> 浏览器加载require.js,而requirejs会自动加载main.js <script src="__CDN__/assets/js/r...
了解fastadmin标准的控制器模块js的表格事件
王世凡的技术博客
08-07 1395
controller/A.php<-------------->public/assets/js/backend/a.js controller/b/A.php<-------------->public/assets/js/backend/b/a.js 标准的控制器模块js <scriptsrc="/assets/js/require.js"data-main="/assets/js/require-backend.js?v=1551685919"></..
Formbuilder.js - 创造性构建Web表单的利器！
最新发布
gitblog_00014的博客
05-10 229
Formbuilder.js - 创造性构建Web表单的利器！ 项目地址:https://gitcode.com/dobtco/formbuilder 项目介绍 Formbuilder.js 是一个强大的前端库，它允许用户无需编程即可构建自定义的Web表单。灵感来源于Wufoo和Google Forms，但设计得更加轻量级，易于集成到您的应用程序中。这个库仅处理创建表单的客户端逻辑，并将表单结构化...
pandas 选择数据 字符串_pandas入门: 数据选择
weixin_39705435的博客
11-21 274
关于pandas数据选择的知识点总结。首先，创建一个dataframedf 创建的dataframe信息如下： A B C 0 3 1.2 aa 1 4 2.4 bb 2 8 4.5 cc 3 9 7.3 dd选择一列df1 = df['A'] # 根据列名选取一列，以Series的形式返回列 df1 = df.A # 与上面写法效果相同结果如下：0 3...
记一次FastAdmin表单分组，表单生成器的使用，隐藏上传文件按钮
qq_40088333的博客
04-03 277
表单分组展示，表单生成器的使用，隐藏上传文件按钮
fastadmin框架，列表输入框输入时，动态下拉（SelectPage）动态赋值
H_hanlinglingzi的博客
08-20 1228
表格列表，动态下拉（selectPage）动态赋值
FormBuilder:表单生成器练习
06-21
表单创建者使用上述文件，在 JavaScript 中创建一个表单构建器，它可以接受一个 JSON 对象，并将为文档生成语义 HTML。
PHP表单生成器，快速生成现代化的form表单
06-03
PHP表单生成器，使用PHP快速生成现代化的form表单，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能
formbuilder表单构建工具_在线表单设计器代码
05-18
formbuilder表单构建工具_在线表单设计器代码formbuilder表单构建工具_在线表单设计器代码
一张图解析FastAdmin中的表格列表的功能
wangmj518的专栏
07-10 1704
大图: 1、默认生成的CRUD是没有菜单名称和描述显示的，如果需要显示则可以在后台修改，权限管理->菜单规则，给对应菜单的添加上备注信息后即可显示，支持HTML 2、TAB过滤选项卡 在一键生成CRUD时，如果表中存在status字段且为ENUM类型，则会生成相应的TAB过滤选项卡，如果需要生成其它字段的过滤选项卡则可以在使用php think crud时使用--hea...
fastadmin的二次开发教程【简单搭建、多表格问题，API开发】
热门推荐
黄啊码
04-24 1万+
fastadmin的二次开发教程【简单搭建、多表格问题，API开发】
如何在fastadmin的html模板中，循环一段自定义表单模板代码？
写写代码
05-01 1051
在FastAdmin的HTML模板中，可以使用模板引擎语法和JavaScript代码来实现自定义表单模板代码的循环。注意，循环生成的代码可能需要与其他JavaScript代码配合使用，例如绑定事件处理程序等，具体根据实际需求决定。以上就是在FastAdmin的HTML模板中循环一段自定义表单模板代码的具体步骤，希望对您有所帮助。在JavaScript代码中，获取自定义表单模板代码，并循环生成表单。最后将循环后的表单代码显示在占位符中。在HTML模板中，定义一个占位符，用来显示循环后的自定义表单模板代码。
fastadmin中的FormBuilder表单生成器
wybchy的博客
05-05 1764
内容等会更新
PHP快速生成现代化form表单，就是好用
weixin_33762130的博客
06-25 1141
form-builder PHP表单生成器，使用PHP快速创建现代化的form表单，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 Github地址 | Composer地址 表单使用form-create js表单生成器生成 如果对您有帮助，您可以点右上角 "Sta...
fastadmin总结
m0_47165403的博客
10-19 5357
html 代码" class="btn btn-success btn-disabled disabled btn-opera " title="" > 一键操作js代码Layer.confirm( __('确定一键操作?//关闭刷新} );});
Html在线表单设计器解析字段,一张图解析FastAdmin中的FormBuilder表单生成器
weixin_39785400的博客
06-02 468
YH8jsJC53PNmCAqN2LRyNQ==如果此文章有帮忙到你，欢迎打赏支持FastAdmintGUwiIKiBiFGfMeWxU73ow==功能描述在使用FastAdmin一键生成CRUD后，默认的生成的都是原生HTML的组件代码，会有许多不熟悉前端的小伙伴改动起来会比较费劲。其实在FastAdmin中有一个简单的FormBuilder，但是它只能生成一些简单的文本框或下拉框，像FastA...
一张图解析FastAdmin中的FormBuilder表单生成器
郝云博客
07-12 1205
功能描述 在使用FastAdmin一键生成CRUD后，默认的生成的都是原生HTML的组件代码，会有许多不熟悉前端的小伙伴改动起来会比较费劲。其实在FastAdmin中有一个简单的FormBuilder，但是它只能生成一些简单的文本框或下拉框，像FastAdmin中常用的动态下拉框、城市选择框、联动框，它就没法实现了。从1.0.1.20180630_beta版本开始，我们可以使用全新的FormBuilder用于生成我们的组件了。 通用属性 $name通常为我们组件的名称，我们在后台接收时可以通过这...
jquery formbuilder
01-30
JQuery FormBuilder是一个用于构建交互式表单的JQuery插件。通过使用JQuery FormBuilder，用户可以很容易地创建各种类型的表单，包括文本框、复选框、下拉菜单等。该插件还具有丰富的功能和选项，可以帮助用户快速自定义表单的外观和行为。 JQuery FormBuilder提供了一个直观的界面，让用户可以通过拖放的方式添加和排列表单元素，而不需要编写繁琐的代码。同时，用户也可以通过配置选项来定义表单的验证规则、默认值、布局样式等。 除此之外，JQuery FormBuilder还支持实时预览功能，用户可以随时查看表单的最终效果。这样可以在创建表单的过程中立即发现并纠正错误，提高了用户的开发效率和体验。 另外，JQuery FormBuilder还提供了丰富的插件和扩展，可以满足用户更多的需求，比如文件上传、日期选择器等功能。 总的来说，JQuery FormBuilder是一个功能强大、易于使用的工具，可以帮助用户轻松创建复杂的交互式表单，并且具有良好的扩展性和定制性。它在web开发中起到了很大的作用，为用户节省了大量的时间和精力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值