借助表单部件,您可以为后端表单添加新的控件类型。
它们提供了为模型提供数据时常见的特性。
表单部件必须注册在插件注册文件中。
表单部件类位于插件的 formwidgets 目录内。内部目录名称与以小写形式编写的部件类名称匹配。部件可以提供资源和局部视图。一个示例表单部件目录结构如下所示。
├── formwidgets
| ├── colorpicker
| | ├── partials
| | | └── _colorpicker.php ← 局部文件
| | └── assets
| | ├── js
| | | └── colorpicker.js ← JavaScript 文件
| | └── css
| | └── colorpicker.css ← 样式表文件
| └── ColorPicker.php ← 部件类
create:formwidget 命令会生成一个后端表单小部件、视图和基本资产文件。第一个参数指定作者和插件名称。第二个参数指定表单小部件类名。
php artisan create:formwidget Acme.Blog ColorPicker表单部件类必须继承 Backend\Classes\FormWidgetBase 类。已注册的部件可在后端 表单字段定义 文件中使用。表单部件类定义示例。
namespace Backend\FormWidgets;
use Backend\Classes\FormWidgetBase;
class ColorPicker extends FormWidgetBase
{
/**
* @var string defaultAlias to identify this widget.
*/
protected $defaultAlias = 'colorpicker';
public function render() {}
}表单部件可能具有可以通过 表单字段配置 设置的属性. 只需在类上定义可配置属性,然后调用 fillFromConfig 方法来在 init 方法定义内部填充它们.
class DatePicker extends FormWidgetBase
{
//
// Configurable properties
//
/**
* @var string mode for display: datetime, date, time.
*/
public $mode = 'datetime';
/**
* @var string minDate is the minimum/earliest date that can be selected.
* eg: 2000-01-01
*/
public $minDate = null;
/**
* @var string maxDate is the maximum/latest date that can be selected.
* eg: 2020-12-31
*/
public $maxDate = null;
//
// Object properties
//
/**
* {@inheritDoc}
*/
protected $defaultAlias = 'datepicker';
/**
* {@inheritDoc}
*/
public function init()
{
$this->fillFromConfig([
'mode',
'minDate',
'maxDate',
]);
}
// ...
}属性值随后可从表单字段定义中设置,在使用该小部件时。
born_at:
label: Date of Birth
type: datepicker
mode: date
minDate: 1984-04-12
maxDate: 2014-04-23插件应通过覆盖registerFormWidgets方法来注册表单小部件,该方法位于plugin registration file。该方法返回一个数组,其中键是小部件类,值是小部件短代码。示例:
public function registerFormWidgets()
{
return [
\Backend\FormWidgets\ColorPicker::class => 'colorpicker',
\Backend\FormWidgets\DatePicker::class => 'datepicker'
];
}短代码是可选的,并且可以在表单字段定义中引用该组件时使用,它应该是一个唯一值,以避免与其他表单字段发生冲突。
表单小部件的主要目的是与您的模型交互,这意味着在大多数情况下通过数据库加载和保存值。当表单小部件渲染时,它将使用 getLoadValue 方法请求其存储的值。getId 和 getFieldName 方法将返回一个唯一的标识符和名称,用于表单中的 HTML 元素。这些值通常会在渲染时传递给小部件局部视图。
public function render()
{
$this->vars['id'] = $this->getId();
$this->vars['name'] = $this->getFieldName();
$this->vars['value'] = $this->getLoadValue();
return $this->makePartial('myformwidget');
}在基本层面,表单小部件可以使用输入元素将用户输入值发送回去。从上面的例子来看,在 myformwidget 片段内部,该元素可以使用准备好的变量进行渲染。
<input id="<?= $id ?>" name="<?= $name ?>" value="<?= e($value) ?>" />当需要获取用户输入并将其存储到数据库时,表单小部件将在内部调用 getSaveValue 来请求该值。要修改此行为,只需在你的表单小部件类中覆盖该方法即可。
public function getSaveValue($value)
{
return $value;
}在某些情况下,您有意不希望给定任何值,例如,一个表单小部件,它仅显示信息而不保存任何内容。返回一个名为 FormField::NO_SAVE_DATA 的特殊常量,该常量派生自 Backend\Classes\FormField 类,以使该值被忽略。
public function getSaveValue($value)
{
return \Backend\Classes\FormField::NO_SAVE_DATA;
}