反转网格以将数据显示为详细信息、小计和总计

Question

我尝试了几种方法都无济于事。下面的屏幕截图显示了一个网格，其中包含总计，然后是小计，然后是详细信息。我需要稍微反转此网格，以便数据显示为详细信息、小计和总计。

Current State of Grid

在这个例子中，我只显示了一个项目编号，IMCOPS；可以有多个项目编号。网格也按项目编号和任务编号分组，但用户可以更改分组或 add/remove 列。我可以创建两个数组，一个包含总计，一个只包含按顺序排列的详细信息。

下面的数组是我目前用来构建网格的。索引 0 用于定义网格列。索引 1 是总计。索引 2 是间隔基。索引 3 是小计。索引 4、5 和 6 是索引 3 的详细信息。然后重复该模式。

0:
    Prime Contract No: ""
    BC ID: ""
    Project Number: ""
    Task Number: ""
    Task Name: ""
    Task Cognizant Org: ""
    Hours MTD: ""
    Hours YTD: ""
__proto__: Object
1:
    Hours MTD: 542.3
    Hours YTD: 1690.2
    Project Number: "IMCOPS"
__proto__: Object
2:  null
3:
    Hours MTD: 177.1
    Hours YTD: 1325
    Task Number: "22.1.02"
__proto__: Object
4:
    BC ID: "011500000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02"
    Task Name: "TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 0
    Hours YTD: 0
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
5:
    BC ID: "020100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02"
    Task Name: "TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 0
    Hours YTD: 0
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
6:
    BC ID: "030100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02"
    Task Name: "TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 177.1
    Hours YTD: 1325
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
7:
    Hours MTD: 1
    Hours YTD: 1
    Task Number: "22.1.02.2202"
__proto__: Object
8:
    BC ID: "030100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02.2202"
    Task Name: "2202 TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 1
    Hours YTD: 1
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
9:
    Hours MTD: 142.2
    Hours YTD: 142.2
    Task Number: "22.1.02.2210"
__proto__: Object
10:
    BC ID: "030100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02.2210"
    Task Name: "2210 TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 142.2
    Hours YTD: 142.2
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
11:
    Hours MTD: 222
    Hours YTD: 222
    Task Number: "22.1.02.2220"
__proto__: Object
12:
    BC ID: "030100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02.2220"
    Task Name: "2220 TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 222
    Hours YTD: 222
    G2: "IMCOPS"
    G3: "2"

更新

这里是关于我希望实现的目标的附加信息以及一个 Plunker 示例。下图左边是数组的样子，右边是我大致希望达到的效果。

Before and After

这是我编写的一些代码的 Plunker 示例。我几乎让它工作了；但是，我没有选择第一个 "level 1" 和 "level 0" （总计）出现两次。请注意，这是我的问题的简单说明。初始数组可能具有第 n 次的多个级别。

Plunker example

Answer 1

能否请您分享一个快速模型（使用 Excel 或其他东西）您希望最终结果看起来如何？

SpreadJS team

Answer 2

我相信我已经解决了我的问题。在我的代码中，我不小心过早地删除了小计数组的最后一个元素。这是更新的 Plunker：

Plunker solution

需要将我的更改折叠到我的项目中，看看它是否适用于多级小计。

反转网格以将数据显示为详细信息、小计和总计

Invert grid to display data as details, subtotals and the grand total

javascript

arrays

spreadjs

ag-grid