Vaadin Grid header 个单元格的描述工具提示

Question

我想定义网格 header 单元格的描述，类似于 AbstractComponent.setDescription(String description) 的工作方式（即鼠标悬停时显示的工具提示）。由于 Grid 本身不支持这一点，我尝试在 header 单元格中添加一个 Label 组件，然后在标签上使用 setDescription()。我可以获得像这样工作的信息工具提示，但缺点是单击标签组件不会触发排序。如果我想对列进行排序，我需要单击标签组件右边缘和列边框之间非常狭窄的区域上的 header 单元格，排序指示器将显示在该区域。如果你看下面的截图，突出显示的区域是标签组件，为了触发排序，用户需要点击组件右侧的space。

有没有比我描述的更好的方法来将描述应用于 header 单元格？如果没有，当 header 单元格包含一个组件时，有没有办法使排序正常工作？

Answer 1

好吧，由于 Grid 本身不支持它，因此您始终可以使用 JavaScript 来实现所需的行为。 SSCCE:

private final String SCRIPT;
{
    StringBuilder b = new StringBuilder();
    b.append("var grid = document.getElementById('mygrid');\n");
    b.append("var child = grid.getElementsByClassName('v-grid-tablewrapper')[0];\n");
    b.append("child = child.firstChild.firstChild.firstChild;\n");
    b.append("child.childNodes[0].title='Hello world';\n");
    b.append("child.childNodes[1].title='Hello world 2';\n");
    b.append("child.childNodes[2].title='Hello world 3';\n");
    SCRIPT = b.toString();
}

@Override
protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    Grid grid = new Grid();
    grid.addColumn("to");
    grid.addColumn("the");
    grid.addColumn("moon");
    grid.addRow("1","2","3");
    grid.addRow("d","v","w");
    grid.addRow("g","s","h");
    grid.setId("mygrid");
    setContent(layout);
    layout.addComponent(grid);
    JavaScript.getCurrent().execute(SCRIPT);
}

另一种可能性是基于 Vaadin 团队提供的网格在 GWT 中开发自己的网格，但这是一种成本更高的方法。

另一种解决方案是，如您所试，将标签放在列中并将标签单击事件传播到网格。

Answer 2

根据 kukis 的回答，我想出了一个不需要任何 JavaScript 的更简单的解决方案。我没有将 Label 组件添加到 header 单元格中，而是使用 StaticCell.setHtml() 手动添加了一个 div 元素，并在其上设置了 title 属性：

@Override
protected void init(VaadinRequest request) {
    Grid grid = new Grid();
    grid.addColumn("to");
    grid.addColumn("the");
    grid.addColumn("moon");

    Grid.HeaderRow headerRow = grid.getDefaultHeaderRow();
    headerRow.getCell("to").setHtml("<div title='Hello world'>to</div>");
    headerRow.getCell("the").setHtml("<div title='Hello world 2'>the</div>");
    headerRow.getCell("moon").setHtml("<div title='Hello world 3'>moon</div>");

    grid.addRow("1","2","3");
    grid.addRow("d","v","w");
    grid.addRow("g","s","h");

    setContent(new VerticalLayout(grid));
}

Answer 3

我使用自己的实用功能：

public static Grid setHeaderCellDescription(Grid grid, int rowIndex, String property, String description) {
    Grid.HeaderCell cell;
    String cellHeader = "<span title=\"%s\">%s</span>";
    cell = grid.getHeaderRow(rowIndex).getCell(property);
    cell.setHtml(String.format(cellHeader, description, cell.getText()));
    return grid;
}

如果需要，您可以添加一些额外的检查（单元格和行号的存在）。

或其他变体 - 而不是 setHtml 使用 cetComponent。

Grid.HeaderCell cell = grid.getHeaderRow(rowIndex).getCell(property);
Label newLabel = new Label(cell.getText());
newLabel.setDescription(description);
cell.setComponent(newLabel);

Answer 4

添加到 Vaadin 8.4.0 的功能

在 Vaadin 8.4.0 中添加到网格的功能。

门票： https://github.com/vaadin/framework/pull/10489

发行说明： https://vaadin.com/download/release/8.4/8.4.0/release-notes.html

Grid headers and footers now support tooltips.

Answer 5

Vaadin 23 更新：您可以使用自己的 Component 作为列 header，方法如下：com.vaadin.flow.component.grid.Grid.Column#setHeader(com.vaadin.flow.component.Component).

所以你可以使用例如一个 Span，标题为：

Span headerComponent = new Span();
headerComponent.setText("Your header text");
headerComponent.getElement().setProperty("title", "Your tooltip text");
column.setHeader(headerComponent);

Vaadin Grid header 个单元格的描述工具提示

Description tooltips for Vaadin Grid header cells

java

vaadin

添加到 Vaadin 8.4.0 的功能