说明工具提示Vaadin网格标题单元

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

是否有申请说明，以头的单元格比我描述了一个更好的办法？如果没有，是否有一种方法可以在标题单元格包含组件时正确工作？

来源

2016-02-15 Markus Yrjölä

基于从kukis答案，我设法拿出不需要任何JavaScript一个简单的解决方案。而不是添加一个Label组件到标题单元格的，我手动添加的div元素StaticCell.setHtml()，并在其上设置标题属性：

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

来源

2016-02-25 21:34:38

这很好。 TIL。 – kukis

Upvote。我与你有同样的问题，因此为此功能创建了一个[Enhancement ticket]（增强权证）（https://dev.vaadin.com/ticket/19637#ticket），因为我相信在Vaadin核心中实现这个功能相当低。在此之前，您的解决方法将完成这项工作。谢谢。 – peterh

体面的解决方法，但本地浏览器工具提示看起来不太好。 –

好，因为电网本身并不支持它，你可以随时使用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自己的网格，但它是一种成本较高的方式。

另一种解决方案是，你已经尽力了，把标签在一列和传播标签，点击事件到电网。

来源

2016-02-20 15:39:26 kukis

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

我用我自己的utillity finction：

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

来源

2017-09-27 01:17:48

说明工具提示Vaadin网格标题单元

回答

相关问题