在单元格中显示多行文本，可以在 Ag Grid 中展开折叠？答案

【问题标题】：Display multiline text in cell that can expand collapse in Ag Grid?在单元格中显示多行文本，可以在 Ag Grid 中展开折叠？
【发布时间】：2020-03-24 07:18:37
【问题描述】：

有什么方法可以在 AG Grid 中创建多行文本，并且可以是展开/折叠功能（类似于分组行）。

我正在寻找的示例可以在 RapidMiner - 统计功能中找到：

【问题讨论】：

标签： ag-grid ag-grid-angular ag-grid-ng2

【解决方案1】：

这是可能的。在我的示例中，我定义了 dataRenderer 来处理自定义单元格渲染。

额外的“切换”列用于触发将更改所选单元格内容并使用函数toggleRenderer 应用行高的事件。

{
  headerName: "Toggle",
  field: " ",
  hide: false,
  width: 80,
  cellRenderer: toggleRenderer //action button for expand/collapse action
}

自定义按钮在网格中显示：

  function toggleRenderer(params) {
    params.$scope.toggleRow = toggleRow;
    return '<button ng-click="toggleRow()"> > </button>';
  }

主要折叠/展开动作：

function toggleRow() {
    //get current row
    var row = this.rowNode; 

    //toggle selection
    var selected = !row.selected;

    //change the row height regarding if row is selected or not
    var height = selected ? 75 : 25; 

    //apply changes
    row.setRowHeight(height);
    row.setSelected(selected);

    var params = {
      force: true,
      rowNodes: [row]
    };

    //update display
    $scope.gridOptions.api.refreshCells(params);
    $scope.gridOptions.api.onRowHeightChanged();
  }

重要部分代码，负责多行显示：

{
   ...
   cellRenderer: dataRenderer
}

function dataRenderer(params) {
    if (params.node.selected) {
      //you can place here any display (chart or other) that will be shown on expand
      return (
        "<div>Row1: " +
        params.data.price +
        ...
        "<div>RowXX:" +
        params.data.price +
        "</div>"
      );
    } else {
      return params.data.price;
    }
}

Here is the working example

【讨论】：