By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
October CMS - 快速入门 13 建立自定义Form Widgets
2018-10-24 13:06:47    194    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字段

194 人读过
文档导航