SilverStripe CMS中多态关系下新增多态对象的CMS按钮实现需求

我之前在SilverStripe项目里处理过几乎一模一样的多态关联新增需求，下面是我实际落地过的分步实现方案，完全匹配你要的“选主对象类型→创建对应对象”的流程：

首先得确保你的多态模型基础配置是正确的，假设我们有一个RelatedItem作为多态关联的中间模型，关联Page、BlogPost、Product这些主对象，先在RelatedItem.php里定义好关系：

class RelatedItem extends DataObject
{
    private static $db = [
        // 你的其他字段，比如描述、排序权重等
        'Description' => 'Text',
        'SortOrder' => 'Int'
    ];

    // 核心多态关系配置
    private static $polymorphic_relations = [
        'RelatedObject' => [
            'Page',
            'BlogPost',
            'Product'
        ]
    ];

    // 给CMS提供可选的主对象类型列表（用于下拉选择）
    public function getAvailableParentTypes()
    {
        $types = $this->config()->get('polymorphic_relations')['RelatedObject'];
        $options = [];
        foreach ($types as $type) {
            // 用模型的本地化名称显示，更友好
            $options[$type] = singleton($type)->i18n_singular_name();
        }
        return $options;
    }

    // 其他模型方法...
}

接下来要在管理后台（比如ModelAdmin或者GridField所在的页面）添加自定义按钮，触发分步弹窗流程：

1. 替换/添加GridField自定义新增按钮 #

在你的ModelAdmin或者Page的CMS字段配置里，修改GridField的按钮：

// 比如在你的ModelAdmin子类中
public function getEditForm($id = null, $fields = null)
{
    $form = parent::getEditForm($id, $fields);
    
    // 获取关联的GridField
    $gridField = $form->Fields()->fieldByName('RelatedItems');
    if ($gridField) {
        // 移除默认的新增按钮
        $gridField->getConfig()->removeComponentsByType(GridFieldAddNewButton::class);
        // 添加自定义新增按钮
        $customAddBtn = GridFieldAddNewButton::create('toolbar-header-right')
            ->setButtonName('新增关联项');
        $gridField->getConfig()->addComponent($customAddBtn);
    }
    
    return $form;
}

2. 编写前端分步弹窗逻辑 #

创建一个CMS自定义JS文件（比如yourtheme/javascript/cms/polymorphic-add.js），处理按钮点击后的分步流程：

jQuery(document).ready(function($) {
    // 监听自定义新增按钮的点击事件
    $('.grid-field button[data-action="gridfield-add-new"]').on('click', function(e) {
        e.preventDefault();
        
        // --------------------------
        // 第一步：显示主对象类型选择弹窗
        // --------------------------
        const typeModal = new ss.Modal({
            content: `
                <div class="modal-content">
                    <h3>选择关联对象类型</h3>
                    <select id="ParentTypeSelect" class="form-control">
                        <?php foreach (singleton('RelatedItem')->getAvailableParentTypes() as $class => $name): ?>
                            <option value="<?= $class ?>"><?= $name ?></option>
                        <?php endforeach; ?>
                    </select>
                    <div style="margin-top:15px;">
                        <button id="NextStepBtn" class="btn btn-primary">下一步</button>
                    </div>
                </div>
            `,
            width: 400
        });
        typeModal.open();

        // 监听下一步按钮点击
        $('#NextStepBtn').on('click', function() {
            const selectedType = $('#ParentTypeSelect').val();
            if (!selectedType) {
                alert('请先选择一个对象类型');
                return;
            }
            typeModal.close();

            // --------------------------
            // 第二步：打开选中类型的对象创建表单
            // --------------------------
            // 构造CMS创建页面的URL（注意小写类名，SilverStripe默认路由规则）
            const createUrl = `admin/${selectedType.toLowerCase()}/add`;
            const createModal = new ss.Modal({
                content: `<iframe src="${createUrl}" width="800" height="600" frameborder="0"></iframe>`,
                width: 850,
                height: 650
            });
            createModal.open();

            // 监听iframe加载，处理创建完成后的关联操作
            $('iframe', createModal.getContent()).on('load', function() {
                const iframeWindow = this.contentWindow;
                const urlParams = new URLSearchParams(this.src.split('?')[1]);
                
                // 如果URL里有ID，说明对象已经创建成功
                if (urlParams.get('ID')) {
                    const objectId = urlParams.get('ID');
                    createModal.close();

                    // --------------------------
                    // 可选：自动打开关联项创建表单并预填关联信息
                    // --------------------------
                    const relatedCreateUrl = `admin/relateditem/add?RelatedObjectID=${objectId}&RelatedObjectClass=${selectedType}`;
                    const relatedModal = new ss.Modal({
                        content: `<iframe src="${relatedCreateUrl}" width="800" height="600" frameborder="0"></iframe>`,
                        width: 850,
                        height: 650
                    });
                    relatedModal.open();

                    // 提交关联项表单后刷新GridField
                    $('iframe', relatedModal.getContent()).on('load', function() {
                        $(this.contentDocument).on('submit', 'form', function() {
                            setTimeout(() => {
                                relatedModal.close();
                                // 刷新当前GridField展示新的关联项
                                $('.grid-field').trigger('reload');
                            }, 1000);
                        });
                    });
                }
            });
        });
    });
});

别忘了把这个JS文件注册到CMS的资源里，在yourtheme/_config/config.yml中添加：

SilverStripe\Admin\LeftAndMain:
  extra_requirements_javascript:
    - 'yourtheme/javascript/cms/polymorphic-add.js'

为了让用户体验更好，我们可以在打开RelatedItem创建表单时，自动预填已创建的主对象信息，在RelatedItem.php的getCMSFields方法中添加：

public function getCMSFields()
{
    $fields = parent::getCMSFields();
    
    // 获取URL参数中的关联对象信息
    $request = Controller::curr()->getRequest();
    $objectId = $request->getVar('RelatedObjectID');
    $objectClass = $request->getVar('RelatedObjectClass');
    
    if ($objectId && $objectClass && class_exists($objectClass)) {
        // 预填关联字段
        $fields->dataFieldByName('RelatedObjectID')->setValue($objectId);
        $fields->dataFieldByName('RelatedObjectClass')->setValue($objectClass);
        // 设置为只读，避免用户误改
        $fields->dataFieldByName('RelatedObjectID')->setReadonly(true);
        $fields->dataFieldByName('RelatedObjectClass')->setReadonly(true);
    }
    
    return $fields;
}

• 如果你不需要自动打开关联项表单，可以跳过第二步里的关联Modal部分，让用户创建完主对象后手动去关联，不过自动流程体验更好；
• 要确保所有主对象都在ModelAdmin里注册了，否则admin/{type}/add路由会找不到；
• 本地化名称如果没配置，可以直接用类名，或者修改getAvailableParentTypes方法返回自定义名称。

内容的提问来源于stack exchange，提问作者Y4roc