7

我是 angularjs 技术的新手。我正在使用 ag-grid 并希望动态显示列

我的json数据是：

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

我的预期输出是 预期输出

现有代码如下

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

现有输出在现有输出下方给出

如何从现有输出达到我的预期输出

4

7 回答 7

5

先整理json数据

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

为此，我正在使用以下代码

             function generateChartData() {
             var chartData = [],
               categories = {};
             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;
         }

网格选项如下：

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

列定义是动态的，如下所示

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

在此标头中是一个数组。该数组包含不同的学生姓名

 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];
         }
于 2016-01-12T05:27:41.847 回答
3

您似乎正在使用异步调用来获取数据，因此当调用成功时，网格已经初始化。

网格初始化后，您需要使用网格 API (gridOptions.api...) 而不是 girdOptions.columnsDef (参见http://www.ag-grid.com/angular-grid-api/index.php )

于 2016-01-02T08:10:24.183 回答
2 
// 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);

这将帮助您访问 ag-grid 的 API。

希望这可以帮助！

于 2017-03-13T09:17:25.860 回答
2

您的代码中有很多错误：

第一个：“API”字段在开始时不可用。它可能意味着两件事：

  1. 网格尚未加载（将调用包装在http://www.ag-grid.com$timeout上的或准备好的事件检查文档中）。
  2. 您忘记了 DOM 元素中的 ag-grid 指令，因此网格根本不会初始化。

第二：不要使用 $scope.gridOptions.api.setColumnDefs();但是$scope.gridOptions.api.setColumnDefs(myNewColumnsDefs);

第三：如果网格已经初始化，请不要使用rowDatause api.setRowData(myDatas)，可能在调用后使用它更好，setColumnDefs但我认为它不会弄乱任何东西。

于 2016-01-06T11:03:49.240 回答
1

我认为您的输入数据（学生）的数据可能是罪魁祸首，因为括号似乎是奇怪的配对（复制了您的数据，但格式化为更易于阅读）：

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

第二、三、四行没有开头{。

于 2016-01-02T07:15:26.417 回答
1 
    $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);
    }
于 2016-10-05T14:28:10.133 回答
0

我在 Angular 6 中寻找同样的东西。但是这个页面出现在谷歌中。如果有人想从其他 API 派生列定义，我将在 Angular 6 中提供答案，

我正在使用大小列来适应，因为列是动态的，因此它们适合可用的网格宽度

ngOnInit() {
this.gridOptions = {
  onGridSizeChanged: () => {
    this.gridApi.sizeColumnsToFit();
  },
  onNewColumnsLoaded: () => {
    if (this.gridApi) {
      this.gridApi.sizeColumnsToFit();
    }
  },
  defaultColDef: {
    width: 150,
    minWidth: 100,
    maxWidth: 400
  }
};
this.getcolumnData();

}

getcolumnData() {
this.pageType =  this.route.snapshot.paramMap.get('type');
this.http.get(`${this.baseURL}/getStaticMetaData`).subscribe(res => {
  let columnDef = [];
  res.forEach(column => {
    columnDef = [...columnDef, {headerName: column.columnName, field: column.columnId}];
  });
  this.gridApi.setColumnDefs(columnDef);
});

}

onGridReady(params) {
this.gridApi = params.api;
this.http.get(`${this.baseURL}/getStaticData`).subscribe(data => {
  if (data.length < 20) {
    this.isSmallGrid = true;
  }
  this.gridApi.setRowData(data);
}, err => {
  // handle error
});

}

<ag-grid-angular style="width: 100%;" 
  [ngStyle]="{'height.px': isSmallGrid ? '325' : '725'}"
  class="ag-theme-balham"
  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
  enableColResize enableSorting enableFilter
  >
  </ag-grid-angular>
于 2019-01-22T07:30:38.960 回答