在单元格中显示可以在Ag Grid中展开折叠的多行文字？

Question

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

可以在RapidMiner-统计信息功能中找到我要寻找的示例

Answer 1

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

额外的列“ Toggle”用于触发事件，该事件将更改所选单元格的内容并使用功能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