SilverStripe：将组件添加到 GridField 中，将它们分组在 div 中（工具栏）答案

【问题标题】：SilverStripe: Adding the component to GridField grouping them in a div (toolbar)SilverStripe：将组件添加到 GridField 中，将它们分组在 div 中（工具栏）
【发布时间】：2020-01-30 11:32:28
【问题描述】：

我正在从事 SilverStripe 项目。在我的项目中，我正在向 GridField 动态添加组件。实际上，我正在尝试替换现有组件。由于没有替换方法，所以我必须删除现有组件并添加新组件。

以下是我的代码

 $grid = new GridField('ContentBlocks', 'Content Blocks', $this->owner->ContentBlocks(), $editor);
 $grid->getConfig()
      ->removeComponentsByType(GridFieldAddExistingAutocompleter::class)
      ->addComponent(new CustomGridFieldAddExistingAutocompleter())
      //configuring other components continue here

正如您在我的代码中看到的那样，我正在删除一个现有组件并添加一个新的自定义组件来替换已删除的组件。

它添加了自定义组件。但这有一个问题。问题是在前端，新组件没有添加到与被删除组件完全相同的位置。

看这个截图：

正如您在屏幕截图中看到的那样，搜索框（添加的自定义组件）脱离了添加内容块按钮所在的容器或 div。如果我没有进行替换，它们将保持在同一行如下图所示。

我在想的是，我正在寻找一种方法将它们重新组合成一行。我怎样才能做到这一点？有可能吗？

【问题讨论】：

标签： silverstripe silverstripe-4

【解决方案1】：

我们可以创建自己的GridFieldConfig 并添加我们想要的组件，而不是删除和添加现有GridFieldConfig 的组件。

$contentBlocksFieldConfig = GridFieldConfig::create();
$contentBlocksFieldConfig->addComponent(new GridFieldButtonRow('before'));
$contentBlocksFieldConfig->addComponent(new GridFieldAddNewButton('buttons-before-left'));
$contentBlocksFieldConfig->addComponent(new CustomGridFieldAddExistingAutocompleter('buttons-before-right'));
$contentBlocksFieldConfig->addComponent(new GridFieldToolbarHeader());
$contentBlocksFieldConfig->addComponent(new GridFieldSortableHeader());
$contentBlocksFieldConfig->addComponent(new GridFieldFilterHeader());
$contentBlocksFieldConfig->addComponent(new GridFieldDataColumns());
$contentBlocksFieldConfig->addComponent(new GridFieldEditButton());
$contentBlocksFieldConfig->addComponent(new GridFieldDeleteAction(true));
$contentBlocksFieldConfig->addComponent(new GridField_ActionMenu());
$contentBlocksFieldConfig->addComponent(new GridFieldPageCount('toolbar-header-right'));
$contentBlocksFieldConfig->addComponent(new GridFieldPaginator(25));
$contentBlocksFieldConfig->addComponent(new GridFieldDetailForm());

$contentBlocksField = GridField::create(
    'ContentBlocks', 
    'Content Blocks', 
    $this->ContentBlocks(), 
    $contentBlocksFieldConfig
);

上述配置组件设置基于GridFieldConfig_RelationEditor 设置。我们可以使用GridFieldConfig_RecordEditor 的组件或任何其他配置。

此外，为了使自动完成器向右对齐，我们将'buttons-before-right' 作为参数传递，如下所示：

->addComponent(new CustomGridFieldAddExistingAutocompleter('buttons-before-right'))

这是假设 CustomGridFieldAddExistingAutocompleter 与 GridFieldAddExistingAutocompleter 具有相同的构造函数。

【讨论】：