Динамический заголовок столбца в угловой решетке

Question

Динамический заголовок столбца в угловой решетке

0

Я пытаюсь создать AG-grid (НЕ UI Grid), где заголовки столбцов должны динамически загружаться из ответа JSON. Я пробовал много способов, но я не мог этого добиться, поэтому любая помощь очень заметна.

Grid - формат, который я ожидаю (изображение прилагается)

В сетке фиксируются первые два столбца Part No и Part Name. Остальные столбцы являются динамическими, если заголовок столбца не задан до инициализации сетки.

Я готов изменить формат JSON, чтобы сделать формат сетки

Формат JSON

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

Формат AG GRID

Karthik Seetharaman 07 дек. 2015, в 07:46

Источник

0

Любое обновление, пожалуйста?
Karthik Seetharaman 09 дек. 2015, в 01:47

Теги:

angularjs

ag-grid

1 ответ

Ещё вопросы

dcary · Answer 1 · 2015-12-29T03-36-00.000Z

Мое понимание углового ограничено, но я попытаюсь помочь (отказ от ответственности :) Хотя, я уверен, что есть более простой метод, я надеюсь, что это поможет

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