首页 > 其他分享 >一张图解析FastAdmin中的FormBuilder表单生成器

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

时间：2023-05-18 13:00:28浏览次数：42  
标签：string Form 生成器 FastAdmin FormBuilder array null options name

 

功能描述

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

<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/2018/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>

 

标签：string,Form,生成器,FastAdmin,FormBuilder,array,null,options,name
From： https://www.cnblogs.com/libras/p/17411602.html

相关文章

  • 3:闭包，装饰器，生成器，迭代器
    一:什么是闭包1：必须有一个内部函数2：外部函数返回值内部函数3：内部函数一定要调用外部函数的变量 二：什么是装饰器1：装饰器和闭包的区别闭包传递的是变量，装饰器传递的是函数，可以说装饰器是闭包的一种，它只是传递函数的闭包装饰器本质是一种函数，在原函数上增加新的功能。比......
  • Mybatis-Plus 代码生成器
    mybatis-plus-generator3.5.1以下版本：代码生成器（旧）mybatis-plus-generator3.5.1及其以上版本：代码生成器（新）本地使用mybatis-plus3.5.1版本进行测试。1.引入依赖<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId&......
  • 视觉族: 基于Stable Diffusion的免费AI绘画图片生成器工具
    视觉族是一款基于StableDiffusion文生图模型的免费在线AI绘画图片生成器工具，可以使用提示关键词快速生成精美的艺术图片，支持中文提示。无论你是想要创作自己的原创作品，还是想要为你的文字增添一些视觉效果，视觉族都可以帮助你实现你的想象。网址链接：https://www.shijuezu.com特......
  • 生成器：generator
    列表生成式：[x*xforxinrange(10)][0,1,4,9,16,25,36,49,64,81]所有数据已经生成（数据太多的话占内存） 生成器：generator(x*xforxinrange(10))数据没有生成，有算法（调用next函数，边执行边运算（惰性运算）目的是要最小化计算机要做的工作）>>>g=(x*xforx......
  • Python-6生成器
    1.生成器：本质是一个迭代器，允许自定义逻辑的迭代器。2.生成器和迭代器的区别：①迭代器本身是系统内置的，重写不了  ②生成器是用户自定义，可以重写迭代逻辑3.生成器可以两种方式创建：①生成器表达式（里面推导式，外面圆括号）  ②......
  • bytecode 生成器
    基础objectwebasm很难用，找了几个高级点的。activejcodegen这个库很像.netDLR风格，采用Expression抽象，例如Expressions.add(),Expressions.loop()。我发现它好几年了，这两天真正用的时候发现变量声明都搞不定。查看nashorn的源码，其风格也与此类似，现在nashorn都关闭......
  • CMake的生成器详解
    CMake会通过CMakelist.txt文件，生成适用于不同项目类型的makefile文件，然后makefile文件被不同的编译器使用进行编译，考虑到C/C++的开发环境之多，有非常多的种类的项目开发环境，但是CMake基本上都考虑到了，这里做一个小的汇总。CMake支持下列generator：VisualStudio6:生成VisualSt......
  • C# Random类 伪随机数生成器
     Random类表示伪随机数生成器，它是一种能够产生满足某些随机性统计要求的数字序列的设备，其方法如下表：Random类方法方法说明Next已重载。返回随机数NextBytes用随机数填充指定字节数组的元素NextDouble返回一个介于0.0和1.0之间的随机数Sample返回一个介于......
  • 2023最新版——新手使用mybatis-plus 3.5.2并使用器代码生成器
    最新版——新手使用mybatis-plus3.5.2并使用器代码生成器第一步，pom文件引入依赖主要引入mybatis-plus和代码生成器需要使用的freemaker依赖<dependency> <groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.2</vers......
  • FreeSql.Generator实体类生成器
    一、安装：dotnettoolinstall-gFreeSql.Generator安装前请先安装.netcore3.1以上版本，建议安装vs2019以上版本二、说明FreeSql.Generator--help三、简单使用，可以创建bat文件：FreeSql.Generator-Razor1-NameOptions0,0,0,0-NameSpaceMyProject-DB"PostgreSQL,......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99