ag-grid treeView: способ сделать дочерние столбцы уровня x глубоко редактируемыми, но родители представляют собой суммы? - PullRequest
Новая
       7

ag-grid treeView: способ сделать дочерние столбцы уровня x глубоко редактируемыми, но родители представляют собой суммы?

0 голосов
/ 21 февраля 2020

Я использую ng-grid с Angular, и я пытаюсь выяснить, есть ли способ сделать редактируемые определенные строки, которые являются потомками родителя, но заставляют родителей суммировать итоги из дети, которые х уровней глубоко? Прямо сейчас, в документах, единственное, что я могу найти, это то, что вы можете указать 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>

Возможно ли это с помощью древовидного представления?

1 Ответ

0 голосов
/ 21 апреля 2020

Вы были на правильном пути со свойством columnDef editable . Editable может быть либо логическим значением, либо функцией обратного вызова (определение типа IsColumnFun c). Функция принимает следующие параметры: 

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
}

Ура!

...