October CMS - 快速入门 13 建立自定义Form Widgets
2018-10-24 13:06:47    151    0    0
emengweb

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

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

建立如下的文件结构

编辑Actorbox.php文件
plugins/raiseinfo/movies/formwidgets/Actorbox.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');
    }

    
}

编辑文件:plugins/raiseinfo/movies/Plugin.php

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

编辑文件:plugins/raiseinfo/movies/models/movie/fields.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

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

为了显示实际字段我们需要编辑文件:raiseinfo/movies/formwidgets/actorbox/partials/_widget.htm
我们可以试着添加一个表单

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


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

    .select2-container {
        width: 100% !important;
        display: block;
    }



    aaa
    bbb
    ccc
    ddd
    eee
    fff




    $(document).on('render',function () {
       $('.s2').select2({
           placeholder: 'Add Actors',
           tags: true
       })
    });

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

 

上一篇: October CMS - 快速入门 14 保存Form Widget的数据

下一篇: October CMS - 快速入门 12 Repeater字段

151 人读过
文档导航