search

xaboy / laravel-form-builder

laravel专用表单生成器，快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,树型,文件/图片上传等功能。
MIT License
60 stars 7 forks source link
form-create form-generator laravel laravel-5-package

readme

laravel-form-builder

MIT xaboy version php version

laravel专用表单生成器，快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、树型、文件/图片上传等功能。

支持laravel 5.x

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！

本项目还在不断开发完善中,如有建议或问题请在这里提出

安装

$ composer require xaboy/laravel-form-builder

配置

  1. 添加下面一行到 config/app.php 中 providers 部分：

    LaravelFormBuilder\FormBuilderProvider::class,

  2. 发布配置文件与资源

    $ php artisan vendor:publish --provider='LaravelFormBuilder\FormBuilderProvider'

  3. 模板引入依赖资源

    这行的作用是引入编辑器需要的 css,js 等文件，所以你不需要再手动去引入它们。

    如果项目中已包含vue、iview、jquery其中任意,可在vendor/form-builder/assets.blade.php文件中手动移除。

    注意 iview版本为2.14.3,vue版本为2.5

    @include('vendor.form-builder.assets')

  4. 加载表单规则

    //@include('vendor.form-builder.script',['form'=>$form,'id'=>'store']);
@include('vendor.form-builder.script',['form'=>$form]);

  5. 表单初始化

    表单会自动添加csrf_token,无需手动设置

    <script>
    //laravelFormCreate_store('.panel-body');
    laravelFormCreate('.panel-body',function callback(status, res, $f, formData){
     //表单提交回调函数
       if(!status)
           //TODO 表单提交成功
        else
           //TODO 表单提交失败
   });
</script>

说明

  1. 5.4+ 请不要忘记 php artisan storage:link
  2. 如果你使用的是 laravel 5.3 以下版本，请先创建软链接： 
    # 请在项目根目录执行以下命令
$ ln -s `pwd`/storage/app/public `pwd`/public/storage

示例

https://raw.githubusercontent.com/xaboy/laravel-form-builder/master/demo.jpg

代码


namespace Test;
use LaravelFormBuilder\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;

AJAX请求返回类

namespace \LaravelFormBuilder\Json

Form 表单生成类

namespace \LaravelFormBuilder\Form

FormStyle表单样式

Row栅格规则

Col栅格规则

select,checkbox,radio组件配置options专用方法

以下组件公共方法

组件

namespace \LaravelFormBuilder\Form

多级联动组件

复选框组件

颜色选择组件

日期选择组件

frame组件

hidden组件

数字输入框组件

单选框组件

评分组件

select选择框组件

滑块组件

开关组件组件

时间选择组件

上传组件

树型组件

树型组件data数据类 TreeData

所有组件生成效果

https://raw.githubusercontent.com/xaboy/laravel-form-builder/master/images/components.png

参考