数据树服务器端模式下的 Ag-grid 编辑组

Question

问题：

在服务器端数据树模式下，组行中的单元格不可编辑。我基于此文档构建网格 - https://www.ag-grid.com/javascript-grid-server-side-model-tree-data .Example:

https://plnkr.co/edit/t1uZ4V3cUs6IHZDsPKYI?p=preview

在此示例中，组行不可编辑，尽管所有列都具有 'editable: true' 属性

this.columnDefs = [
              { field: "jobTitle", editable: true },
              { field: "employmentType", editable: true }
        ];
        this.defaultColDef = {
          width: 240,
          resizable: true
        };
        this.autoGroupColumnDef = {
          cellRendererParams: {
            innerRenderer: function(params) {
              return params.data.employeeName;
            }
          }
        };
        this.rowModelType = "serverSide";
        this.isServerSideGroup = function(dataItem) {
          return dataItem.group;
        };
        this.getServerSideGroupKey = function(dataItem) {
          return dataItem.employeeId;
        };

预期：

所有行和单元格（组列除外）都应该是可编辑的。示例（通常没有服务器端模型的数据树）：

https://plnkr.co/edit/HCmkdUJ7VPPoug7pOct3?p=preview

 this.columnDefs = [{ field: "jobTitle", editable: true }, { field: "employmentType", editable: true }];

注意在这两种情况下，所有列都具有“可编辑：真”属性，而在服务器端它不起作用

问题：

我应该怎么做才能编辑所有行（即使在组行中）？

Answer 1

你快到了 - 缺少的是每个可编辑单元格的 cellEditor 定义，如下例所示：

{ field: "jobTitle", editable: true, cellEditor: 'agLargeTextCellEditor' }

还请记住，您将无法直接修改顶级值（用于分组），因为这将允许您仅编辑组的子节点。

用于单元格内联修改的可用 ag-grid 编辑器列表：

• agTextCellEditor - 默认应用简单文本编辑器
• agPopupTextCellEditor - 'agTextCellEditor' 包装在弹出窗口中
• agLargeTextCellEditor - 用于多行文本的文本弹出窗口
• agSelectCellEditor - 下拉编辑器
• agPopupSelectCellEditor - 'agSelectCellEditor '包装在弹出窗口中
• agRichSelectCellEditor - 使用行虚拟化的丰富选择弹出窗口，在 ag-Grid-Enterprise 版本中可用

从 ag-grid 版本 7.2.x 开始可以编辑分组单元格。属性enableGroupEdit需要设置为true才能开启该功能。

<ag-grid-angular
      ...
      [enableGroupEdit] = "true"
      ...
    ></ag-grid-angular>