当前位置：文江博客话题详情

仅当 AG-Grid 中的列内容溢出时才显示工具提示

发布于 2025-01-12 19:55:11 字数 128 浏览 0 评论 0原文

我有一个专栏，内容可以是几个字，也可以是一长段。 AG-Grid 自动处理带有 3 个点的列的溢出，但我希望做的是显示包含该列的完整内容的工具提示......但仅在列实际溢出时显示工具提示。

这可能吗？

提前致谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雄赳赳气昂昂 2025-01-19 19:55:11

由于不可能检测单元格内容是否超过单元格尺寸（除非有一些奇特的方法来读取渲染元素的宽度），我认为最好的方法（仍然不完美，但在大多数情况下有效）是使用文本的长度（按照 kifni41 的建议），但计算最大文本长度（工具提示显示的长度）基于当前列宽、首选列宽（由 AG 网格计算得出的列宽）以及该特定列中出现的文本的最大长度。我的想法是使用比例来计算：

实际列宽/首选列宽=超过文本长度阈值/列中出现的最大文本长度

现在我的工具提示组件实际上并不使用 tooltipValueGetter，而是从 params 读取所有数据，但同时它会看到列的其余部分数据和方法，并且可能看起来像这样：

const longValueTooltip = params => {
  const getColData = index => {
    return params.api.getDisplayedRowAtIndex(index);
  };
  const data = getColData(params.rowIndex).data;
  const preferredWidth = params.columnApi.columnModel.autoWidthCalculator.getPreferredWidthForColumn(params.column);
  const contentExceedsCell: boolean = preferredWidth > params.column.actualWidth;
  const maxValueLength = () => {
    let index: number = 0;
    let retval: number = 0;
    while (getColData(index) !== undefined) {
      let currentValLength: number =
        getColData(index).data[params.colDef.field].length;
      retval = currentValLength > retval ? currentValLength : retval;
      index++;
    }
    return retval;
  };
  const exceedingValueLength: number = Math.floor((params.column.actualWidth * maxValueLength()) / preferredWidth);
  if (!contentExceedsCell || data[params.colDef.field].length < exceedingValueLength) {
    return "";
  }
  else {
    // render your tooltip here, like this
    return (<div>{data[params.colDef.field]}</div);
  }
}

我不使用任何附加参数的原因是我想创建一个通用工具提示，该提示将由默认 colDef 应用，但仅在必要时才显示。

Since it is not possible to detect if cell contents are exceeding the cell dimensions (unless there is some fancy way do read the rendered elements widths), I think the best approach (still not perfect, but works most of the time) is to use the length of the text (as suggested by kifni41), but calculate the maximum text length (over which the tooltip is displayed) based on the current column width, the preferred column width (one, that is calculated by the AG Grid), and the maximum length of the text that appears in this particular column. My idea is to calculate it using a proportion:

actual column width / preferred column width = exceeding text length threshold / max text length that appears in column

Now my tooltip component does not actually use the tooltipValueGetter, rather reads all data from params, but at the same time it sees the rest of the column data and methods, and could look something like this:

const longValueTooltip = params => {
  const getColData = index => {
    return params.api.getDisplayedRowAtIndex(index);
  };
  const data = getColData(params.rowIndex).data;
  const preferredWidth = params.columnApi.columnModel.autoWidthCalculator.getPreferredWidthForColumn(params.column);
  const contentExceedsCell: boolean = preferredWidth > params.column.actualWidth;
  const maxValueLength = () => {
    let index: number = 0;
    let retval: number = 0;
    while (getColData(index) !== undefined) {
      let currentValLength: number =
        getColData(index).data[params.colDef.field].length;
      retval = currentValLength > retval ? currentValLength : retval;
      index++;
    }
    return retval;
  };
  const exceedingValueLength: number = Math.floor((params.column.actualWidth * maxValueLength()) / preferredWidth);
  if (!contentExceedsCell || data[params.colDef.field].length < exceedingValueLength) {
    return "";
  }
  else {
    // render your tooltip here, like this
    return (<div>{data[params.colDef.field]}</div);
  }
}

The reason why I am not using any additional params is that I wanted to create a universal tooltip that would be applied by the default colDef, but then it displays only when necessary.

回复收藏 0 原文

风追烟花雨 2025-01-19 19:55:11

您可以在 ag-grid 列定义中使用 tooltipValueGetter 属性。所以它可能是这样的，如果它返回 null 它不会显示任何工具提示。

        tooltipValueGetter: function(p){
            console.log(p);
            if (p.value.length > 20) {
                return p.value;
            }
            return null;
        },

You can use tooltipValueGetter property in you ag-grid columns definition. so it could be something like this, if it's returns null it will not show any tooltip.

        tooltipValueGetter: function(p){
            console.log(p);
            if (p.value.length > 20) {
                return p.value;
            }
            return null;
        },

回复收藏 0 原文

~没有更多了~