angular - 使用角度 SlickGrid 显示父子列表记录

Question

我是 SlickGrid 的新手。我必须使用 SlickGrid 显示父子列表记录。默认情况下，光滑网格应显示父记录。应该有操作来展开和折叠父记录中的子记录。当我单击父记录中的操作时，它应该在父记录的下方显示相应的子记录。

我已经提到了这个链接

在这里，我分享了我的代码片段供您参考

网格选项

  {
   autoResize: {
    containerId: "demo-container",
    sidePadding: 10,
  },
  enableAutoSizeColumns: true,
  enableAutoResize: true,
  enableExport: true,
  enableFiltering: true,
  enableTreeData: true, 
  treeDataOptions: {
    columnId: 'productname',
   levelPropName: 'indent',
    parentPropName: 'pfm123'
  },
 
  headerRowHeight: 45,
  rowHeight: 40,
  contextMenu: {
    iconCollapseAllGroupsCommand: "mdi mdi-arrow-collapse",
    iconExpandAllGroupsCommand: "mdi mdi-arrow-expand",
    iconClearGroupingCommand: "mdi mdi-close",
    iconCopyCellValueCommand: "mdi mdi-content-copy",
    iconExportCsvCommand: "mdi mdi-download",
    iconExportExcelCommand:
      "mdi mdi-file-excel-outline text-success has-text-success",
    iconExportTextDelimitedCommand: "mdi mdi-download",
  },
  gridMenu: {
    iconCssClass: "mdi mdi-menu",
    iconClearAllFiltersCommand: "mdi mdi-filter-remove-outline",
    iconClearAllSortingCommand: "mdi mdi-swap-vertical text-danger",
    iconExportCsvCommand: "mdi mdi-download",
    iconExportExcelCommand:
      "mdi mdi-file-excel-outline text-success has-text-success",
    iconExportTextDelimitedCommand: "mdi mdi-download",
    iconRefreshDatasetCommand: "mdi mdi-sync",
    iconToggleFilterCommand: "mdi mdi-flip-vertical",
    iconTogglePreHeaderCommand: "mdi mdi-flip-vertical",
  },
  headerMenu: {
    iconClearFilterCommand: "mdi mdi mdi-filter-remove-outline text-danger",
    iconClearSortCommand: "mdi mdi-swap-vertical",
    iconSortAscCommand: "mdi mdi-sort-ascending",
    iconSortDescCommand: "mdi mdi-flip-v mdi-sort-descending",
    iconColumnHideCommand: "mdi mdi-close",
  },
   };}

列定义

[
  {
    id: 'customername',
    name: 'Customer Name',
    field: 'customername',
    width: 220,
    cssClass: 'cell-title',
    filterable: true,
    sortable: true,
    queryFieldSorter: 'id',
    type: FieldType.string,
    formatter: Formatters.tree
  },

  { 
     id: 'orderamount',
     name: 'order Amount',
     field: 'orderamount',
     minWidth: 90,
     filterable: true },
     {
      id: 'orderdate',
      name: 'Orderdate',
      field: 'orderdate',
      minWidth: 60,
      type: FieldType.dateIso,
      filterable: true, sortable: true,
      filter: { model: Filters.compoundDate },
      formatter: Formatters.dateIso,
      },
        {
      id: 'productname',
      name: 'Product Name',
      field: 'productname',
      width: 220,
      cssClass: 'cell-title',
      filterable: true,
      sortable: true,
      queryFieldSorter: 'id',
      type: FieldType.string

      },

     { 
     id: 'price',
     name: 'Price',
     field: 'price',
     minWidth: 90,
     filterable: true 
      },
      { 
      id: 'quantity',
      name: 'Quantity',
      field: 'quantity',
      minWidth: 90,
      filterable: true 
}];

数据集

 [
  {
    id: 0,
    indent: 0,
    customername: "customer1",
    orderamount: "50300",
    orderdate: "dec15",
  },
  {
    id: 1,
    indent: 1,
    pfm123: 0,
    productname: "Laptop",
    quantity: "1",
    price: "50000",
  },
  {
    id: 5,
    indent: 2,
    pfm123: 1,
    productname: "Keyboard",
    quantity: "1",
    price: "300",
  },
  {
    id: 2,
    indent: 0,
    customername: "customer2",
    orderamount: "10500",
    orderdate: "dec16",
  },
  {
    id: 3,
    indent: 1,
    pfm123: 2,
    productname: "Mobile",

    price: "10000",
    quantity: "1",
  },
  {
    id: 4,
    indent: 1,
    pfm123: 2,
    productname: "HeadPhone",
    quantity: "1",
    price: "500",
  },
];

电流输出

预期产出