Vaadin Grid标题单元格的描述工具提示

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

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

Answer 1

function已添加到Vaadin 8.4.0中

在Vaadin 8.4.0中添加到Grid的function。

票证： https ： //github.com/vaadin/framework/pull/10489

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

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

Answer 2

基于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("
to
"); headerRow.getCell("the").setHtml("
the
"); headerRow.getCell("moon").setHtml("
moon
"); grid.addRow("1","2","3"); grid.addRow("d","v","w"); grid.addRow("g","s","h"); setContent(new VerticalLayout(grid)); } 

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

我使用自己的utillity finction：

 public static Grid setHeaderCellDescription(Grid grid, int rowIndex, String property, String description) { Grid.HeaderCell cell; String cellHeader = "%s"; 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);