工具表单:
什么是工具表单;
工具表单是一种可以让用户输入和提交信息的工具。在表单中，用户可以填写各种信息，例如姓名、电话、地址等，然后提交给特定的接收者。工具表单在很多框架中都是自带表单组件,下面就为大家讲解如何使用Laravel中的 Dcat admin框架的工具表单。
基础使用:
工具表单 (Dcat\Admin\Widgets\Form) 用来构建表单和处理提交数据，可以很方便的独立处理数据，而不需要额外注册路由。
用命令 admin:form 来生成表单类文件：
php artisan admin:form Setting
输入命令后会在app/Admin/Forms/Setting.php文件下生成表单文件,
文件内容是:
<?php namespace App\Admin\Forms; use Dcat\Admin\Widgets\Form; use Symfony\Component\HttpFoundation\Response; class Setting extends Form { // 处理表单提交请求 public function handle(array $input) { // dump($input); // return $this->response()->error('Your error message.'); return $this->response()->success('Processed successfully.')->refresh(); } // 构建表单 public function form() { // Since v1.6.5 弹出确认弹窗 $this->confirm('您确定要提交表单吗', 'content'); $this->text('name')->required(); $this->email('email')->rules('email'); } /** * 返回表单数据，如不需要可以删除此方法 * * @return array */ public function default() { return [ 'name' => 'John Doe', 'email' => 'John.Doe@gmail.com', ]; } }
在上面的表单类里面，在 form 方法中构建表单项，使用方法和数据表单一致，default 方法用来给这个表单项设置默认数据。
在页面中填入数据提交表单之后，请求会进入到 handle 方法中，在这里可以加入你的数据处理逻辑，处理完成之后可以通过 success 或 error 方法响应数据到前端：
你需要在控制器中新建控制器(setting.php)文件,在文件中写:
public function handle(array $input) { // $input是你接收到的表单数据 // 在这里可以写你的处理逻辑 // 第一个参数是响应的成功信息，第二个参数是要跳转的路由 return $this->response()->success('Processed successfully.')->refresh(); }
然后按照下面的方法将上面的表单放到你的页面中：
<?php use App\Admin\Forms\Setting; use App\Http\Controllers\Controller; use Dcat\Admin\Widgets\Card; use Dcat\Admin\Layout\Content; class UserController extends Controller { public function setting(Content $content) { return $content ->title('网站设置') ->body(new Card(new Setting())); } }
再次我们的工具表单就正式生成完毕,更多操作前往连接
普通表单:
当我们使用Dcat admin的CRUD所创建快速开发是,框架会帮助我们自动写好前段页面,以及控制器的方法,但我们却不知道如何去使用,我整理了一下我们常用的一些表单组件。
文件/图片上传:
文件上传:$form->file('file_column');
图片上传:$form->image('image_column');
在config/filesystems.php文件中 添加一项 disk:
'disks' => [
... ,
'admin' => [
'driver' => 'local',
'root' => public_path('uploads'),
'visibility' => 'public',
'url' => env('APP_URL').'/uploads',
],
],
如何有的话可以先注释,这串代码的作用是文件存储的位置
设置上传的路径为 public/uploads(public_path(‘uploads’))。
然后选择上传的 disk，打开 config/admin.php 找到：
'upload' => [
'disk' => 'admin',
'directory' => [
'image' => 'images',
'file' => 'files',
]
],
将 disk 设置为上面添加的 admin，directory.image 和 directory.file 分别为用 $form->image($column) 和 $form->file($column) 上传的图片和文件的上传目录。
表单input框;
设置表单值 (value)
$form->text('title')->value('text...');
设置默认值 (default)
$form->text('title')->default('text...');
此方法仅在新增页面有效，如果编辑页面也需要设置默认值，可以参考以下方法
$form->text('xxx')->default('默认值', true);
设置自定义 class (addElementClass)
// 如果不希望添加前缀，则第二个参数设置为false $form->text(...)->addElementClass(['class1', 'class2'], false);
设置提示信息 (help)
$form->text('title')->help('help...');
设置属性 (attribute)
$form->text('title')->attribute(['data-title' => 'title...']); $form->text('title')->attribute('data-title', 'title...');
设置为必填 (required)
$form->text('title')->required(); // 不显示"*"号 $form->text('title')->required(false);
设置为不可编辑 (disable)
$form->text('title')->disable();
设置占位符 (placeholder)
$form->text('title')->placeholder('请输入。。。');
设置宽度 (width)
$form->text('title')->width(8, 2);
设置验证规则 (rules)
具体使用可参考表单验证。
修改待保存的表单输入值 (saving)
通过 saving 方法可以更改待保存数据的格式。
use Dcat\Admin\Support\Helper; $form->multipleFile('files')->saving(function ($paths) { $paths = Helper::array($paths); // 获取数据库当前行的其他字段 $username = $this->username; // 最终转化为json保存到数据库 return json_encode($paths); });
修改表单数据显示 (customFormat)
通过 customFormat 方法可以改变从外部注入到表单的字段值。
如下例子中，multipleFile 字段要求待渲染的字段值为数组格式，我们可以通过 customFormat 方法把从数据库查出的字段值转化为 array 格式
use Dcat\Admin\Support\Helper; $form->multipleFile('files')->saving(function ($paths) { $paths = Helper::array($paths); return json_encode($paths); })->customFormat(function ($paths) { // 获取数据库当前行的其他字段 $username = $this->username; // 转为数组 return Helper::array($paths); });
在弹窗中隐藏
如果不想在弹窗中显示某个字段，可以使用 Form\Field::hideInDialog 方法
$form->display('id'); $form->text('title'); $form->textare('contents')->hideInDialog();
文本 (text)
$form->text($column, [$label]);
// 添加提交验证规则
$form->text($column, [$label])->rules('required|min:10');
隐藏字段 (hidden)
通过 hidden 方法可以给你的表单设置一个隐藏字段。
$form->hidden('author_id')->value(Admin::user()->getKey());
通常可以结合 saving 事件使用
$form->hidden('author_id'); $form->saving(function (Form $form) { $form->author_id = Admin::user()->getKey(); });
下拉选框单选 (select)
$form->select($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name']); 或者从 api 中获取选项列表： $form->select($column[, $label])->options('/api/users'); // 使用ajax并显示所选项目 $form->select($column[, $label])->options(Model::class)->ajax('/api/users'); // 或指定名称和ID $form->select($column[, $label])->options(Model::class, 'id', 'name')->ajax('/api/users');
其中 api 接口的格式必须为下面格式：
[ { "id": 9, "text": "xxx" }, { "id": 21, "text": "xxx" }, ... ]
如果选项过多，可通过 ajax 方式动态分页载入选项：
$form->select('user_id')->options(function ($id) { $user = User::find($id); if ($user) { return [$user->id => $user->name]; } })->ajax('api/users'); API /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" } ] }
下拉选框联动 (load)
select 组件支持父子关系的单向联动：
$form->select('province')->options(...)->load('city', '/api/city');
$form->select('city');
其中 load('city', '/api/city'); 的意思是，在当前 select 的选项切换之后，会把当前选项的值通过参数 q, 调用接口 /api/city，并把 api 返回的数据填充为 city 选择框的选项，其中 api/api/city 返回的数据格式必须符合:
[ { "id": 9, "text": "xxx" }, { "id": 21, "text": "xxx" }, ... ]
控制器 action 的代码示例如下：
public function city(Request $request) { $provinceId = $request->get('q'); return ChinaArea::city()->where('parent_id', $provinceId)->get(['id', DB::raw('name as text')]); }
selectTable、multipleSelectTable、radio、checkbox 也可以使用 load 方法联动 select 和 multipleSelect 表单，用法和上面的示例一致。
