Angular ag grid treeView：一种使子列x级深度可编辑的方法，但父列是总和？

我一直在使用Angular的

ng grid

，我试图找出是否有办法使某些行可编辑，这些行是父级的子级，但让父级汇总x级深度的子级的总数？现在，在文档中，我唯一能找到的是，您可以将

columnDef

指定为

editable:true

，这将使每个单元格都可编辑，而这正是我想要的

这棵树看起来像：

Description          Total
Account              [sum of children]
    Sub-account      [sum of children]
        Line Items   [editable input]

以下是我目前正在使用的相关代码：

在component.ts文件中：

constructor() {
    this.defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true
    };

    this.columnDefs = [
      { field: "description", editable: true },
      { field: "fringes", editable: true },
      { field: "total", aggFunc: "sum", editable: true }
    ]
    this.rowData = [
      {
        _id: 1,
        accountHierarchy: ["1100"],
        description: "Script",
        fringes: 50,
        total: 0,
      },
      {
        _id: 2,
        accountHierarchy: ["1100", "1101"],
        description: "Writers",
        fringes: 50,
        total: 111
      },
      {
        _id: 3,
        accountHierarchy: ["1100", "1102"],
        description: "Editors",
        fringes: 50,
        total: 111
      },
      {
        _id: 5,
        accountHierarchy: ["1100", "1101", "1111"],
        description: "Supplies",
        fringes: 50,
        total: 300,
        editable: true
      },
      {
        _id: 6,
        accountHierarchy: ["1100", "1101", "1112"],
        description: "Supplies",
        fringes: 50,
        total: 231,
      },
      {
        _id: 4,
        accountHierarchy: ["1100", "1102", "1113"],
        description: "Writers",
        fringes: 50,
        total: 111
      },
      {
        _id: 7,
        accountHierarchy: ["1200"],
        description: "Cast",
        fringes: 50,
        total: 250,
      },
      {
        _id: 8,
        accountHierarchy: ["1200", "1201"],
        description: "Actors",
        fringes: 50,
        total: 5000,
      },
      {
        _id: 9,
        accountHierarchy: ["1300"],
        description: "Direction",
        fringes: 50,
        total: 500,
      },
    ];
    this.groupDefaultExpanded = -1;
    this.getDataPath = function(data) {
      return data.accountHierarchy;
    };
    this.autoGroupColumnDef = {
      headerName: "Account #",
      cellRendererParams: { suppressCount: true }
    };
  }

以下是我的相关html：

<ag-grid-angular
   #agGrid
   style="width: 100%; height: 100%;"
   id="myGrid"
   class="ag-theme-balham"
   [modules]="modules"
   [columnDefs]="columnDefs"
   [rowData]="rowData"
   [treeData]="true"
   [animateRows]="true"
   [getDataPath]="getDataPath"
   [defaultColDef]="defaultColDef"
   [rowDragManaged]="true"
   [autoGroupColumnDef]="autoGroupColumnDef"
   (gridReady)="onGridReady($event)"
   [enableRangeSelection]="true"
   [allowContextMenuWithControlKey]="true"
   [getContextMenuItems]="getContextMenuItems"
 ></ag-grid-angular>

---

使用树状视图可以这样做吗？

您使用columnDefeditable属性的方法是正确的。可编辑可以是布尔值或回调函数（IsColumnFunc类型定义）。该函数采用以下参数：

export interface IsColumnFuncParams {
    node: RowNode;
    data: any;
    column: Column;
    colDef: ColDef;
    context: any;
    api: GridApi | null | undefined;
    columnApi: ColumnApi | null | undefined;
}

通过这种方式，您可以使用此可用信息来确定每一行是否可编辑

例如：

ExampleColumnDef = {
    editable: (params) => params.data?.editable
}

---

干杯

你找到解决办法了吗？我可以告诉你怎么做。