html - Angular 7+中的可编辑数据树网格

Question

在 Angular 7（及更高版本）中实现可编辑树形网格的最快和最简单的方法是什么？我曾尝试使用 ng angular-tree-grid，但在我目前实现的以下代码中被卡住了。

模板：

<db-angular-tree-grid #angularGrid [data]="data" 
                      [configs]="configs" 
                      (rowdelete)="onRowDelete($event)" 
                      (rowsave)="onRowSave($event)" 
                      (rowadd)="onRowAdd($event)">
</db-angular-tree-grid>  

我一直无法让 onRowAdd() 和 onRowDelete() 方法工作。我需要在 onRowAdd() 中调用我的 c# webApi 上的 POST 端点。

打字稿：

export class GridComponent {
   @ViewChild('angularGrid') angularGrid: AngularTreeGridComponent;

  data: any = [
    { id: 1, planName: 'Functional Test',parent: 0},
    { id: 2, planName: 'Non Functional Test', parent: 0},
    { id: 3, planName: 'Component', parent: 1}
  ];
    configs: any = {
    id_field: 'id',
    parent_id_field: 'parent',
    parent_display_field: 'planName',
    actions: {
      add: true,
      edit: true,
      delete: true,
      edit_parent: true,
      add_parent: true,
      delete_parent: true,
      resolve_add: true,
      resolve_delete: true,
      resolve_edit: true
    },
    css: { // Optional
      expand_class: 'fa fa-caret-right',
      collapse_class: 'fa fa-caret-down',
      add_class: 'fa fa-plus',
      edit_class: 'fa fa-pencil',
      delete_class: 'fa fa-trash',
      save_class: 'fa fa-save',
      cancel_class: 'fa fa-remove',
    },
    columns: [
      {
        name: 'planName',
        header: 'PlanName',
        editable: true
      }
    ]
  };

  onRowAdd($e) {
    const data = $e.data;
    setTimeout(() => {
      $e.resolve();
    }, 1000);      
  }

  onRowSave($e) {
    const data = $e.data;
    setTimeout(() => {
      $e.resolve();
    }, 1000);
  }

  onRowDelete($e) {
    setTimeout(() => {
      $e.resolve();
    }, 1000);
  }
}  

标签： htmlangulartypescript