Form组件

定义文件位置:

/extend/fast/Formphp

通用参数

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

前端展示:

方法1 php输出:

 //必须namespace fast\Form;
echo Form::text('id',123456789,[]);

form组件列表:

//生成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 = [])

方法2 模板输出:

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

注意:form组件必须要依赖js的Form.api.bindevent("form[role=form]");进行组件初始化,否则部分组件会不生效

所以引用了这些代码的话就必须在相应的js里加上这段代码(它包含了几乎所以的表单事件)

    <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::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 for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-avatar" data-rule="" class="form-control" size="50" name="avatar" type="text" value="img/101010.jpg">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上传</button></span>
<span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
</div>
<span class="msg-box n-right" for="c-avatar"></span>
</div>
<ul class="row list-inline plupload-preview" id="p-avatar"></ul>
</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>

除了上面的表单组件可以快速生成表单元素,还有其他快速生成的方式

如:图片上传:

<div class="form-group">
<label for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-avatar" data-rule="" class="form-control" size="50" name="avatar" type="text" value="img/101010.jpg">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上传</button></span>
<span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
</div>
<span class="msg-box n-right" for="c-avatar"></span>
</div>
<ul class="row list-inline plupload-preview" id="p-avatar"></ul>
</div>
</div>
//无需表单事件?

表单组件 form fastadmin(生成表单元素)的更多相关文章

  1. 表单生成器(Form Builder)之表单数据存储结构mongodb篇

    从这篇笔记开始,记录一下表单生成器(Form Builder)相关的一些东西,网上关于他的介绍有很多,这里就不解释了. 开篇说一下如何存储Form Builder生成的数据.

  2. django 认证模块auth,表单组件form

    django认证系统(auth): 1.首先我们在新窗口中打开一个django项目,之后点击,

  3. Django form表单 组件

    目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...

  4. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  5. vue自定义表单生成器,可根据json参数动态生成表单

    介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...

  6. 表单生成器(Form Builder)之伪造表单数据番外篇——随机车辆牌照

    前几天记录了一下表单生成器(Form Builder)之表单数据存储结构mongodb篇,之后便想着伪造一些数据.为什么要伪造数据呢?说来惭愧,因为拖拉拽设计表单以及表单对应的列表的PC端和移动端该显 ...

  7. 微信小程序组件form

    表单组件form:官方文档 Demo Code: Page({ formSubmit: function(e) { console.log('form发生了submit事件,携带数据为:', e.de ...

  8. form表单组件

    1.sweetalert 组件地址 form组件 form表单完成的事情,:   提供input可以提交数据, 对提交的数据进行校验,提供错误提示 定义form组件 from django impor ...

  9. easyUI之Form(表单)组件

    一.对于在easyui中使用的组件,具有输入.输出功能的使用<input>标签,其它的使用<div>标签. 二.对于<input>标签,在使用过程,将name属性和 ...

随机推荐

  1. 8种效果实例-jQuery anoSlide 焦点图轮播

    anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件. 在线实例 单个 多个 动画延迟 自动播放 显示分页 显示标题 延迟加载 自适应高度 使用方法 <div cl ...

  2. linux 修改ssh端口号

    vi /etc/ssh/sshd_config 找到#Port 22一段,这里是标识默认使用22端口,修改为如下:  代码如下 复制代码 Port 22 Port 50000 然后保存退出 执行/et ...

  3. Qt StyleSheet皮肤(黑色,比较好看,而且很全)

    使用方式如下 //设置皮肤样式 static void SetStyle(const QString &styleName) { QFile file(QString(":/imag ...

  4. DevExpress后置代码中初始化SQL数据源的方法

    //初始化SQL数据源的提供者和连接字符串 函数 OK public virtual void InitSqlDataSource_ConStr(SqlDataSource sql_ds) { Con ...

  5. 二叉搜索树的两种实现(数组模拟,STL)

    书上实现: 二叉搜索数的特点:高效实现 插入一个数值,查询是否包含某个数值,删除某一个数值. 所有的节点都满足左子树上的所有节点都比自己的小,而右子树上的所有节点都比自己大的特点. 查询:如果当前数值 ...

  6. Source Insight 技巧总结

    以下文章转载自网络:http://blog.csdn.net/junjie319/article/details/6910992 http://www.cnblogs.com/bluestorm/ar ...

  7. Centos6.5安装

    前奏:CentOS 6.5下载地址http://mirror.centos.org/centos/6.5/isos/x86_64/CentOS-6.5-x86_64-bin-DVD1to2.torre ...

  8. COJ 0260 HDNOIP201204四个国王

    HDNOIP201204四个国王 难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 在N*M的棋盘上摆国际象棋中的“国王”.如果两 ...

  9. c++11 stl atomic_flag 样例

    Author:DriverMonkey Mail:bookworepeng@Hotmail.com Phone:13410905075 QQ:196568501 測试环境:Win7 64 bit 编译 ...

  10. ***远程连接MYSQL提示1130 - Host is not allowed to connect to this MySQL server

    如果你想连接你的mysql的时候发生这个错误: ERROR 1130: Host '192.168.1.3' is not allowed to connect to this MySQL serve ...