并非所有行都在 ng-grid 中呈现

Question

在我的项目中，我从服务器获取数据，并收到 20 个数据项。但是，只渲染了 6 行，而在 ng-repeat 中有 6 行。但是 canvas 的高度计算正确所有其他项目在 window 调整大小后出现。此问题类似于：https://github.com/angular-ui/ng-grid/issues/860 但是使用 virtualizationThreshold 对我不起作用而且没有其他办法

这是控制器代码的一部分：

app.controller('NagruzkaController', ['$scope', 'NagruzkaService', 'Cacher', 'RawInfoRetriever', '$timeout',
function ($scope, NagruzkaService, Cacher, RawInfoRetriever, $timeout) {
    $scope.configRequest = {};

    $scope.showLoader = false;
    $scope.showTable = false;

    $scope.fetch = function () {
        $scope.showLoader = true;

            NagruzkaService.getAll().then(function (data) {
                var tmp = RawInfoRetriever(data);
                $scope.nagruzkaData = tmp;
                Cacher.nagruzka = $scope.nagruzkaData;

                $scope.showLoader = false;
                $scope.showTable = true;
            });
        }
    };

    $scope.gridOptions = {
        data: 'nagruzkaData',
        enableColumnResize: true,
        showGroupPanel: true
    };

在我的 html 模板中，我以这种方式使用 ng-grid：

<div class="gridStyle" ng-grid="gridOptions" ng-show="showTable"></div>

我通过 npm 获得了 ng-grid，我当前的版本是 2.0.1 我试图获得更高版本并尝试使用 2.0.14，但是这个版本根本不显示行，直到 window 调整大小。

谁能帮我解决这个问题？

Answer 1

您将不得不使用 ng-grid 插件 Flexible Height Plugin。将此插件添加到网格选项的插件属性。

$scope.gridOptions = {
    data: 'nagruzkaData',
    enableColumnResize: true,
    showGroupPanel: true,
    plugins: [new ngGridFlexibleHeightPlugin()]
};

Answer 2

最终，由于我需要尽快解决这个问题，我最终只是通过 jQuery 触发了空的 'resize' 事件，这使得 ng-grid 重建并显示所有收到的数据来自服务器。

Answer 3

请使用这个不是所有的行都在 ng-grid 中呈现它会 100%

 $scope.gridOptions.excessRows = 100;

并非所有行都在 ng-grid 中呈现

Not all rows are rendered in ng-grid

javascript

angularjs

ng-grid