October CMS - 快速入门 13 建立自定义Form Widgets

在上一节中我们是使用repeater字段存储演员信息的，当然这不是最佳的方式，我们希望，演员的信息能够存储在单独的表中，而且演员的信息可能需要更多的字段进行存储。然后将演员表和其他表进行关联，就好像视频表和风格表之间的关联一样。

只是我们不得不使用类似于上面的方式，采用复选框的形式进行风格的选择。这个肯定不是让你最满意的方式，在这一节和下一节，我们将讨论如何自定义表单控件，并将小部件连接到视频表单，并且将视频与表单对应的数据进行关联。

建立如下的文件结构

编辑Actorbox.php文件
pluginsraiseinfomoviesformwidgetsActorbox.php

<?php
namespace Raiseinfo\Movies\FormWidgets;

use Backend\Classes\FormWidgetBase;
use Config;

class Actorbox extends FormWidgetBase
{
    public function widgetDetails()
    {
        return [
            'name' => 'Actorbox',
            'description' => 'Field for adding actors',
        ];
    }

    public function render()
    {
        return $this->makePartial('widget');
    }

    public function loadAssets()
    {
        $this->addCss('css/select2.css');
        $this->addJs('js/select2.js');
    }

    
}

编辑文件：pluginsraiseinfomoviesPlugin.php

public function registerFormWidgets()
{
    return [
      'Raiseinfo\Movies\FormWidgets\Actorbox' => [
          'label' => 'Actorbox Field',
          'code' => 'actorbox'
      ]
    ];
}

编辑文件：pluginsraiseinfomoviesmodelsmoviefields.yaml
请将下面的代码删除（上一节的改动）

actors:
    label: 演员
    prompt: 'Add new item'
    span: auto
    type: repeater
    form:
        fields:
            actor_name:
                label: 演员姓名
                span: auto
                type: text
            actor_age:
                label: 演员年龄
                span: auto
                type: text

更改为：type设置的就是上一步中的code的值

actors:
    label: 演员
    span: left
    type: actorbox

保存上述代码并访问后台【视频】——【选择任意视频】——编辑：会看见出现了新的字段标签“演员”。这说明我们的设置起作用了，但是，没有显示任何内容。如何编辑用

为了显示实际字段我们需要编辑文件：raiseinfomoviesformwidgetsactorboxpartials_widget.htm
我们可以试着添加一个表单

<input type="text" value="OK">

说明，我们只需要编辑这个文件，就可以控制此控件的显示内容及与表数据的关联。

<style type="text/css">
    .select2-container {
        width: 100% !important;
        display: block;
    }
</style>

<select class="s2" multiple>
    <option value="aaa">aaa</option>
    <option value="bbb">bbb</option>
    <option value="ccc">ccc</option>
    <option value="ddd">ddd</option>
    <option value="eee">eee</option>
    <option value="fff">fff</option>
</select>


<script type="text/javascript">
    $(document).on('render',function () {
       $('.s2').select2({
           placeholder: 'Add Actors',
           tags: true
       })
    });
</script>

刷新页面，现在我们是硬编码，并没有把演员的实际信息放进去。所以，实际上我们没有办法保存这些信息。下一节我们将解决这个问题。