标签: vaadin-grid

在新的Vaadin Grid小部件(替代古老的小部件Table)中,如何在列中右对齐数字或其他内容？

我正在使用Vaadin进行产品开发.到目前为止,我们正在使用Vaadin 7.

我们需要在表格形式上显示数据,并根据规则显示图表.用户也可以随时从配置选项修改规则.所以无法定义具有固定数量变量的bean.

在Vaadin 7中,使用容器我们可以创建空容器对象并添加列运行时.但是根据我的知识,在Vaadin 8中并没有允许.

使用7兼容包,它将适用于7格.

scala中的示例我是从dataframe创建容器

def getcontainer(dataframe: Dataset[Row]): IndexedContainer = {

    var container = new IndexedContainer();
/*get number column need to create in data frame. it will be change on evertime based on output dataframe.*/
    val columns = dataframe.columns

    for (x <- columns) {
      try {
        container.addContainerProperty(x, classOf[Any], "");
      } catch {
        case e: NullPointerException =>
          e.printStackTrace()
          println("Column name must not be null")
        case e: Exception =>
          e.printStackTrace()
          println("Some went wrong with dataframe")

      }
    }
return container …

我有以下代码，它应该显示一个可点击的图标，该图标打开一个弹出对话框，读出冗长的笔记。

        this.capacityCommentColumn = this.facilityGrid.addColumn(
                    p -> {
                        if (Strings.isNullOrEmpty(p.getCapacityComment())) {
                            return null;
                        } else {
                            return new ThemeResource("img/note.svg");
                        }
                    },
                    new ImageRenderer<>())
                    .setWidth(80)
                    .setCaption("Note");

        this.facilityGrid.addItemClickListener(new ItemClickListener<MapQueryService.RowResult>() {
            @Override
            public void itemClick(Grid.ItemClick<MapQueryService.RowResult> event) {
                if (event.getColumn() == capacityCommentColumn && !Strings.isNullOrEmpty(event.getItem().getCapacityComment())) {
                    final NoteWindow noteWindow = new NoteWindow();
                    noteWindow.txtDescription.setValue("test");
                    noteWindow.show();
                }
            }
        });

问题是代码不响应点击实际图像，只响应外部。你可以在下面看到这一点。知道是否可以使图像可点击吗？

我现在有这个特殊问题 - 我有一个网格，我试图通过多个过滤器过滤数据。为此，我使用文本框作为过滤条件的输入字段。

我的网格有三列（名字、姓氏、地址），我希望能够一个接一个地链接过滤操作。所有值均取自 MySQL 数据库。

本质上，过滤过程应该是这样的：

FirstName ^ LastName ^ Address

例如，具有三列的网格：

在 First Name 列的过滤器中，我输入了 variables Aa，这将导致表如下所示：

但是，如果我决定输入D姓氏过滤器，它会返回如下结果（忽略第一个过滤器的修改）：

而不是看起来像这样的预期结果：

我通过网格过滤的方式是这样的：

firstNameFilter.addValueChangeListener( e->
    {
        Notification.show(e.getValue());

        ldp.setFilter(desc -> 
        {
            return StringUtils.containsIgnoreCase(desc.getFName(), firstNameFilter.getValue());
        });
    });     
    firstNameFilter.setValueChangeMode(ValueChangeMode.EAGER);

考虑到以前的过滤操作，过滤多列的最佳方法是什么？

在 Vaadin 8 的网格中，双击GridPro. 在 Vaadin 14 Grid Pro 中，默认情况下似乎没有保存/取消按钮。有没有办法启用它？

似乎应该是可能的，因为我们有getEditor().addSaveListener()等等。

作为一个额外的问题，每当我在网格中执行任何操作时，它似乎只会调用addCancelListener(). 是否有一个原因？当然，主要问题是是否可以在GridPro

我想向我的 vaadin 网格组件添加一个可排序的日期列。不幸的是，它不适用于格式化日期，我认为格式化日期对象后它只是一个字符串，因此使用此列进行排序无法正常工作，但无论如何我需要一个解决方案。我已经尝试过这个解决方案，但它也不起作用：

    grid.addColumn(new LocalDateTimeRenderer<>(MyObject::getCreated,
                DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT, FormatStyle.MEDIUM)
                        .withLocale(Locale.GERMANY).withZone(ZoneId.of("Europe/Paris"))))
                            .setHeader("Created").setSortProperty("created");

