Angular Ag-Grid中的動態列標題

Question

我正在嘗試創建AG-grid（而不是UI Grid），其中的列標題必須從JSON響應中動態加載。我嘗試了很多方法，但我無法完成，所以任何幫助都非常明顯。

電網 - 這我期待（附圖片）

在網格中的格式，前兩列部件號和零件名稱是固定的。在初始化網格之前未確定列標題的其餘列是動態的。

我已經準備好改變JSON格式，使網格格式

JSON格式

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

AG GRID Sample Format

Answer 1

我的角度理解是有限的，但我會嘗試幫助（免責聲明:)雖然，我相信有一個更簡單的方法，我希望這一個幫助

//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. 
}]