Question

如何分隔数据并基于PRN显示date子项，例如january，那么如果有machine 1的数据，则有{{1} }将会显示在children头上，然后如果还有另一个assetCode: PRN并在machine 2上添加assetCode: PRN1则显示值。那么如果january没有machine 1，则它将设置为assetCode: PRN1，与0

代码如下：

list.component.ts

machine 2

如何做到这一点。

Answer 1

分析问题附带的代码和数据，似乎无法奇迹般地一起工作。两者都需要稍作更改才能生成所需的网格。

在代码中，您使用“列组”来构造显示，但是网格标题“ PRN，...，PRNX”强烈基于数据对象属性“ assetCode”和“ assetCount”-这就是为什么更简单的方法是将ag-grid“数据透视”视为给定问题的解决方案。

数据透视允许您获取列值并将其转换为列。

首先，我们需要为所有“机械X”行定义结构：

{
  code: "Machine X",
  PRN:  1,
  PRN1: 5,
  PRN2: 7,
  ...
  PRNX: XX,
  month: "January"
},{
  code: "Machine X",
  PRN:  1,
  PRN1: 3,
  ...
  PRNX: XX,
  month: "February"
},

第二步包括为要计算的列总数设置配置（PRN标头将在随后的步骤中与数据转换一起创建）：

var gridOptions = {
    ...
    //Switched to true to b 'Pivot' feature
    pivotMode: true, 
    //Switched to true, so headers won't include the aggFunc, eg 'sum(PRN)'
    suppressAggFuncInHeader: true,
    //Additional properties to define how your groups are displayed
    autoGroupColumnDef: {
        headerName: "Style/Machine", 
        field: "code", 
        width: 200,
        cellRendererParams:{
          suppressCount: true,
        },
    },
    //Helps display & ordering by name of pivot headers
    processSecondaryColGroupDef: function(colGroupDef) {
      var res = colGroupDef.headerName.split("_");
      var month = monthNames[res[0]];
      colGroupDef.headerName = month+'\''+res[1];
    },
    columnDefs: columnDefs,
    rowData: null
};

分组的主要标题：

{ headerName: "Code",  field: "code", rowGroup: true}

要通过“月”列对行进行透视，请定义“ pivot：true”：

 { headerName: "Month", field: "month", pivot: true},

下一步，将您的输入数据转换为适合步骤1中的结构：

//Group the data per month/year for each 'Machine X'
var dataByMonthYear = rowData.reduce(function(dataByMonthYear, datum){
  var date  = new Date(datum.date);
  var year  = ('' + date.getFullYear()).slice(-2);

  //Index helps to aggregate the values by unique 'Machine_month_data' code
  var index = datum.code+'_'+date.getMonth() + '_' + year;

  //Init new entry
  if(!dataByMonthYear[index]){
     dataByMonthYear[index] = {code: datum.code, month: date.getMonth() + '_' + year};
  }
  if(!dataByMonthYear[index][datum.assetCode]){
     dataByMonthYear[index][datum.assetCode] = 0;
  }

  //Sum total by assetCode
  dataByMonthYear[index][datum.assetCode] += datum.assetCount;

  //Add PRN code to list (for later headers init)
  if(columns.indexOf(datum.assetCode) === -1){
     columns.push(datum.assetCode);
  }

  return dataByMonthYear;
}, {});

//Build final data - object to array
var finalRowData = Object.keys(dataByMonthYear).map(function(group){
  return dataByMonthYear[group];
});

最后要做的是设置列

//Global structure of PRN header:
{ 
    headerName: "PRN", field: "PRN", 
    //Custom aggregate function, replacing default aggFunc: 'sum',
    //to handle 0 values for not present attributes
    aggFunc: customAggFunction
},

负责计数和列定义的主要功能：

function customAggFunction(values) {
   var sum = 0;
   values.forEach( function(value) {
        if (typeof value === 'number') {
            sum += value;
        }
    });
    return sum;
}

//Define PRN columns 
columns.map(function(col){
  columnDefs.push({ headerName: col, field: col, aggFunc: customAggFunction
     });
});

请注意，另一种解决方案是使用完整的组而不是旋转，但是我们需要为每个 YEAR_MONTH_PRN 定义一列以显示所有值，处理过滤和排序等（用于显示几年，随着许多PRN的到来，这种解决方案要重得多）。

Working example

评论后：

“如果在进行月份，则显示PRN 1，但是如果在进行月份中没有PRN，则应显示。”

第二种解决方案将与您更相关，因为共享了枢轴列，并且您需要的是完全访问列定义以显示/隐藏的权限他们关于给定时期的总价值。这意味着我们需要在您的源数据中创建与accessCodes一样多的列。

请注意，原始数据中没有accessCode的行将被赋值并设置为0-为此，我们需要映射数据源中存在的“ assetCode / month / year”的所有可能列然后为每行创建它们（这将避免缺少列的空白值）。

请注意，第二种解决方案不是最佳解决方案，因为需要两次处理数据-一次映射所有列，第二次为每一行分配值。如果可以从服务器端获取期间列表（“ assetCode /月/年”），则可以改进代码。

Working example v2

在没有角度输入的情况下如何将值设置为0

1 个答案: