GWT CellTable 工具提示无法正常工作

Posted 2023-02-26

【中文标题】GWT CellTable 工具提示无法正常工作

【英文标题】：GWT CellTable tooltip not working properly

【发布时间】：2012-10-11 06:14:22

【问题描述】：

我正在使用 CellTable，并且每当我将鼠标悬停在任何单元格上时，我都想显示一个工具提示。 我的代码工作正常，但工具提示没有改变它的位置。 我的意思是，如果我将鼠标悬停在单元格 1 上显示的工具提示上，然后如果我将鼠标悬停在单元格 100 上，工具提示数据会发生变化，但工具提示仍会显示在单元格 1 上。 我正在使用以下代码：

cellTable.addCellPreviewHandler(new Handler<List<String>>() 
  @Override
  public void onCellPreview(CellPreviewEvent<List<String>> event) 
    if ("mouseover".equals(event.getNativeEvent().getType())) 
      Element cellElement = event.getNativeEvent().getEventTarget().cast();

      cellElement.setTitle('cell contents go here.');
    
  

非常感谢任何帮助。 谢谢。

【参考方案1】：

您可以扩展 Column 类并覆盖方法渲染。在渲染方法中，您可以使用属性“title”，用于设置工具提示文本。简单例子：

SampleColumn<T> extends TextColumn<T> 

  @Override
  public void render(Context context, T object, SafehtmlBuilder sb) 
    sb.appendHtmlConstant("<div title=\"" + getTitle(object) + "\">");
    sb.appendEscaped(getValue(object));
    sb.appendHtmlConstant("</div>");
  

  @Override
  public String getValue(T object) 
    return displayedValue;
  

  public String getTitle(T object) 
    return yourTooltipText;
  

使用此代码时，工具提示将恰好靠近目标单元格。

【参考方案2】：

if (cellElement.getParentElement()
              .getFirstChildElement().isOrHasChild(Element.as(event.getNativeEvent().getEventTarget()))
              && cellElement.getTagName().equalsIgnoreCase("span"))

这解决了问题。 感谢 Andrei 和 Alex 的回复。

【参考方案3】：

谢谢大家，我也在寻找解决方案。

使用 A cup of tea 的答案，我创建了一个通用类，可以重复使用它来向任何单元格添加工具提示。它基于装饰器模式。如果它可以帮助某人，请在这里：

public class TooltipCell extends AbstractSafeHtmlCell<String>

    AbstractCell<String> cell;
    private String tooltip;

    public TooltipCell(AbstractCell<String> cell, String tooltip)
    
        super(SimpleSafeHtmlRenderer.getInstance(), BrowserEvents.CLICK, BrowserEvents.KEYDOWN);
        this.cell = cell;
        this.tooltip = tooltip;
    

    @Override
    protected void render(com.google.gwt.cell.client.Cell.Context context, SafeHtml data, SafeHtmlBuilder sb)
    
        sb.appendHtmlConstant("<div title=\"" + tooltip + "\">");
        cell.render(context, data.asString(), sb);
        sb.appendHtmlConstant("</div>");
    

    @Override
    public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater)
    
        cell.onBrowserEvent(context, parent, value, event, valueUpdater);
    

那么可以这样使用：

myColumn = new Column<MyObject, String>(new TooltipCell(new ButtonCell(), "tooltip text"))
    
        @Override
        public String getValue(CurrencyDTO object)
        
            return "button text";
        
    ;

【参考方案4】：

此解决方案有效：

cellTable.addCellPreviewHandler(new Handler<List<String>>() 
  @Override
  public void onCellPreview(CellPreviewEvent<List<String>> event) 
    if ("mouseover".equals(event.getNativeEvent().getType())) 
      cellTable.getRowElement(event.getIndex()).getCells().getItem(event.getColumn()).setTitle('cell contents go here.');
    
  

【讨论】：

嗨安德烈，你确定这有效吗？因为它不适合我。我已经在我的单元格表的每个单元格上放置了一个跨度。 ABC，这里 ABC 显示在单元格上。我使用 span 的属性向我的单元格发送了一些附加信息。您是否认为这可能导致我的工具提示行为异常。谢谢

我测试了它——它在我的 CellTable 中运行良好。请注意，attribute="value" 不是标准的 HTML，因此它会被浏览器忽略，甚至可能在渲染之前被删除。确保您没有在跨度上设置标题 - 它们会干扰单元格上的标题。您应该使用标准的 TextCell。

【参考方案5】：

cellTable.addCellPreviewHandler(new Handler<List<String>>() 
  @Override
  public void onCellPreview(CellPreviewEvent<List<String>> event) 
    if ("mouseover".equals(event.getNativeEvent().getType())) 
      cellTable.getRowElement(event.getIndex()).getCells().getItem(event.getColumn()).setTitle('cell contents go here.');
    
  

Andrei 的解决方案效果很好，但应该修复一个错误：

cellTable.getRowElement(event.getIndex() - cellTable.getPageStart()).getCells().getItem(event.getColumn()).setTitle('cell contents go here.');