Question

我正在使用ag-grid来显示网格中的值。但是使用setRowData没有将值加载到grid.Below是我的代码，我在setTimeOut函数中调用setRowData，因为它抛出api是未定义：

<html>
 <head>
 </head>
 <body ng-app ng-controller="CustController as custCtrl">
     <div ag-grid="custCtrl.gridOptions" id="myGrid" style="height: 
      115px;width:500px;" class="ag-fresh"></div>
 </body>
</html>

var app = angular.module('myApp');
app.controller('CustController', function($scope, $http) {
var columnDefs = [
  {headerName: "Customer Name", field: "custName"},
  {headerName: "Address", field: "address"},
  {headerName: "Ph NO", field: "phNo"}
];

var rowData = [
{custName: "A", address: "xyz", phNo: '123-123-1234'},
{custName: "B", address: "lmn", phNo: '345-456-5672'},
{custName: "C", address: "pqr", phNo: '903-456-2345'}
];

var gridOptions = {
  columnDefs: columnDefs,
  enableColResize: true,
  rowBuffer:0,
  enableSorting: true,
  enableFilter: true,
  rowHeight: 30,
  headerHeight: 35,
  sizeColumnsToFit: true,
  onGridReady: function () {
    setTimeout( function(){
                        $scope.gridOptions.api.setRowData(rowData);
                    },5000);
   },
   suppressLoadingOverlay: true,
   pagination: true
 };
});

Answer 1

尝试在gridOptions之外移动onGridReady函数。

var rowData = [
{custName: "A", address: "xyz", phNo: '123-123-1234'},
{custName: "B", address: "lmn", phNo: '345-456-5672'},
{custName: "C", address: "pqr", phNo: '903-456-2345'}
];

从数据库通过http get方法点击按钮调用getData（）函数

$scope.getData = function(){
  //console.log("hello");
  $http.get("https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json")
    .then(function(res){
        $scope.gridOptions.api.setRowData(res.data);
    });
}

https://plnkr.co/edit/PKTiFpd9WM1UeELT72ht?p=preview

Answer 2

您的gridOptions变量未在$ scope上定义，但您尝试通过onGridReady函数中的范围访问它。

试试这个：

$scope.gridOptions = {
  columnDefs: columnDefs,
  enableColResize: true,
  rowBuffer:0,
  enableSorting: true,
  enableFilter: true,
  rowHeight: 30,
  headerHeight: 35,
  sizeColumnsToFit: true,
  onGridReady: function () {
    setTimeout( function(){
                        $scope.gridOptions.api.setRowData(rowData);
                    },5000);
   },
   suppressLoadingOverlay: true,
   pagination: true
 };
});

setRowData没有将数据加载到网格中

2 个答案: