如何在 Vaadin CRUD 的同一行放置两个复选框？

Question

我有一个entity，它有这两个字段。

private boolean alarmActive;
private boolean messageHasBeenSent;

当我用 Vaadin CRUD API 展示这个时。

GridCrud<Alarm> alarmCrud = new GridCrud<>(Alarm.class);
CrudFormFactory<Alarm> crudFormFactory = new DefaultCrudFormFactory<Alarm>(Alarm.class);
alarmCrud.setCrudFormFactory(crudFormFactory);
alarmCrud.getGrid().setColumns("name", "email", "message", "alarmActive", "messageHasBeenSent", "sa0Min", "sa0Max", "sa1Min", "sa1Max", "sa1dMin", "sa1dMax", "sa2dMin", "sa2dMax", "sa3dMin", "sa3dMax", "a0Min", "a0Max", "a1Min", "a1Max", "a2Min", "a2Max", "a3Min", "a3Max");
alarmCrud.getGrid().setColumnReorderingAllowed(true);
crudFormFactory.setUseBeanValidation(true);
crudFormFactory.setVisibleProperties(new String[] { "name", "email", "message", "alarmActive", "messageHasBeenSent", "sa0Min", "sa0Max", "sa1Min", "sa1Max", "sa1dMin", "sa1dMax", "sa2dMin", "sa2dMax", "sa3dMin", "sa3dMax", "a0Min", "a0Max", "a1Min", "a1Max", "a2Min", "a2Max", "a3Min", "a3Max" });
        

当我尝试在 CRUD 数据库中添加新行时，我得到了这个视图。

问题：

我想让两个复选框在同一行吗？我怎样才能用这个当前的实体做到这一点？

我知道有一种方法可以在同一行设置多个复选框，但该方法不正确，因为它取决于每个复选框都需要成为一个实体，并且该实体未连接到我的数据库 CRUD 实体。

在下面这个例子中，他使用了

@ManyToMany
@Fetch(FetchMode.JOIN)
@NotNull
private Set<Group> groups = new HashSet<>();

在一行中创建多个复选框。问题是实体Group 与实体User 不同，如果它们以空开头。

在这里，他将groupService 加载到复选框提供程序中，这会在同一行上创建多个复选框。

crud.getCrudFormFactory().setFieldProvider("groups", new CheckBoxGroupProvider<>("Groups", groupService.findAll(), Group::getName));

https://github.com/alejandro-du/crudui/blob/master/demo/src/main/java/org/vaadin/crudui/demo/ui/view/SimpleCrudView.java

Answer 1

我添加了一个组件作为列。

为此，您需要删除

alarmCrud.getGrid().setColumns(...)

您要分组的列，并将它们添加到 HorizontalLayout rendererd as column 中。您可以在 Horizo​​ntalLayout 中添加 CheckBox，手动绑定值。

Answer 2

也许有更好的解决方案，但一种解决方法是使用 JavaScript 在 Message 字段后添加换行符。这应该具有使两个复选框在同一行中的效果。

为此，您需要添加一个编辑器打开的侦听器，在其中执行以下代码以添加换行符

com.vaadin.flow.component.UI.getCurrent().getPage()
        .executeJs("formLayout = document.getElementsByTagName('vaadin-form-layout')[0];"
                + "var br = document.createElement('br');"
                + "formLayout.insertBefore(br, formLayout.children[3]);");