【问题标题】：Description tooltips for Vaadin Grid header cellsVaadin Grid 标题单元格的描述工具提示
【发布时间】：2018-06-09 00:45:09
【问题描述】：

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

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

【问题讨论】：

标签： java vaadin

【解决方案1】：

根据 kukis 的回答，我设法提出了一个不需要任何 JavaScript 的更简单的解决方案。我没有将 Label 组件添加到标题单元格中，而是使用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));
}

【讨论】：

点赞。我和你有同样的问题，因此为此功能创建了一个Enhancement ticket，因为我相信在 Vaadin 核心中实现它是相当容易实现的目标。在那之前，您的解决方法将完成这项工作。谢谢。
不错的解决方法，但本机浏览器工具提示看起来不太好。
是的，确实如此，但在 Vaadin 团队提供适当的解决方案之前，IMO 已经足够了。

【解决方案2】：

Vaadin 8.4.0 添加的功能

在 Vaadin 8.4.0 中添加到 Grid 的功能。

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

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

网格页眉和页脚现在支持工具提示。

【讨论】：

我找不到示例。如何获取 HeaderCell 对象？

【解决方案3】：

好吧，由于 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 中开发自己的网格，但这是一种成本更高的方法。

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

【讨论】：

感谢您的回答！我设法找到了一个更简单的解决方案，但你的回答给了我这个想法，所以 +1

【解决方案4】：

我使用自己的实用函数：

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);

【讨论】：