Ag-grid多系细胞含量

Question

我尝试使用此解决方案，但对我而言不起作用，它的正确大小调整了列的高度，但未包装 文本。Ag-Grid-多行文本行

    var gridOptions = {
    columnDefs: columnDefs,
    rowSelection: 'multiple',
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    enableRangeSelection: true,
    suppressRowClickSelection: true,
    animateRows: true,
    onModelUpdated: modelUpdated,
    debug: true,
    autoSizeColumns:true,
    getRowHeight: function(params) {
        // assuming 50 characters per line, working how how many lines we need
        return 18 * (Math.floor(params.data.zaglavie.length / 45) + 1);
    }
};

function createRowData() {

    return gon.books;
}

在此处输入图片说明

Answer 1

我专门针对getRowHeight您的gridOptions. 有一个更好的方法。

ag-grid 可以自动计算您的列的正确高度。

从文章：

自动行高

可以根据单元格的内容设置行高。为此，请autoHeight=true在应计算高度的每一列上设置。例如，如果一列在多行上显示描述文本，那么您可以选择仅选择该列来确定行高。

Answer 2

如果您遵循Docs上的“ Row Height More Complex Example” ，它说您需要添加一些CSS以使单词自动换行。因此，在您的colDef中为您受影响的列（如果我正确遵循的话，为zaglavie）中添加cellStyle: {'white-space': 'normal'}。这是一个演示的plnkr。

Answer 3

啊! resetRowHeights()!!

正如其他人指出的那样，文档允许您使用autoHeight. 然而，当我autoHeight在 my 中实现时，我columnDefs最终得到了太高的行高。为了让它们正确调整大小，您还应该resetRowHeights()通过网格 APIgridReady函数调用。

例子

columnDefs.ts <- 导入 gridOptions

export const columnDefs: Array<any> = [
  {
    headerName: 'Artifact Name',
    field: 'name'
  }, {
    headerName: 'Artifact Type',
    field: 'artifactType',
    width: 40,
    sortable: true
  }, {
    headerName: 'Description',
    field: 'description',
    cellStyle: {'white-space': 'normal'},
    autoHeight: true // <- Yay!
  }
];

X.component.html

      <ag-grid-angular
              class="ag-theme-balham"
              (gridReady)="onGridReady($event)"
              [gridOptions]="gridOptions">
      </ag-grid-angular>

X.component.ts

  onGridReady(grid) {
    grid.api.sizeColumnsToFit();
    grid.api.resetRowHeights();
  }

编辑

我正在使用 Angular 8。

另一条建议——如果你正在加载行，那么确保你的重置是在承诺返回之后。这可以防止无用的水平滚动条。在此处查看更多相关信息：https : //stackoverflow.com/a/57678686/3769076