如何使用 ag-grid 动态显示列答案

【问题标题】：How to display column dynamically using ag-grid如何使用 ag-grid 动态显示列
【发布时间】：2016-04-06 10:10:37
【问题描述】：

我是 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}]

我的预期输出是 Expected Output

现有代码如下

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

现有输出如下 Existing Output

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

【问题讨论】：

标签： angularjs ag-grid

【解决方案1】：

先整理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];
         }

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢 Sebastien。我试过这样。但结果与 TypeError 相同：“无法读取未定义的属性 'setColumnDefs'”。我没有得到预期的输出。你能帮帮我吗有解决方案吗？我的问题是用网格 API 更新的
基本上你应该在网格尚未初始化时使用gridOptions.columnDefs = [...]，在网格初始化后使用gridOptions.api.setColumnDefs([...])。鉴于您的错误，我认为网格尚未初始化，因此当您尝试调用 gridOptions.api.setColumnDefs(...) 时，gridOptions.api 仍未定义。
谢谢塞巴斯蒂安。我得到了答案

【解决方案3】：

// 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。

希望这会有所帮助！

【讨论】：

【解决方案4】：

您的代码中有很多错误：

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

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

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

3rd : 如果网格已经初始化，不要使用rowData 使用api.setRowData(myDatas)，在调用setColumnDefs 之后使用它可能会更好，但我认为它不会弄乱任何东西.

【讨论】：

没问题，别忘了验证答案，这样人们就会知道这篇文章已经被回答了
1) 不，不，不！！！（超时应该是多久？？？）使用onGridReady
$timeout or ready event check。至于 t$imeout 需要多长时间，实际上是 0ms 超时，这会将处理推迟到下一个 javascript 事件循环。是的，这不是最佳解决方案，但它实际上相当稳定，因为它不依赖于时间，而只是推迟到下一个循环。
网格需要几个事件循环才能准备好？当有 onGridyReady() 回调时，为什么要使用 hack？
我之所以这么说是因为我确实记得我在处理 angularJS 时有时确实使用了 $timeout 技巧。但我已经太久不记得当时是否出于任何可能的原因需要它而不是 onGridReady。

【解决方案5】：

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

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

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

【讨论】：

对不起。是我的错，json的格式不对。我更新了我的 json 数据。但实际上这不是问题。你能帮我解决一下吗。

【解决方案6】：

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

【讨论】：

【解决方案7】：

我在 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>

【讨论】：