Wie Spalte angezeigt werden dynamisch mit ag-grid

Question

Ich bin technology.I'm mit ag-Raster AngularJS und Spalte angezeigt werden soll dynamisch

---

meine Json Daten:

[{Date:'12-12-2015',Name:'ammu',mark:20},{Date:'12-12-2015',Name:'appu',mark:24},{Date:'12-12-2015',Name:'anu',mark:27},{Date:'13-12-2016',Name:'ammu',mark:23},{Date:'13-12-2015',Name:'anu',mark:20}] 

---

Mein Erwarteter Ausgang ist Expected Output

wird vorhandenen Code unten

$scope.gridOptions = { 
    columnDefs: [], 
    enableFilter: true, 
    rowData: [], 
    rowSelection: 'multiple', 
    rowDeselection: true 
}; 
$scope.customColumns = []; 
Getdetails(); 
function Getdetails() 
{ 
    masterdataFactory.Getdetails() 
    .success(function (Student) { 
     f (Student.length != 0) { 
      for(var i=0;i<Student.length;i++) { 
       $scope.customColumns.push(
        { 
         headerName: Student[i].Name, 
         field: "Mark", 
         headerClass: 'grid-halign-left' 

        } 
       ); 
      }; 
      $scope.gridOptions.columnDefs = $scope.customColumns; 
      $scope.gridOptions.rowData = Student; 
      $scope.gridOptions.api.setColumnDefs(); 
      }     
    }) 
     .error(function (error) { 
      $scope.status = 'Unable to load data: ' + error.message; 
     }); 
} 

Bestehende Ausgabe wird unter gegeben Existing Output

Wie meine erwarteten Ausgabe der vorhandenen Ausgabe erreicht

Answer 1

Zuerst ordnen Sie die JSON-Daten

[{Date:'12-12-2015',ammu:20,appu:24,anu:27},{Date:'13-12-2016' ammu:23,anu:20}] 

für diesen Zweck Ich verwende folgenden Code

   function generateChartData() { 
      var chartData = [], 
       categories = {}; 
      debugger; 
      for (var i = 0; i <Student.length; i++) { 
       var newdate = Student[ i ].Date; 
       var Name=Student[ i ].Name; 
       var Mark=Student[ i ].Mark; 
       // add new data point 
       if (categories[ newdate ] === undefined) { 
        categories[ newdate ] = { 
         DATE: newdate 
        }; 
        chartData.push(categories[ newdate ]); 
       } 

       // add value to existing data point 

       categories[ newdate ][ Name] = Mark; 
      } 

      return chartData; 
     } 

Gitter Option ist unten angegeben:

$scope.gridOptions = { 
      columnDefs: coldef(), 
      enableFilter: true, 
      rowData: [], 
      rowSelection: 'multiple', 
      rowDeselection: true, 
      enableColResize: true, 

      } 
      }; 
     $scope.gridOptions.columnDefs = $scope.customColumns; 
     $scope.gridOptions.rowData =generateChartData(); 
     $scope.gridOptions.rowData = generateChartData(); 
} 

Spaltendefinition ist dynamisch die ist unter

angegeben

function coldef() 
{ 
    for(var i=0;i<headers.length;i++) { 
     debugger; 
     $scope.customColumns.push(
           { 
            headerName: headers[i], 
            field:headers[i], 
            headerClass: 'grid-halign-left', 
            width:180, 
            filter: 'set', 
          }); 
     } } 

In diesem Header ist ein Array. Dieses Array enthält verschiedene Schülernamen

var headers=new Array(); 
headers[0]="DATE"; 
var Names= Student.map(function (item) { return item.Name}); 
Names= Names.filter(function (v, i) { return Names.indexOf(v) == i; }); 
     for(var i=1;i<=Names.length;i++) 
     { 
      headers[i]=Names[i-1]; 
     } 

Answer 2

Ich denke, Dateneingabedaten (Student) können die Ursache sein, als Klammer scheinen werden weirdly gepaart (Ihre Daten kopiert, aber leichter lesen formatiert):

[ 
    {Date:'12-12-2015',Name:'ammu',mark:20}, 
    Date:'12-12-2015',Name:'appu',mark:24}, 
    Date:'12-12-2015',Name:'anu',mark:27}, 
    Date:'13-12-2016',Name:'ammu',mark:23}, 
    {Date:'13-12-2015',Name:'anu',mark:20} 
] 

Die zweite, dritte ein nd vierte Zeile haben keinen Anfang {.

Answer 3

Es scheint, dass Sie einen asynchronen Aufruf verwenden, um Ihre Daten zu erhalten, wenn der Aufruf erfolgreich ist, wird das Raster bereits initialisiert.

Nachdem das Gitter initialiazed Sie das Raster API (gridOptions.api ...) anstelle von girdOptions.columnsDef verwenden müssen (siehe http://www.ag-grid.com/angular-grid-api/index.php)

Answer 4

Es gibt durchaus einige Dinge Unrecht in Ihrem Code:

1.: Das Feld 'API' ist beim Start nicht verfügbar. Es kann bedeutet zwei Dinge:

1. das Gitter noch nicht (wickeln Sie den Anruf in einem $ Timeout oder Ereignis ready Check-Dokumentation auf http://www.ag-grid.com) geladen.
2. Sie vergessen die ag-grid-Direktive in Ihrem DOM-Element, so dass das Gitter überhaupt nicht initialisiert wird.

2.: nicht $ scope.gridOptions.api.setColumnDefs(); aber $ scope.gridOptions.api.setColumnDefs (myNewColumnsDefs);

3: Wenn das Grid bereits initialisiert ist, verwenden Sie nicht rowData verwenden Sie api.setRowData (myDatas), wahrscheinlich besser nach dem Aufruf von setColumnDefs verwenden, aber ich glaube nicht, dass es nichts vermasseln wird.

Answer 5

$scope.gridOptions ={ 
     enableSorting: true, 
     enableFilter: true, 
     suppressMovableColumns:true, 
     enableColResize: true, 
     columnDefs : [], 
     rowHeight : 27, 
     tooltipField : true, 
     suppressLoadingOverlay : true, 
     overlayLoadingTemplate: '<span class="ag-overlay-loading-center" style=background:lightgoldenrodyellow>Please wait while your rows are loading</span>', 
     //getRowStyle : getRowStyleScheduled 
    };  

    $scope.gridRefresh = function() { 
$scope.columnsHeaders =[]; 
     for (var i = 0, len = $scope.columnsHeaders.length; i < len; i++) { 
      $scope.columnsHeaders[i].headerName = $scope.columnsHeaders[i].name; 
      $scope.columnsHeaders[i].field = $scope.columnsHeaders[i].field; 
      $scope.columnsHeaders[i].cellRenderer = function(params) { 
       if(params.value != null) { 
        return '<span title="'+params.value+'">'+params.value+'</span>'; 
       }else { 
        return null; 
       } 
      } 
     $scope.gridOptions.columnDefs.push($scope.columnsHeaders[i]); 
     } 
     $scope.gridOptions.api.setColumnDefs($scope.gridOptions.columnDefs); 
     $scope.gridOptions.api.setRowData($scope.Rows); 
     $scope.gridOptions.columnApi.autoSizeColumns($scope.gridOptions.columnDefs); 
    } 

Answer 6

// the api will not be available unless it is compiled with the **$timeout** or **setTimeout** because this javascript library does not fall in angular digest cycle 
$timeout(function() { 
    $scope.gridOptions.api.setColumnDefs(masterColumnDefs); 
}, 0); 

Dies wird Ihnen helfen, die API von ag-Grid zuzugreifen.

Hoffe, das hilft!