Ag Grid 多行单元格内容答案

【问题标题】：AgGrid multiline cell contentAg Grid 多行单元格内容
【发布时间】：2017-08-31 23:28:18
【问题描述】：

我尝试使用此解决方案，但它对我不起作用，它正确调整列高，但文本未换行。 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;
}

【问题讨论】：

标签： javascript ag-grid multiline

【解决方案1】：

如果您遵循Docs 上的“行高更复杂示例”，它表示您需要添加一些 css 以使文字换行。因此，在您受影响列的 colDef 中（如果我没有正确理解，则为 zaglavie）添加 cellStyle: {'white-space': 'normal'}。这是一个演示的plnkr。

【讨论】：

我应该怎么做如果我的单元格内容不是文本而是一个标签组件。它的高度是根据项目动态变化的。（对于 cellRenderer 或 cellEditor）@Jarod Moser
也许你也知道如何回答这个问题：stackoverflow.com/questions/65518883/…
这个空白解决方案在中间破坏了单词......不幸的是，这个解决方案很糟糕。
我也遇到了这个问题。您真正要防止单词在中间中断的是：cellStyle: { wordBreak: "normal" } 以防止单词中断。 whiteSpace: "norma"lportion 可以包括在内，但我的理解是它已经由 ag-grid 完成。

【解决方案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>

【讨论】：

【解决方案3】：

我专门回复您gridOptions 中的getRowHeight 字段。有更好的方法。

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

来自the article：

自动行高

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

【讨论】：

也许你也知道如何回答这个问题：stackoverflow.com/questions/65518883/…

【解决方案4】：

我在Jarod Moser's answer 中测试了 plnkr 中提供的解决方案，但由于单词过长和空格放置不当而遇到了一些问题。

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

我的单元格是 200 像素宽，一行 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 },
];

【讨论】：

也许你也知道如何回答这个问题：stackoverflow.com/questions/65518883/…

【解决方案5】：

啊！ resetRowHeights()！！

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

例子

columnDefs.ts

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

【讨论】：

@FaiZalDong 是的，实际上是 Angular 8
也许你也知道如何回答这个问题：stackoverflow.com/questions/65518883/…

【解决方案6】：

如果您不使用自定义单元格渲染器，可以将wrapText 与autoHeight 结合使用。前者在空间足够的情况下自动换行，后者根据单元格内容调整行高。

{
  headerName: "Athlete",
  field: "athlete",
  width: 85,
  wrapText: true,
  autoHeight: true,
},

【讨论】：