Jak wyświetlić kolumnę dynamicznie przy użyciu AG-siatkę

Question

Jestem nowy angularjs technology.I'm za pomocą AG-siatkę i chcą, aby wyświetlić kolumnę dynamicznie

---

moje dane JSON jest:

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

---

moje wyjście Oczekuje Expected Output

istniejący kod znajduje się poniżej

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

Istniejące wyjściowa jest podana poniżej Existing Output

W jaki sposób można osiągnąć mój oczekiwany wynik z istniejącego wyjścia

Answer 1

Pierwszy umieszczają dane JSON

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

do tego celu używam

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

opcję siatki następujący kod znajduje się poniżej:

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

definicji kolumny, która jest dynamiczna podano poniżej:

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

w tym nagłówku jest tablicą. Tablica ta zawiera różne nazwy studenckie

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

myślę danych dane wejściowe (student) może być sprawcą, jak nawias wydaje być dziwnie sparowane (skopiowane dane, ale sformatowane być łatwiejsze do odczytania):

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

drugi, trzeci nd czwarta linia nie ma początku {.

Answer 3

Wygląda na to, że używasz połączenia asynchronicznego, aby odebrać dane, więc gdy połączenie przekroczy linię, jest już zainicjalizowane.

Po siatka jest initialiazed trzeba użyć API siatki (gridOptions.api ...) zamiast girdOptions.columnsDef (patrz http://www.ag-grid.com/angular-grid-api/index.php)

Answer 4

Jest tam kilka rzeczy krzywdy w kodzie:

Pierwsza: pole "API" nie jest dostępne przy starcie. Może to oznacza dwie rzeczy:

1. siatka nie została jeszcze załadowana (zawija połączenie w timeout dolarów lub gotowej dokumentacji check wydarzenie na http://www.ag-grid.com).
2. Zapominasz dyrektywy ag-grid w swoim elemencie DOM, więc siatka nie zostanie w ogóle zainicjowana.

2: nie używaj $ scope.gridOptions.api.setColumnDefs(); ale $ scope.gridOptions.api.setColumnDefs (myNewColumnsDefs);

Po trzecie: jeśli siatka jest już zainicjalizowana, nie używaj funkcji rowData, użyj api.setRowData (myDatas), prawdopodobnie lepiej używaj go po wywołaniu setColumnDefs, ale nie sądzę, żeby coś zepsuł.

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

To pomoże Ci uzyskać dostęp do API AG-siatki.

Mam nadzieję, że to pomoże!