Kirin c2e0541d56 tijiao | před 2 roky | |
---|---|---|
.. | ||
images | před 2 roky | |
src | před 2 roky | |
LICENSE | před 2 roky | |
README.md | před 2 roky | |
composer.json | před 2 roky |
PHP表单生成器,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、树型、文件/图片上传等功能。
1.2.4 版本支持字段验证
计划对该项目重构和升级,期待的话就点个 star 吧
如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! 本项目还在不断开发完善中,如有建议或问题请在这里提出
演示地址: http://demo25.crmeb.net 账号:demo 密码:crmeb.com
composer require xaboy/form-builder
$form = Form::create(Url::build('update',array('id'=>$id)),[
Form::input('menu_name','按钮名称',$menu['menu_name']),
Form::select('pid','父级id',(string)$menu->getData('pid'))->setOptions(function()use($id){
$list = (sort_list_tier((MenusModel::where('id','<>',$id)->select()->toArray(),'顶级','pid','menu_name'));
$menus = [['value'=>0,'label'=>'顶级按钮']];
foreach ($list as $menu){
$menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['menu_name']];
}
return $menus;
})->filterable(1),
Form::select('module','模块名',$menu['module'])->options([['label'=>'总后台','value'=>'admin'],['label'=>'总后台1','value'=>'admin1']]),
Form::input('controller','控制器名',$menu['controller']),
Form::input('action','方法名',$menu['action']),
Form::input('params','参数',MenusModel::paramStr($menu['params']))->placeholder('举例:a/123/b/234'),
Form::frameInputOne('icon','图标',Url::build('admin/widget.widgets/icon',array('fodder'=>'icon')),$menu['icon'])->icon('ionic'),
Form::number('sort','排序',$menu['sort']),
Form::radio('is_show','是否菜单',$menu['is_show'])->options([['value'=>0,'label'=>'隐藏'],['value'=>1,'label'=>'显示(菜单只显示三级)']])
]);
$form->setMethod('post')->setTitle('编辑权限');
$this->assign(compact('form'));
return $this->fetch('public/form-builder');
$field = [
Form::select('cate_id','产品分类')->setOptions(function(){
$list = CategoryModel::getTierList();
foreach ($list as $menu){
$menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['cate_name'],'disabled'=>$menu['pid']== 0];//,'disabled'=>$menu['pid']== 0];
}
return $menus;
})->filterable(1)->multiple(1),
Form::input('store_name','产品名称')->col(Form::col(8)),
Form::input('store_info','产品简介')->type('textarea'),
Form::input('keyword','产品关键字')->placeholder('多个用英文状态下的逗号隔开'),
Form::input('unit_name','产品单位','件'),
Form::frameImageOne('image','产品主图片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')))->icon('image')->width('100%')->height('550px'),
Form::frameImages('slider_image','产品轮播图(640*640px)',Url::build('admin/widget.images/index',array('fodder'=>'slider_image')))->maxLength(5)->icon('images')->width('100%')->height('550px')->spin(0),
Form::number('price','产品售价')->min(0)->col(8),
Form::number('ot_price','产品市场价')->min(0)->col(8),
Form::number('give_integral','赠送积分')->min(0)->precision(0)->col(8),
Form::number('postage','邮费')->min(0)->col(Form::col(8)),
Form::number('sales','销量')->min(0)->precision(0)->col(8),
Form::number('ficti','虚拟销量')->min(0)->precision(0)->col(8),
Form::number('stock','库存')->min(0)->precision(0)->col(8),
Form::number('cost','产品成本价')->min(0)->col(8),
Form::number('sort','排序')->col(8),
Form::radio('is_show','产品状态',0)->options([['label'=>'上架','value'=>1],['label'=>'下架','value'=>0]])->col(8),
Form::radio('is_hot','热卖单品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_benefit','促销单品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_best','精品推荐',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_new','首发新品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_postage','是否包邮',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8)
];
$form = Form::create(Url::build('save'));
$form->setMethod('post')->setTitle('添加产品')->components($field);
$this->assign(compact('form'));
return $this->fetch('public/form-builder');
$product = ProductModel::get($id);
$form = Form::create(Url::build('update',array('id'=>$id)),[
Form::select('cate_id','产品分类',explode(',',$product->getData('cate_id')))->setOptions(function(){
$list = CategoryModel::getTierList();
foreach ($list as $menu){
$menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['cate_name'],'disabled'=>$menu['pid']== 0];//,'disabled'=>$menu['pid']== 0];
}
return $menus;
})->filterable(1)->multiple(1),
Form::input('store_name','产品名称',$product->getData('store_name')),
Form::input('store_info','产品简介',$product->getData('store_info'))->type('textarea'),
Form::input('keyword','产品关键字',$product->getData('keyword'))->placeholder('多个用英文状态下的逗号隔开'),
Form::input('unit_name','产品单位',$product->getData('unit_name')),
Form::frameImageOne('image','产品主图片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')),$product->getData('image'))->icon('image')->width('100%')->height('550px'),
Form::frameImages('slider_image','产品轮播图(640*640px)',Url::build('admin/widget.images/index',array('fodder'=>'slider_image')),json_decode($product->getData('slider_image'),1))->maxLength(5)->icon('images'),
Form::number('price','产品售价',$product->getData('price'))->min(0)->precision(2)->col(8),
Form::number('ot_price','产品市场价',$product->getData('ot_price'))->min(0)->col(8),
Form::number('give_integral','赠送积分',$product->getData('give_integral'))->min(0)->precision(0)->col(8),
Form::number('postage','邮费',$product->getData('postage'))->min(0)->col(8),
Form::number('sales','销量',$product->getData('sales'))->min(0)->precision(0)->col(8),
Form::number('ficti','虚拟销量',$product->getData('ficti'))->min(0)->precision(0)->col(8),
Form::number('stock','库存',ProductModel::getStock($id)>0?ProductModel::getStock($id):$product->getData('stock'))->min(0)->precision(0)->col(8),
Form::number('cost','产品成本价',$product->getData('cost'))->min(0)->col(8),
Form::number('sort','排序',$product->getData('sort'))->col(8),
Form::radio('is_show','产品状态',$product->getData('is_show'))->options([['label'=>'上架','value'=>1],['label'=>'下架','value'=>0]])->col(8),
Form::radio('is_hot','热卖单品',$product->getData('is_hot'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_benefit','促销单品',$product->getData('is_benefit'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_best','精品推荐',$product->getData('is_best'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_new','首发新品',$product->getData('is_new'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_postage','是否包邮',$product->getData('is_postage'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8)
]);
$form->setMethod('post')->setTitle('编辑产品');
$this->assign(compact('form'));
return $this->fetch('public/form-builder');
当form提交成功后会调用window.formCreate.formSuccess(res,$f,formData)
作为回调方法
namespace Test;
use FormBuilder\Form;
//input组件
$input = Form::input('goods_name','商品名称');
//日期区间选择组件
$dateRange = Form::dateRange(
'limit_time',
'区间日期',
strtotime('- 10 day'),
time()
);
//省市二级联动组件
$cityArea = Form::city('address','收货地址',[
'陕西省','西安市'
]);
$checkbox = Form::checkbox('label','表单',[])->options([
['value'=>'1','label'=>'好用','disabled'=>true],
['value'=>'2','label'=>'方便','disabled'=>true]
])->col(Form::col(12));
$tree = Form::treeChecked('tree','权限',[])->data([
Form::treeData(11,'leaf 1-1-1')->children([Form::treeData(13,'131313'),Form::treeData(14,'141414')]),
Form::treeData(12,'leaf 1-1-2')
])->col(Form::col(12)->xs(12));
//创建form
$form = Form::create('/save.php',[
$input,$dateRange,$cityArea,$checkbox,$tree
]);
$html = $form->formRow(Form::row(10))->setMethod('get')->setTitle('编辑商品')->view();
//输出form页面
echo $html;
namespace \FormBuilder\Json
namespace \FormBuilder\Form
create
,执行create(el,callback)
即可生成表单Form::style ```php
@method $this autocomplete($bool = false) 原生的 autocomplete 属性,可选值为 true = off 或 false = on
## Row栅格规则
* **Form::row**
```php
* @method $this gutter(Number $gutter) 栅格间距,单位 px,左右平分
* @method $this type(String $type) 栅格的顺序,在flex布局模式下有效
* @method $this align(String $align) flex 布局下的垂直对齐方式,可选值为top、middle、bottom
* @method $this justify(String $justify) flex 布局下的水平排列方式,可选值为start、end、center、space-around、space-between
* @method $this className(String $className) 自定义的class名称
参考: view row栅格布局
Form::col ```php
@method $this lg(Number|Col $span) ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象
参考: [view col栅格布局](http://v2.iviewui.com/components/grid#API)
## select,checkbox,radio组件配置options专用方法
* **option($value, $label, $disabled = false)** 单独设置选项
* **options(array $options, $disabled = false)** 批量设置选项
* **setOptions($options, $disabled = false)** 批量设置选项 支持匿名函数
## 以下组件公共方法
* **col($span)** 配置col栅格规则,传入0-24的数字或`Col`类,默认为24
* **value($value)** 设置组件的值
* **validateAs(array $validate)** 添加验证规则
* **validate()** 设置验证规则[规则说明](https://github.com/xaboy/form-builder/blob/master/src/components/Validate.php)
## 组件
`namespace \FormBuilder\Form`
#### 多级联动组件
* **Form::cascader** 多级联动组件,value为array类型
* **Form::city** 省市二级联动,value为array类型
* **Form::cityArea** 省市区三级联动,value为array类型
```php
方法 返回值 方法名(参数) 注释
* @method $this type(String $type) 数据类型, 支持 city_area(省市区三级联动), city (省市二级联动), other (自定义)
* @method $this disabled(Boolean $bool) 是否禁用选择器
* @method $this clearable(Boolean $bool) 是否支持清除
* @method $this placeholder(String $placeholder) 占位文本
* @method $this trigger(String $trigger) 次级菜单展开方式,可选值为 click 或 hover
* @method $this changeOnSelect(Boolean $bool) 当此项为 true 时,点选每级菜单选项值都会发生变化, 默认为 false
* @method $this size(String $size) 输入框大小,可选值为large和small或者不填
* @method $this filterable(Boolean $bool) 是否支持搜索
* @method $this notFoundText(String $text) 当搜索列表为空时显示的内容
* @method $this transfer(Boolean $bool) /是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果
* @method $this required($message = null, $trigger = 'change') 设为必选
* @method $this data(array $data) 设置多级联动可选项的数据
* 例如: {
* "value":"北京市", "label":"北京市", "children":[{
* "value":"东城区", "label":"东城区"
* }]
* }
* @method $this jsData($var) 设置data为js变量
* @method string getType($var) 获取组件类型
Form::checkbox ```php
@method $this required($message = null, $trigger = 'change') 设为必选
#### 颜色选择组件
* **Form::color**
```php
* @method $this disabled(Boolean $bool) 是否禁用
* @method $this alpha(Boolean $bool) 是否支持透明度选择, 默认为false
* @method $this hue(Boolean $bool) 是否支持色彩选择, 默认为true
* @method $this recommend(Boolean $bool) 是否显示推荐的颜色预设, 默认为false
* @method $this size(String $size) 尺寸,可选值为large、small、default或者不设置
* @method $this format(String $format) 颜色的格式,可选值为 hsl、hsv、hex、rgb String 开启 alpha 时为 rgb,其它为 hex
* @method $this required($message = null, $trigger = 'change') 设为必选
* @method $this colors($colors) 自定义颜色预设
Form::month 月份选择 ```php
@method $this showWeekNumbers(Boolean $bool) 开启后,可以显示星期数。
#### frame组件
* **Form::frame** frame组件
* **Form::frameInputs** frame组件,input类型,value为array类型
* **Form::frameFiles** frame组件,file类型,value为array类型
* **Form::frameImages** frame组件,image类型,value为array类型
* **Form::frameInputOne** frame组件,input类型,value为string|number类型
* **Form::frameFileOne** frame组件,file类型,value为string|number类型
* **Form::frameImageOne** frame组件,image类型,value为string|number类型
```php
* @method $this type(String $type) frame类型, 有input, file, image, 默认为input
* @method $this src(String $src) iframe地址
* @method $this maxLength(int $length) value的最大数量, 默认无限制
* @method $this icon(String $icon) 打开弹出框的按钮图标
* @method $this height(String $height) 弹出框高度
* @method $this width(String $width) 弹出框宽度
* @method $this spin(Boolean $bool) 是否显示加载动画, 默认为 true
* @method $this frameTitle(String $title) 弹出框标题
* @method $this handleIcon(Boolean $bool) 操作按钮的图标, 设置为false将不显示, 设置为true为默认的预览图标, 类型为file时默认为false, image类型默认为true
* @method $this allowRemove(Boolean $bool) 是否可删除, 设置为false是不显示删除按钮
Form::number ```php
@method $this precision(int $precision) 数值精度
#### input输入框组件
* **Form::input** input输入框
> 其他type: text类型`Form::text`,password类型`Form::password`,textarea类型`Form::textarea`,url类型`Form::url`,email类型`Form::email`,date类型`Form::idate`
```php
* @method $this type(String $type) 输入框类型,可选值为 text、password、textarea、url、email、date;
* @method $this size(String $size) 输入框尺寸,可选值为large、small、default或者不设置;
* @method $this placeholder(String $placeholder) 占位文本
* @method $this clearable(Boolean $bool) 是否显示清空按钮, 默认为false
* @method $this disabled(Boolean $bool) 设置输入框为禁用状态, 默认为false
* @method $this readonly(Boolean $bool) 设置输入框为只读, 默认为false
* @method $this maxlength(int $length) 最大输入长度
* @method $this icon(String $icon) 输入框尾部图标,仅在 text 类型下有效
* @method $this rows(int $rows) 文本域默认行数,仅在 textarea 类型下有效, 默认为2
* @method $this number(Boolean $bool) 将用户的输入转换为 Number 类型, 默认为false
* @method $this autofocus(Boolean $bool) 自动获取焦点, 默认为false
* @method $this autocomplete(Boolean $bool) 原生的自动完成功能, 默认为false
* @method $this spellcheck(Boolean $bool) 原生的 spellcheck 属性, 默认为false
* @method $this wrap(String $warp) 原生的 wrap 属性,可选值为 hard 和 soft, 默认为soft
* @method $this autoSize($minRows, $maxRows) 自适应内容高度,仅在 textarea 类型下有效
Form::radio ```php
@method $this required($message = null, $trigger = 'change') 设为必选
#### 评分组件
* **Form::rate**
```php
* @method $this count(int $star) star 总数, 默认为 5
* @method $this allowHalf(Boolean $bool) 是否允许半选, 默认为 false
* @method $this disabled(Boolean $bool) 是否只读,无法进行交互, 默认为
* @method $this showText(Boolean $bool) 是否显示提示文字, 默认为 false
* @method $this clearable(Boolean $bool) 是否可以取消选择, 默认为 false
Form::selectOne select选择框,单选 ```php
@method $this required($message = null, $trigger = 'change') 设为必选
#### 滑块组件
* **Form::slider** 滑块组件
* **Form::sliderRange** 滑块组件,区间选择,
```php
* @method $this min(float $min) 最小值, 默认 0
* @method $this max(float $max) 最大值, 默认 100
* @method $this step(float $step) 步长,取值建议能被(max - min)整除, 默认 1
* @method $this disabled(Boolean $bool) 是否禁用滑块, 默认 false
* @method $this range(Boolean $bool) 是否开启双滑块模式, 默认
* @method $this showInput(Boolean $bool) 是否显示数字输入框,仅在单滑块模式下有效, 默认 false
* @method $this showStops(Boolean $bool) 是否显示间断点,建议在 step 不密集时使用, 默认 false
* @method $this showTip(String $tip) 提示的显示控制,可选值为 hover(悬停,默认)、always(总是可见)、never(不可见)
* @method $this inputSize(String $size) 数字输入框的尺寸,可选值为large、small、default或者不填,仅在开启 show-input 时有效
Form::switches ```php
@method $this closeStr(String $close) 自定义显示关闭时的内容
#### 时间选择组件
* **Form::timePicker** 时间选择组件
* **Form::time** 时间选择
* **Form::timeRange** 时间区间选择,value为array类型
```php
* @method $this type(String $type) 显示类型,可选值为 time、timerange
* @method $this format(String $format) 展示的时间格式, 默认为HH:mm:ss
* @method $this placement(String $placement) 时间选择器出现的位置,可选值为top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end, 默认为bottom-start
* @method $this placeholder(String $placeholder) 占位文本
* @method $this confirm(Boolean $bool) 是否显示底部控制栏, 默认为false
* @method $this size(String $size) 尺寸,可选值为large、small、default或者不设置
* @method $this disabled(Boolean $bool) 是否禁用选择器
* @method $this clearable(Boolean $bool) 是否显示清除按钮
* @method $this readonly(Boolean $bool) 完全只读,开启后不会弹出选择器,只在没有设置 open 属性下生效
* @method $this editable(Boolean $bool) 文本框是否可以输入, 默认为false
* @method $this transfer(Boolean $bool) 是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果, 默认为false
* @method $this steps($h, $i = 0, $s = 0) 下拉列表的时间间隔,数组的三项分别对应小时、分钟、秒, 例如设置为 [1, 15] 时,分钟会显示:00、15、30、45。
Form::uploadFileOne 单文件上传组件 ```php
@method $this required($message = null, $trigger = 'change') 设为必选
#### 树型组件
* **Form::tree** 树型组件
* **Form::treeSelected** 选中类型,value为array类型,当`type=selected`并且`multiple=false`,值为String或Number类型
* **Form::treeChecked** 选择类型,value为array类型
```php
* @method $this type(String $type) 类型,可选值为 checked、selected
* @method $this multiple(Boolean $bool) 是否支持多选,当`type=selected`并且`multiple=false`,默认为false,值为String或Number类型,其他情况为Array类型
* @method $this showCheckbox(Boolean $bool) 是否显示多选框,默认为false
* @method $this emptyText(String $emptyText) 没有数据时的提示,默认为'暂无数据'
* @method $this data(array $treeData) 设置可选的data,**id必须唯一**
* @method $this jsData($var) 设置data为js变量