时间戳

首页 > 解决方案 > EasyAdmin3：编辑表单上的两列概念（引导程序）

bootstrap-4 - EasyAdmin3：编辑表单上的两列概念（引导程序）

问题描述

背景

我正在使用 EasyAdmin3 (Symfony 5)，我想在 EDIT-View 中有一个两列的概念。下面的代码将块的宽度正确“减少”到 50%，但它们并不相邻。

class PersonCrudController extends AbstractCrudController {
    [...]

    public function configureFields(string $pageName): iterable {

        yield FormField::addPanel('Block 1')->setCssClass('col-sm-6');
        [...]

        yield FormField::addPanel('Block 2')->setCssClass('col-sm-6');
        [...]
    }

    [...]
}

问题

我问，我需要用一个包含class="row". 但是怎么做？

有什么想法，我能做什么？谢谢！

标签： bootstrap-4symfony5easyadmin

解决方案

我的解决方法

我决定用 JavaScript 解决它。row因此，我检查了 HTML 代码以获取 FORM 的名称，并使用 JavaScript 将-class注入此元素。JavaScript 文件需要通过 Dashboad-Controller 填充（以便将来可重用于其他元素）。

my_javascript.js

// call functions once page is loaded
document.addEventListener("DOMContentLoaded", function() {
    addClassToElement('edit-Person-form', 'row');
});

function addClassToElement(elementName, className) {
    let element = document.getElementById(elementName);

    if (element != null) {
        element.classList.add(className);
    }
}

仪表板控制器

[...]
public function configureAssets(): Assets {
    $assets = parent::configureAssets();

    $assets->addJsFile('js/my_javascript.js');

    return $assets;
}
[...]

PersonCrudController

class PersonCrudController extends AbstractCrudController {
    [...]

    public function configureFields(string $pageName): iterable {

        yield FormField::addPanel('Block 1')->setCssClass('col-sm-6');
        [...]

        yield FormField::addPanel('Block 2')->setCssClass('col-sm-6');
        [...]
    }

    [...]
}

推荐阅读