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

这是我的网格的样子...

注意到奇怪的空白 space 了吗？我需要网格没有 fillers/whitespace。我该怎么做呢？

Answer 1

问题出在您设置数据的方式上。您提供给网格的数据是（为清楚起见格式化）

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

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

在这种情况下

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

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

在 Angular 1.4 的 ag-grid 中使用 setColumnDefs() 设置多列时的尴尬间距

Awkward spacing when setting multiple columns using setColumnDefs() in ag-grid in Angular 1.4

angularjs

ag-grid