Skip to content

Latest commit

 

History

History
431 lines (332 loc) · 9.76 KB

model-form.md

File metadata and controls

431 lines (332 loc) · 9.76 KB
Raw

基于数据模型的表单

Encore\Admin\Form类用于生成基于数据模型的表单，先来个例子，数据库中有movies表

CREATE TABLE `movies` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `director` int(10) unsigned NOT NULL,
  `describe` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `rate` tinyint unsigned NOT NULL,
  `released` enum(0, 1),
  `release_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

对应的数据模型为App\Models\Movie，下面的代码可以生成movies的数据表单：

use App\Models\Movie;
use Encore\Admin\Form;
use Encore\Admin\Facades\Admin;

$grid = Admin::form(Movie::class, function(Form $grid){

    // 显示记录id
    $form->display('id', 'ID');

    // 添加text类型的input框
    $form->text('title', '电影标题');
    
    $directors = [
        'John'  => 1,
        'Smith' => 2,
        'Kate'  => 3,
    ];
    
    $form->select('director', '导演')->options($directors);
    
    // 添加describe的textarea输入框
    $form->textarea('describe', '简介');
    
    // 数字输入框
    $form->number('rate', '打分');
    
    // 添加开关操作
    $form->switch('released', '发布？');
    
    // 添加日期时间选择框
    $form->dateTime('release_at', '发布时间');
    
    // 两个时间显示
    $form->display('created_at', '创建时间');
    $form->display('updated_at', '修改时间');
    
    // 去掉form删除功能（移除删除按钮）
    $form->disableDeletion();
});

// 显示表单内容
echo $form;

Basic Usage

文本输入框

$form->text($column, [$label]);

// 添加提交验证规则
$form->text($column, [$label])->rules('required|min:10');

select选择框

$form->select($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name']);

如果选项过多，可通过ajax方式动态分页载入选项：

$form->select('user_id')->options(function ($id) {
    $user = User::find($id);

    if ($user) {
        return [$user->id => $user->name];
    }
})->ajax('/admin/api/users');

url /admin/api/users接口的代码：

public function users(Request $request)
{
    $q = $request->get('q');

    return User::where('name', 'like', "%$q%")->paginate(null, ['id', 'name as text']);
}

接口返回的数据结构为

{
    "total": 4,
    "per_page": 15,
    "current_page": 1,
    "last_page": 1,
    "next_page_url": null,
    "prev_page_url": null,
    "from": 1,
    "to": 3,
    "data": [
        {
            "id": 9,
            "text": "xxx"
        },
        {
            "id": 21,
            "text": "xxx"
        },
        {
            "id": 42,
            "text": "xxx"
        },
        {
            "id": 48,
            "text": "xxx"
        }
    ]
}

多选框

$form->multipleSelect($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name']);

多选框可以处理两种情况，第一种是ManyToMany的关系。


class Post extends Models
{
    public function tags()
    {
        return $this->belongsToMany(Tag::class);
    }
}

$form->multipleSelect('tags')->options(Tag::all()->pluck('name', 'id'));

第二种是选项值以逗号,隔开，存储在字符串字段里。

如果选项过多，可通过ajax方式动态分页载入选项：

$form->select('friends')->options(function ($ids) {

    return User::find($ids)->pluck('name', 'id');
    
})->ajax('/admin/api/users');

url /admin/api/users接口的代码：

public function users(Request $request)
{
    $q = $request->get('q');

    return User::where('name', 'like', "%$q%")->paginate(null, ['id', 'name as text']);
}

接口返回的数据结构为

{
    "total": 4,
    "per_page": 15,
    "current_page": 1,
    "last_page": 1,
    "next_page_url": null,
    "prev_page_url": null,
    "from": 1,
    "to": 3,
    "data": [
        {
            "id": 9,
            "text": "xxx"
        },
        {
            "id": 21,
            "text": "xxx"
        },
        {
            "id": 42,
            "text": "xxx"
        },
        {
            "id": 48,
            "text": "xxx"
        }
    ]
}

textarea输入框:

$form->textarea($column[, $label]);

radio选择

$form->radio($column[, $label])->values(['m' => 'Female', 'f'=> 'Male'])->default('m');

checkbox选择

values()方法用来设置选择项:

$form->checkbox($column[, $label])->values([1 => 'foo', 2 => 'bar', 'val' => 'Option name']);

email个数输入框

$form->email($column[, $label]);

密码输入框

$form->password($column[, $label]);

url输入框

$form->url($column[, $label]);

ip输入框

$form->ip($column[, $label]);

电话号码输入框

$form->mobile($column[, $label])->format('999 9999 9999');

颜色选择框

$form->color($column[, $label])->default('#ccc');

时间输入框

$form->time($column[, $label]);

// 设置时间格式，更多格式参考http://momentjs.com/docs/#/displaying/format/
$form->time($column[, $label])->format('HH:mm:ss');

日期输入框

$form->date($column[, $label]);

// 设置日期格式，更多格式参考http://momentjs.com/docs/#/displaying/format/
$form->date($column[, $label])->format('YYYY-MM-DD');

日期时间输入框

$form->datetime($column[, $label]);

// 设置日期格式，更多格式参考http://momentjs.com/docs/#/displaying/format/
$form->datetime($column[, $label])->format('YYYY-MM-DD HH:mm:ss');

时间范围选择框

$startTime、$endTime为开始和结束时间字段:

$form->timeRange($startTime, $endTime, 'Time Range');

日期范围选框

$startDate、$endDate为开始和结束日期字段:

$form->dateRange($startDate, $endDate, 'Date Range');

时间日期范围选择框

$startDateTime、$endDateTime为开始和结束时间日期:

$form->datetimeRange($startDateTime, $endDateTime, 'DateTime Range');

货币输入框

$form->currency($column[, $label]);

// 设置单位符号
$form->currency($column[, $label])->symbol('￥');

数字输入框

$form->number($column[, $label]);

比例输入框

$form->rate($column[, $label]);

图片上传

使用图片上传功能之前需要先完成上传配置，请参考:图片/文件上传.

可以使用压缩、裁切、添加水印等各种方法，请参考[Intervention]，图片上传目录在文件config/admin.php中的upload.image中配置，如果目录不存在，需要创建该目录并开放写权限。：

$form->image($column[, $label]);

// 修改图片上传路径和文件名
$form->image($column[, $label])->move($dir, $name);

// 剪裁图片
$form->image($column[, $label])->crop(int $width, int $height, [int $x, int $y]);

// 加水印
$form->image($column[, $label])->insert($watermark, 'center');

// 多图上传，图片的路径会以JSON的格式存储在数据库中
$form->image($column[, $label])->multiple();

文件上传

使用图片上传功能之前需要先完成上传配置，请参考:图片/文件上传.

文件上传目录在文件config/admin.php中的upload.file中配置，如果目录不存在，需要创建该目录并开放写权限。

$form->file($column[, $label]);

// 修改文件上传路径和文件名
$form->file($column[, $label])->move($dir, $name);

// 并设置上传文件类型
$form->file($column[, $label])->rules('mimes:doc,docx,xlsx');

// 多文件上传，文件的路径会以JSON的格式存储在数据库中
$form->file($column[, $label])->multiple();

地图控件

地图组件引用了网络资源，如果网络方面有问题参考form组件管理移除该组件

地图控件，用来选择经纬度,$latitude, $longitude为经纬度字段，laravel的locale设置为zh_CN的时候使用腾讯地图，否则使用Google地图：

$form->map($latitude, $longitude, $label);

// 使用腾讯地图
$form->map($latitude, $longitude, $label)->useTencentMap();

// 使用Google地图
$form->map($latitude, $longitude, $label)->useGoogleMap();

滑动选择控件

可以用来数字类型字段的选择，比如年龄：

$form->slider($column[, $label])->options(['max' => 100, 'min' => 1, 'step' => 1, 'postfix' => 'years old']);

富文本编辑框

编辑器组件引用了网络资源，如果网络方面有问题参考form组件管理移除该组件

$form->editor($column[, $label]);

隐藏域

$form->hidden($column);

开关选择

on和off对用开关的两个值1和0:

$form->switch($column[, $label])->states(['on' => 1, 'off' => 0]);

显示字段

只显示字段，不做任何操作：

$form->display($column[, $label]);

分割线

$form->divide();

Html

插入html内容，参数可以是实现了Htmlable、Renderable或者实现了__toString()方法的类

$form->html('你的html内容');

保存数据回调

保存数据的时候添加回调，保存数据之前可以对提交数据做一些操作：

$form->saving(function(Form $form) {
    if($form->password && $form->model()->password != $form->password)
    {
        $form->password = bcrypt($form->password);
    }
});