Vaadin 7实现网格单元格文本溢出时显示提示框

遇到这种情况太正常了——Vaadin 7的getColumnWidth()在列使用自动宽度或相对宽度时，确实会返回-1.0，因为服务器端根本拿不到客户端渲染后的实际像素宽度。要判断单元格文本是否被截断，必须借助客户端的DOM检测逻辑，毕竟只有客户端才知道文本实际渲染的宽度和单元格的可视宽度。

下面是具体的解决方案：

核心思路 #

判断单元格文本是否截断的关键是对比两个客户端DOM属性：

• cell.scrollWidth：文本内容的实际总宽度（包括被截断隐藏的部分）
• cell.clientWidth：单元格的可视宽度

当scrollWidth > clientWidth时，说明文本被截断，此时给单元格添加title属性（Vaadin会自动把这个属性识别为tooltip）；否则移除该属性即可。

实现步骤 #

1. 注入客户端JavaScript检测逻辑 #

在Grid加载完成后，注入JS代码来检测所有单元格，同时处理动态更新场景（比如滚动、排序、分页后重新渲染的情况）：

Grid grid = new Grid();
// 这里假设你已经完成了Grid的列配置和数据绑定

grid.addAttachListener(event -> {
    // 注入JavaScript逻辑
    JavaScript.eval(
        // 获取Grid对应的DOM元素
        "var gridDom = document.getElementById('" + grid.getId() + "');" +
        // 定义复用的检测函数
        "function checkTruncatedCells() {" +
        "   var cells = gridDom.querySelectorAll('.v-grid-cell-content');" +
        "   cells.forEach(function(cell) {" +
        "       if (cell.scrollWidth > cell.clientWidth) {" +
        "           cell.setAttribute('title', cell.textContent.trim());" +
        "       } else {" +
        "           cell.removeAttribute('title');" +
        "       }" +
        "   });" +
        "}" +
        // 页面加载完成后首次检测
        "checkTruncatedCells();" +
        // 处理滚动事件（滚动时会渲染新的单元格）
        "gridDom.addEventListener('scroll', checkTruncatedCells);" +
        // 处理列宽调整事件
        "gridDom.addEventListener('resize', checkTruncatedCells);" +
        // 监听Vaadin Grid的数据更新事件（比如排序、分页后）
        "Vaadin.event.addListener(gridDom, 'dataUpdated', checkTruncatedCells);"
    );
});

2. 注意事项 #

• 单元格类名：确保.v-grid-cell-content是Vaadin 7 Grid单元格内容的正确类名，如果你的Grid有自定义样式，可能需要调整选择器（比如改用.v-grid-cell）。
• 性能优化：如果Grid数据量极大，每次滚动都遍历所有单元格可能有性能开销，可以优化为只检测可视区域内的单元格，不过对于大多数业务场景，基础版本已经足够好用。
• 动态内容：如果单元格内容会动态更新，需要在内容刷新后手动调用checkTruncatedCells()函数，比如通过JavaScript.eval("checkTruncatedCells()")触发重新检测。

为什么服务器端判断不可行？ #

Vaadin 7的服务器端拿不到两个关键信息：

• 文本在客户端实际渲染的宽度（不同字体、字号、浏览器都会影响渲染结果）
• 单元格最终的可视宽度（尤其是自动宽度或响应式宽度的列）

所以必须依赖客户端的DOM属性才能准确判断文本是否被截断。

内容的提问来源于stack exchange，提问作者philjack