在Angular 1.4中使用ag-grid中的setColumnDefs（）设置多个列时的间距很大

Question

我有以下Angular ag-grid代码......

qrymonapp.controller("bqQueryReportController",  function($scope, $route, $routeParams, $http){
    $scope.gridOptions = {
        enableSorting: true,
        enableFilter: true,
        suppressMovableColumns:true,
        enableColResize: true,
        rowHeight : 27,
        tooltipField : true,
        suppressLoadingOverlay : true,
    }

    $http.get("url").then(function (response) {
        $scope.gridOptions.api.setColumnDefs([{headerName: "stone1", field: "stone"}, {headerName: "stone2", field: "stone2"}])
        $scope.gridOptions.api.setRowData([{stone: "garnett"},{stone2: "pearl"}}])
    });
});

这是我的HTML ...

<div class="query-report-ag-grid">
  <div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>

以下是我的网格状态......

注意奇怪的空白区域？我需要网格没有填充/空格。我该怎么做呢？

Answer 1

问题在于您如何设置数据。您为网格提供的数据是（为清晰起见而格式化）

[
  {
    stone: "garnett"
  },
  {
    stone2: "pearl"
  }
]

这是两个对象的数组，这就是你看到两行的原因。每个对象只有一个与列定义匹配的键，因此只填充一个单元格。为了使行在每列中显示值，您需要定义一个具有与所有列定义匹配的键的对象。

在这种情况下

[
  {
    stone: "garnett",
    stone2: "pearl"
  }
]

或仅[{stone: "garnett",stone2: "pearl"}]