Question

我尝试使用此解决方案，但它对我不起作用，正确调整列高度，但文字没有被删除。 Ag-Grid - Row with multiline text

    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;
}

enter image description here

Answer 1

如果您按照＆＃34;行高更复杂的例子＆＃34;在Docs上找到它，它表示你需要添加一些css来使文字换行。因此，在受影响列的colDef中（如果我正确关注，则为zaglavie）添加cellStyle: {'white-space': 'normal'}。这是一个展示的plnkr。

Answer 2

您可以尝试插入多行。它对我有用。

<style>.cell-wrap {
  white-space: normal !important;
}

</style>

<html>

<body>
  <script>
    //inside the function, columnDefs.
    (function() {
      var gridOptions = {
        columnDefs = [{
          headerName: "Name",
          field: "yourField",
          cellRenderer: 'showMultiline',
          cellClass: 'cell-wrap',
          autoHeight: true
        }]
      };

    })();

    function showMultiline() {}
    showMultiline.prototype.init = function(params) {
      //check if the field has a value
      var cellBlank = !params.value;
      if (cellBlank) {
        return null;
      }

      this.ui = document.createElement('div');
      this.ui.innerHTML = '<div style="font-weight: bold;">' +
        params.value. {
          object
        } +
        "<br/>" +
        params.value. {
          anotherobject
        } +
        "<br/>" +
        '</div>';
    };
    showMultiline.prototype.getGui = function() {
      return this.ui;
    }
  </script>
</body>

</html>

Answer 3

我特别回应您getRowHeight中的gridOptions字段。有更好的方法。

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

来自the article：

自动行高

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

Answer 4

我测试了Jarod Moser's answer的plnkr中提供的解决方案，但是由于单词太长和不幸的空格位置而导致一些问题。

我最终用空格将字符串分解，并实际上检查了需要多少行。但是，此解决方案并不完美，因为某些角色占用的水平空间比其他角色少。

我的单元格为200px宽，一行中可以容纳大约35个字符。代码：

gridOptions = {
    // Your other stuff
    getRowHeight: function (params) {
        let newlines = 0;
        var words = params.data.LongestString.split(' ');
        let current = words[0].length;
        while (current > 35) {
            newlines += 1;
            current = current - 35;
        }
        for (var i = 1; i < words.length; i++) {
            let test = current + words[i].length + 1;
            if (test > 35) {
                newlines += 1;
                current = words[i].length;
                while (current > 35) {
                    newlines += 1;
                    current = current - 35;
                }
            }
            else {
                current = test;
            }
        }
        //One line needs 27px, with a line-height of 1.5, every additional line needs 17px.
        return 27 + newlines * 17; 
    },

};

public myColumnDefs = [
    { headerName: 'Header1', field: 'SomeProperty', width: 120 },
    {
        headerName: 'SomeHeader',
        field: 'LongestString',
        width: 200,
        cellStyle: { 'white-space': 'normal', 'line-height': 1.5 } //This is important!!!
    }
    { headerName: 'Header3', field: 'OtherProperty', width: 120 },
];

Answer 5

啊！ resetRowHeights()！

正如其他人所指出的那样，文档允许您使用autoHeight指定希望具有不同高度的列。但是，当我在autoHeight中实现columnDefs时，结果行高度太高。为了使它们正确调整大小，您还应该通过网格API resetRowHeights()函数调用gridReady。

示例

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();
  }

编辑

我正在使用Angular8。

另一条建议-如果您要加载行，请确保在promise返回后进行重置。这样可以防止无用的水平滚动条。在此处查看有关此内容的更多信息：https://stackoverflow.com/a/57678686/3769076

Ag-grid多线细胞含量

5 个答案: