Vaadin Grid标题单元格的

Question

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

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

Answer 1

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

  

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

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

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

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