Comment afficher la colonne en utilisant de façon dynamique réseau ag

Question

Je suis nouveau à l'aide AngularJS technology.I'm grille ag et que vous souhaitez afficher dynamiquement la colonne

---

mes données JSON est:

[{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}] 

---

Ma sortie est attendue Expected Output

code existant est donné ci-dessous

$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; 
     }); 
} 

sortie existant est donnée ci-dessous Existing Output

Comment atteindre mon sortie attendu de la sortie existante

Answer 1

d'abord organiser les données JSON

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

à cette fin, je suis en utilisant le code suivant

   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; 
     } 

option Grille

est donnée ci-dessous:

$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(); 
} 

définition de la colonne est dynamique est donné ci-dessous

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', 
          }); 
     } } 

dans cet en-tête est un tableau. ce tableau contient des noms d'étudiants

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

Je pense que les données de vos données d'entrée (étudiant) peut être le coupable, comme semble parenthèses à être jumelé weirdly (copié vos données, mais formaté pour être plus facile à lire):

[ 
    {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} 
] 

Le deuxième, troisième un la quatrième ligne n'a pas de début {.

Answer 3

Il semble que vous utilisiez un appel asynchrone pour obtenir vos données. Ainsi, lorsque l'appel réussit, la grille est déjà initialisée.

Après la grille est initialiazed vous devez utiliser l'API de grille (gridOptions.api ...) au lieu de girdOptions.columnsDef (voir http://www.ag-grid.com/angular-grid-api/index.php)

Answer 4

Il y a bien quelques torts de choses dans votre code:

1er: le champ 'API' n'est pas disponible au démarrage. Il peut Signifie deux choses différentes:

1. la grille n'a pas encore été chargé (WRAP l'appel dans un délai d'attente de $ ou prêt documentation chèque d'événement sur http://www.ag-grid.com).
2. Vous oubliez la directive ag-grid dans votre élément DOM afin que la grille ne s'initialise pas du tout.

2ème: n'utilisez pas $ scope.gridOptions.api.setColumnDefs(); mais $ scope.gridOptions.api.setColumnDefs (myNewColumnsDefs);

3ème: si la grille est déjà initialisée n'utilisez pas rowData utilisez api.setRowData (myDatas), probablement mieux après l'appel de setColumnDefs mais je ne pense pas que ça gâchera quoi que ce soit.

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); 

Cela vous aidera à accéder à l'API de grille ag.

Espérons que cela aide!