Angular Ag-Grid 中的动态列标题

Question

我正在尝试创建必须从 JSON 响应动态加载列标题的 AG 网格（不是 UI 网格）。我尝试了很多方法，但我无法完成，所以任何帮助都非常可观。

网格 - 我期待的格式（附图片）

在网格中，前两列 Part No 和 Part Name 是固定的。其余列是动态的，其中列标题在初始化网格之前未确定。

我准备把 JSON 格式改成网格格式

JSON 格式

[  
   {  
      "partNo":"P00001",
      "partName":"AAAAA",
      "periodList":[  
         {  
            "period":"Jan-15",
            "periodValue":"267"
         },
 {  
     "period":"Feb-15",
     "periodValue":"347"
 }
]
},
]

AG GRID Sample Format

Answer 1

我对 Angular 的理解有限，但我会尽力提供帮助（免责声明：）虽然，我确信有一种更简单的方法，我希望这个方法有所帮助

//For convenience, lets call your dataset partSales.

//1st get dynamic columns
var myDynamicColumns = getMyDynamicColumns(partsales);
//2nd format data to make period data have a unique name. 
//Note the periodValue will be assigned to its period e.g. 'Jan-15':'267' 
//This should match the columnDefs field value. e.g. field: 'Jan-15'
var myData = myDataFormatter(partsales);
//fixed columns
var gridOColDefs = [
            {
                field: 'partNo',
                enableCellEdit: false,
                headerName: 'Part No',
            },
            {
                field: 'partName',
                enableCellEdit: false,
                headerName: 'Part Name',
                cellClass: 'text-right',
                width: 45,
                headerGroup: 'Farm'
            }].concat(myDynamicColumns);
];

//Define you grid options
var gridOptimizerOptions = {
    pinnedColumnCount:2,
    columnDefs: myDynamicColumns,
    rowData: myData
};


//Returns an list of dynamic column definitions
function getMyDynamicColumns(partsales){

    var columnFields = [];

    //loop though parts
    _.each(partSales, function(singlePartSale){

        //loop through periods
        _.each(singlePartSale.periodList, function(period){
            var periodTitle = period.period;

            //Do something to make sure the column definition has not already been added. The conditional syntax below is not valid.
            if(periodTitle is not in columnFields){
                columnFields.push(
                {
                    //You will have to flush this out. You may need to loop through you data and give each period an unique name. 
                    field: [periodTitle], 
                    headerName: [periodTitle],
                    width: 50                
                });
            } //end condition
        }); //periods loop
    });//end parts loop

    //Return new column defs so they can be concattinated to the fixed column Definitions
    return columnFields;
}

function myDataFormatter(partSales){
    var newDataList = [];
    _.each(partSales, function(partSale){
        var newData = {
            partNo = partSale.partNo,
            partName = partSale.partName
        }
        _.each(partSale.periodList, function(singlePeriod){ 
                var newField = singlePeriod.period;          
                newData.push([newField] = singlePeriod.periodValue);
        });
        newDataList.push(newData);
    })
    return newDataList;
})


// so your data should look like this from the data formatter function.
[{
    'partNo':"P00001",
    'partName':'AAAAA',
    'Jan-15':"267",
    'Feb-15':"347",
    ...and so on.
},
{
    'partNo':"P00002",
    'partName':'AAAB',
    'Jan-15':"421",
    'Feb-15':"2",
    ...and so on.
}]