角度ui网格动态计算网格的高度

时间：2015-01-08 10:00:36

标签： angularjs angular-ui angular-ui-grid

我正在使用：https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.0-RC.18 

<div ui-grid="gridOptions" style="height:765px"></div>

当我对该值进行硬编码时，如上所示，网格展开，一切都按预期工作。

但是，如果我执行以下操作...... 

$scope.gridStyle = 'height:'+numRows*rowHeight+'px' //(765px);
<div ui-grid="gridOptions" style="{{gridStyle}}"></div>

高度打印在div和div加宽但内容本身扩大到仅340px左右。剩下的空间是空白的，所以不是25行我只看到8.我必须向下滚动，而网格中有400px的空闲。 ui-grid-viewport和ui-grid-canvas都没有使用这个空间...

为什么ui-grid-viewport不能使用该空间？

8 个答案:

答案 0 :(得分：76)

我使用ui-grid - v3.0.0-rc.20，因为当你走到容器的最高位置时scrolling issue is fixed。使用ui.grid.autoResize模块将动态自动调整网格大小以适合您的数据。要计算网格的高度，请使用以下函数。 ui-if是可选的，等待在渲染之前设置数据。

＆＃13;
＆＃13; 
angular.module('app',['ui.grid','ui.grid.autoResize']).controller('AppController', ['uiGridConstants', function(uiGridConstants) {
    ...
    
    $scope.gridData = {
      rowHeight: 30, // set row height, this is default size
      ...
    };
  
    ...

    $scope.getTableHeight = function() {
       var rowHeight = 30; // your row height
       var headerHeight = 30; // your header height
       return {
          height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px"
       };
    };
      
    ...
＆＃13; 
<div ui-if="gridData.data.length>0" id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize ng-style="getTableHeight()"></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：18)

使用css设置更简单的方法，并动态设置minRowsToShow和virtualizationThreshold值。

在样式表中：

.ui-grid, .ui-grid-viewport {
    height: auto !important;
}

在代码中，每次更改data中的gridOptions时，请调用以下函数。 maxRowToShow是您预先定义的值，对于我的用例，我将其设置为25.

ES5：

setMinRowsToShow(){
    //if data length is smaller, we shrink. otherwise we can do pagination.
    $scope.gridOptions.minRowsToShow = Math.min($scope.gridOptions.data.length, $scope.maxRowToShow);
    $scope.gridOptions.virtualizationThreshold = $scope.gridOptions.minRowsToShow ;
}

答案 2 :(得分：3)

<强>更新：

请求HTML，所以我在下面粘贴了它。

<div ui-grid="gridOptions" class="my-grid"></div>

<强> ORIGINAL ：

我们能够通过使用响应式CSS（@media）来充分解决此问题，该CSS根据屏幕空间设置高度和宽度。类似的东西（显然你可以根据你的需要添加更多）：

@media (min-width: 1024px) {
  .my-grid {
    width: 772px;
  }
}

@media (min-width: 1280px) {
  .my-grid {
    width: 972px;
  }
}

@media (min-height: 768px) {
  .my-grid {
    height: 480px;
  }
}

@media (min-height: 900px) {
  .my-grid {
    height: 615px;
  }
}

此解决方案的最佳部分是我们不需要调整大小事件来监视网格大小的变化。它只是有效。

答案 3 :(得分：1)

我喜欢Tony的方法。它有效，但我决定以不同的方式实施。在这里我的评论：

1）我做了一些测试，当使用ng-style时，Angular评估ng风格的内容，我的意思是getTableHeight（）函数不止一次。我在getTableHeight（）函数中添加了一个断点来分析它。

顺便说一句，ui-if被删除了。现在你有了ng-if内置。

2）我更喜欢写这样的服务：

angular.module('angularStart.services').factory('uiGridService', function ($http, $rootScope) {

var factory = {};

factory.getGridHeight = function(gridOptions) {

    var length = gridOptions.data.length;
    var rowHeight = 30; // your row height
    var headerHeight = 40; // your header height
    var filterHeight = 40; // your filter height

    return length * rowHeight + headerHeight + filterHeight + "px";
}
factory.removeUnit = function(value, unit) {

    return value.replace(unit, '');
}
return factory;

}）;

然后在控制器中写下以下内容：

  angular.module('app',['ui.grid']).controller('AppController', ['uiGridConstants', function(uiGridConstants) {

  ...

  // Execute this when you have $scope.gridData loaded...
  $scope.gridHeight = uiGridService.getGridHeight($scope.gridData);

在HTML文件中：

  <div id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize style="height: {{gridHeight}}"></div>

当angular应用样式时，它只需要查看$ scope.gridHeight变量，而不是评估一个完整的函数。

3）如果要动态计算可扩展网格的高度，则会更复杂。在这种情况下，您可以设置expandableRowHeight属性。这将修复每个子网格的保留高度。 

    $scope.gridData = {
        enableSorting: true,
        multiSelect: false,  
        enableRowSelection: true,
        showFooter: false,
        enableFiltering: true,    
        enableSelectAll: false,
        enableRowHeaderSelection: false, 
        enableGridMenu: true,
        noUnselect: true,
        expandableRowTemplate: 'subGrid.html',
        expandableRowHeight: 380,   // 10 rows * 30px + 40px (header) + 40px (filters)
        onRegisterApi: function(gridApi) {

            gridApi.expandable.on.rowExpandedStateChanged($scope, function(row){
                var height = parseInt(uiGridService.removeUnit($scope.jdeNewUserConflictsGridHeight,'px'));
                var changedRowHeight = parseInt(uiGridService.getGridHeight(row.entity.subGridNewUserConflictsGrid, true));

                if (row.isExpanded)
                {
                    height += changedRowHeight;                    
                }
                else
                {
                    height -= changedRowHeight;                    
                }

                $scope.jdeNewUserConflictsGridHeight = height + 'px';
            });
        },
        columnDefs :  [
                { field: 'GridField1', name: 'GridField1', enableFiltering: true }
        ]
    }

答案 4 :(得分：1)

.ui-grid，.ui-grid-viewport，.ui-grid-contents-wrapper，.ui-grid-canvas {         身高：自动！重要;     }

答案 5 :(得分：1)

我迟到了，但我找到了一个很好的解决方案。我创建了一个自定义属性指令，你需要做的就是传入gridApi，它会自动计算高度。它还订阅了分页更改事件，因此如果用户更改页面大小，它将调整大小。

class UIGridAutoResize implements ng.IDirective {
    link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
    scope: { gridApi: "=" };
    restrict = "A";

    private previousValue: string;
    private isValid: boolean = true;
    private watch: any;

    constructor($timeout: ng.ITimeoutService) {
        UIGridAutoResize.prototype.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
            const gridOptions = scope.$eval(attrs.uiGrid) as any;
            const gridApi = scope.$eval(attrs.gridResize) as any;

            gridApi.core.on.rowsRendered(scope, () => {
                $timeout(() => {
                    this.autoSizeGrid(element, attrs, gridOptions, gridApi, false);
                }, 100);
            });

            gridApi.core.on.filterChanged(scope, () => {
                this.autoSizeGrid(element, attrs, gridOptions, gridApi, false);
            });

            if (attrs.uiGridPagination === "") {
                gridApi.pagination.on.paginationChanged(null, () => {
                    this.autoSizeGrid(element, attrs, gridOptions, gridApi, true);
                });
            }

            angular.element(window).resize(() => {
                $timeout(() => {
                    this.autoSizeGrid(element, attrs, gridOptions, gridApi, false);
                }, 100);
            });
        };
    }

    static Factory(): ng.IDirectiveFactory {
        const directive = ($timeout: ng.ITimeoutService) => {
            return new UIGridAutoResize($timeout);
        };

        directive["$inject"] = ["$timeout"];

        return directive;
    }

    private autoSizeGrid(element: ng.IAugmentedJQuery, attrs: ng.IAttributes, gridOptions: any, gridApi: any, isPaginationChanged: boolean) {
        gridApi.core.handleWindowResize();

        // Clear empty grid message 
        angular.element(element.parent()).find("#emptyGridMessage").remove();
        element.find(".ui-grid-viewport").css("display", "");

        if (attrs.hidePageSize === "") {
            element.find(".ui-grid-pager-row-count-picker").css("display", "none");
        }

        let rowCount = gridApi.core.getVisibleRows().length;

        const headerElements = element.find(".ui-grid-header");
        let headerHeight = 2;

        if (headerElements.length > 1) { // If we have more than one header element the grid is using grouping
            const headerElement = angular.element(headerElements[1]);
            headerHeight += headerElement.height();
        } else {
            headerHeight += headerElements.height();
        }

        if (attrs.uiGridPagination === "") {
            if (rowCount < 1) {
                gridOptions.enablePagination = false;
                gridOptions.enablePaginationControls = false;
                element.css("height", (rowCount * 30) + headerHeight - 2);
                element.find(".ui-grid-viewport").css("display", "none");
                angular.element("<div id='emptyGridMessage' style='font-size: 1em; width: 100%; background-color: white; border: 1px solid #d4d4d4; padding: 7px 12px; color: #707070;'><span style='opacity: 0.95;'>There are no records.</span></div>").insertAfter(element);
            } else if (gridApi.core.getVisibleRows().length < gridOptions.paginationPageSize && !isPaginationChanged) {
                gridOptions.enablePagination = false;
                gridOptions.enablePaginationControls = false;
                element.css("height", (rowCount * 30) + headerHeight);
            } else {
                gridOptions.enablePagination = true;
                gridOptions.enablePaginationControls = true;              
                element.css("height", (rowCount * 30) + headerHeight);
            }
        } else {
            if (rowCount < 1) {
                element.css("height", (rowCount * 30) + headerHeight - 2);
                element.find(".ui-grid-viewport").css("display", "none");
                angular.element("<div id='emptyGridMessage' style='font-size: 1em; width: 100%; background-color: white; border: 1px solid #d4d4d4; padding: 7px 12px; color: #707070;'><span style='opacity: 0.95;'>There are no records.</span></div>").insertAfter(element);
            } else {
                element.css("height", (rowCount * 30) + headerHeight);
            }
        }

        // Add extra margin to prevent scroll bar and pager from overlapping content underneath
        const pagerHeight = element.find(".ui-grid-pager-panel").height();

        if (rowCount > 0) {
            if (pagerHeight > 0)
                element.css("margin-bottom", pagerHeight);
            else
                element.css("margin-bottom", 10);
        } else {
            if (pagerHeight > 0)
                angular.element(element.parent()).find("#emptyGridMessage").css("margin-bottom", pagerHeight);
            else 
                angular.element(element.parent()).find("#emptyGridMessage").css("margin-bottom", 10);
        }

        if (rowCount > gridOptions.paginationPageSize) // Sometimes paging shows all rows this fixes that
           gridApi.core.refresh();
    }
}

<div ui-grid="vm.gridOptions" grid-resize="vm.gridApi" ui-grid-resize-columns ui-grid-pagination></div>

答案 6 :(得分：0)

tony的方法对我有用，但是当做一个console.log时，函数getTableHeight被调用了太多时间（排序，菜单点击......）

我修改它，所以只有当我添加/删除行时才重新计算高度。注意：tableData是行数组

$scope.getTableHeight = function() {
   var rowHeight = 30; // your row height
   var headerHeight = 30; // your header height
   return {
      height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px"
   };
};

$scope.$watchCollection('tableData', function (newValue, oldValue) {
    angular.element(element[0].querySelector('.grid')).css($scope.getTableHeight());
});

HTML 

<div id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize"></div>

答案 7 :(得分：0)

遵循@ tony的方法，将getTableHeight（）函数更改为

int value is abcdef78
first byte is 78 addr is 2686741
second byte is ffffffef addr is 2686742
third byte is ffffffcd addr is 2686743
fourth byte is ffffffab addr is 2686744

网格在窗口高度方面也会有动态高度。

相关问题
最新问题