Ag-grid 和 AngularJS - header 宽度未与数据列对齐

Question

[更新] 如果有人 my snippet 工作，header 和数据列对齐，我将额外添加 200 分（总计 300 分）。

这是我第一次尝试 ag-grid。我这样分配网格 header：

var stationAnalyticsColumnDefs = [
    {headerName: "Station #", field: "station_id",   width: 150, sort: 'asc'},
    {headerName: "Station name",   field: "station_name", width: 150, sort: 'desc'},
    {headerName: "Total visitors",   field: "total_visit_count", width: 150, sort: 'desc'},
    {headerName: "Busiest day (visitors)",   valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];

我正在通过 AJAX 获取数据，所以当我的 $http.get returns 成功时，根据文档，我应该能够

$scope.stationAnalyticsGridOptions.api.refreshView();

或

$scope.stationAnalyticsGridOptions.api.refreshRows(data);

但这些似乎都不起作用（未显示数据），所以我使用

$scope.stationAnalyticsGridOptions.api.setRowData(data);

而且数据显示很好。

我的问题是 header 与数据不一致。我怎么做？我还希望在拖动 header 时调整网格列的大小。

[更新] 仍在研究 Plunk。谁能看出这有什么问题吗？

查看

<div ag-grid="stationAnalyticsGridOptions" 
     class="ag-fresh ag-basic" 
     style="height:400px; width:80%">

控制器

var stationAnalyticsColumnDefs = [
   {headerName: "Station #", field: "station_id",   width: 150, sort: 'asc'},
   {headerName: "Station name",   field: "station_name", width: 150, sort: 'desc'},
   {headerName: "Total visitors",   field: "total_visit_count", width: 150, sort: 'desc'},
   {headerName: "Busiest day (visitors)",   valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];

$scope.stationAnalyticsGridOptions = {
    columnDefs: stationAnalyticsColumnDefs,
    rowData: $scope.eventStationsAnalyticData,
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
};

[更新] 我试图创建一个有效的 Fiddle，以重现问题，但失败了； table 甚至不显示。您可以在 https://jsfiddle.net/mawg/9ex225ye/4/

找到 Fiddle

任何人都可以让它工作 - header 宽度和数据列宽度对齐吗？

请fork我的Fiddle，不要从头开始，保留变量名等

Answer 1

尝试设置您的 gridOptions，包括 angularComileHeader: true，以确保您的 headers 以正确的方式与 AngularJS 一起工作。请检查此 runnable plnkr 并将其与您的解决方案进行比较。还要确保您使用的是最新版本的 ag-grid.

$scope.gridOptions = {
  columnDefs: columnDefs,
  rowData: $scope.rowData,
  angularCompileHeaders: true,
  enableColResize: true,
  enableSorting: true,
  enableFilter: true
};

Ag-grid 和 AngularJS - header 宽度未与数据列对齐

Ag-grid with AngularJS - header width is not aligning with data columns

html

javascript

angularjs

ag-grid

查看

控制器