ag-grid 列文本截断问题答案

【问题标题】：ag-grid column text truncating issueag-grid 列文本截断问题
【发布时间】：2019-01-04 05:41:05
【问题描述】：

想要根据文本呈现列宽。跨越列的最小宽度（200px）后，很少有字符丢失。

注意：列是动态加载的，所以我不能为每一列添加宽度属性。

我正在使用 Ag-Grid 企业版

提前感谢您。

【问题讨论】：

给我们看一段代码

标签： javascript angularjs ag-grid

【解决方案1】：

不完全是你想要做的，我不认为，但另一种选择是让文本截断并让它在鼠标悬停时显示：

  agGridColumnDef.cellRenderer = function(params) {
    return "<span title='" + params.value + "'>" + params.value + "</span>";
  };

【讨论】：

【解决方案2】：

你不能。您必须在columnDef中预设列宽的值

const columnDefs: Array<ColDef | ColGroupDef> = [
  // ...
  {
    // ...
    width: number,
  }
];

您还可以在列定义中包含cellStyle 或cellClass 属性。

您可以在此处查看 API：https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid/src/ts/entities/colDef.ts

【讨论】：

【解决方案3】：

我认为您有几个选择。

1) 在渲染前设置列宽。在渲染网格之前，循环浏览您的数据对象以获得将在网格中显示的每个元素的最大长度，然后相应地设置您的 columnDefs。要编辑 columnDefs，您需要将其设为变量，而不是常量，然后您只需编辑对象数组。请参阅How to change value of object which is inside an array using JavaScript or jQuery? 这种方法会在计算宽度时减慢初始渲染速度。

2) 渲染后设置列宽。渲染网格后，使用 gridApi.setColumnWidth() 方法。 https://www.ag-grid.com/javascript-grid-column-api/

onGridReady(params) {
  params.columnApi.setColumnWidth('someColumn', someColumnWidth, true);
}

使用这种方法，网格将开始渲染得更快，但用户可能会看到列宽调整。

【讨论】：