你还有别的想法吗？

谢谢

我最近收到了一个 Vaadin 7 项目，其中之前的开发人员使用 Vaadin 7 Grid grid.addRow(obj) 向网格添加行。现在，在 Vaadin 8 Grid 中添加了 grid.setItems(? Collection ?) ，它完全清除了 grid.setItems() 上网格中的数据。我观看了 Vaadin 的所有 YouTube 视频和所有堆栈溢出页面，但没有找到答案。

我确实发现这个论坛有很多人有同样的问题： https://vaadin.com/forum# !/thread/15724440

这是我的工作，我并不为此感到自豪。基本上添加一个 ArrayList 作为我的示例使用具有名字、姓氏、电子邮件和薪水的 Person 类。

@SpringUI(path = "/person")
@Theme("valo")
public class PersonForm extends UI{

    @Autowired
    PersonService personService;
    List<Person> entries = new ArrayList<Person>();
    private TextField firstName = new TextField("First Name");
    private TextField lastName = new TextField("Last Name");
    private TextField email  = new TextField("Email Address");
    private TextField salary  = new TextField("Salary");
    private Person person = new …

例如，我有一个网格，我让用户使用 Vaadin 8 为某些数据定义颜色，我也想在 Vaadin 14 / Flow 中提供它。

在 Vaadin 8 中，我做了（对于每种样式/数据类型）：

Page.getCurrent().getStyles()
    .add(".MyCustomTheme .v-grid-cell." + cssName + " { background-color:" + userSelectedColor + "; }");

然后在网格代码中我会这样做：

addColumn(myColumn).setStyleGenerator(cssName);

在 Vaadin 14 / Flow 我有：

addColumn(myColumn).setClassNameGenerator(cssName);

但是我似乎无法弄清楚如何以编程方式更改 cssName 的 css 值。本质上，我如何在 Java 代码中注入我的 css 的第一部分？

只是补充一下，我无法做任何事情，如下所示：https : //vaadin.com/docs/v14/flow/element-api/tutorial-dynamic-styling当我尝试这样做时，grid.getElement().getStyle().set(...)这将适用于整个表而不是比行。

当您在 Vaadin v21 中创建网格组件并切换到多选模式时，顶部会有一个“全选”复选框。如何禁用它？网格的默认行为似乎不同，因此 Vaadin 版本之间的解决方案也不同。

Grid<Person> grid = new Grid<>(Person.class, false);
grid.setSelectionMode(Grid.SelectionMode.MULTI);
grid.setItems(personRepository.findAll());

在我的 Vaadin 应用程序中，我显示了Grid带有自定义类的项目Transaction。该网格的行为应如下所示：

1. 它应包含一个“操作”列，该列又应包含一个或多个图标。为了简单起见，我们只考虑一个图标。
2. 这些图标中的每一个都应该是可点击的。
3. 单击图标，将使用Transaction当前行的项目执行一些代码。在这里，一个简单的Notification.show().

我设法用以下代码来实现这一点：

private final Grid<Transaction> transactionGrid = new Grid<>(Transaction.class, false);
transactionGrid.setItems(transactionService.getItems());

transactionGrid.addColumn(getActionsRenderer()).setHeader("Actions").setAutoWidth(true);

private ComponentRenderer<Icon, Transaction> getActionsRenderer() {
    final Icon replyIcon = new Icon(VaadinIcon.ENVELOPE);
    return new ComponentRenderer<>(transaction -> {
        replyIcon.addClickListener(event -> Notification.show(transaction.getOrderNumber()));
        return replyIcon;
    });
}

单击该图标会显示一条带有交易的通知orderNumber。问题如下：

该应用程序还提供了一个“重新加载”按钮，它的作用与此类似：

refreshIcon.addClickListener(event -> {
    final List<Transaction> transactions = transactionService.getItems();
    transactionGrid.setItems(transactions);
});

单击刷新图标后，单击该行replyIcon会显示相同数据的三个通知。下次刷新后，它会显示五个，然后是七个，依此类推。

因此，看起来好像每次刷新都会添加两个任何“组件”，它们都注册相同的点击侦听器。调试时，我可以看到有多个ClickEvent，eventBus但我不知道它们来自哪里。