基于 Ag Grid 的展开与收起

Ag Grid 是一个非常流行的数据表格组件，支持许多高级功能，如行展开。要实现在 Ag Grid 中展开和收起行，可以使用以下步骤：

1. 首先，在 gridOptions 中添加以下代码：

gridOptions: {
  // 其他属性...
  masterDetail: true,
  detailCellRendererParams: {
    detailGridOptions: {
      // 详情页中应该显示的列
      columnDefs: [
        // ...
      ],
      // 详情页中应该显示的数据
      rowData: [
        // ...
      ],
      // 其他属性...
    },
    getDetailRowData: function(params) {
      // 获取详情页中要显示的数据
      params.successCallback(params.data.childData);
    },
  },
},

2. 然后，在需要展开和收起的列上添加以下列定义：

columnDefs: [
  {
    // 其他属性...
    cellRenderer: 'agGroupCellRenderer',
    cellRendererParams: {
      checkbox: true,
      suppressRefresh: true,
      // 在“+”和“-”图标之间添加 html
      innerRenderer: function(params) {
        return `${params.value}`;
      },
    },
  },
  // 其他列定义...
],

3. 最后，在 css 文件中添加以下样式：

.ag-theme-balham .ag-icon-plus:before {
  content: '\f067';
}

.ag-theme-balham .ag-icon-minus:before {
  content: '\f068';
}

这是一个基于 Ag Grid 的展开与收起的简单示例：https://plnkr.co/edit/0Dos1KUEbRfG0sWmnO6q?p=preview