Question

如果您从阵列中添加/删除项目，扩展的手风琴组会正确调整大小。但是，如果过滤数组中的项目，使用$ grep来分配项目，手风琴部分不会重绘，但ng-grid会重绘。

打开plunkr，展开ng-grid部分，然后使用按钮查看行为。

angular.module('AccordionApp', ['ui.bootstrap', 'ngGrid']);
function AccordionDemoCtrl($scope) {
    $scope.oneAtATime = true;
    $scope.items = [{ id: 1, name: 'Camera 1' }, { id: 2, name: 'Camera 2' }, { id: 3, name: 'Camera 3' }];
    $scope.filteredItems = $scope.items;
    $scope.filtered = false;

    $scope.filterItems = function () {
        if (!$scope.filtered) {
            $scope.filteredItems = $.grep($scope.items, function (e) { return e.id == 1; });
        } else {
            $scope.filteredItems = $scope.items;
        }
        $scope.filtered = !$scope.filtered;
    }
    $scope.addItem = function () {
        var newItemNo = $scope.items.length + 1;
        $scope.items.push({ id: newItemNo, name: 'Camera ' + newItemNo });
    };
    $scope.removeItem = function () {
        $scope.items.splice($scope.items.length - 1, 1);
    };

    $scope.getGridOptions = {
        data: 'filteredItems',
        columnDefs: [
        { field: 'id', displayName: 'Id', width: '*' },
        { field: 'name', displayName: 'Name', width: '*' }
        ],
        enableCellSelection: false,
        enableRowSelection: false,
        enableCellEditOnFocus: false,
    };

    $scope.getGridStyle = function () {
        var rowHeight = 30;
        var headerHeight = 34;
        var height = +($scope.items.length * rowHeight + headerHeight);
        if (height > 300) {
            height = 300;
        }
        return {
            height: height + "px",
        }
    };

    $scope.redrawGrid = function () {
        window.setTimeout(function () {
            $(window).resize();
            $(window).resize();
        }, 250);
    };
}

Answer 1

不确定这是否是您想要的，而是更改$scope.getGridStyle()中的高度计算

var height = +($scope.items.length * rowHeight + headerHeight);

到

var height = +($scope.filteredItems.length * rowHeight + headerHeight);

似乎解决了这个问题。

试试here

手风琴的ng-grid没有正确调整大小

1 个答案: