Question

提出

但如果我们使用CSS修复问题会影响页面响应能力和ng-grid的标题功能（如排序等），那么这些都不能满足我的要求。

.ngCell  {
  display : table-cell;
  height: auto !important;
  overflow:visible;
  position: static;
}

.ngRow {
  display : table-row;
  height: auto !important;
  position: static;
}

.ngCellText{
  height: auto !important;
  white-space: normal;
  overflow:visible;
}

有任何解决方案，不影响页面响应，必须通过纯java脚本/ angularjs / css解决

Answer 1

我已经实现了一个简单的解决方案，可以根据可见行严格动态更改表的高度。我正在使用Ui-Grid-Unstable v3.0

我的HTML看起来像：

<div id="grid1" ui-grid="gridOptions" ui-grid-grouping ui-grid-exporter class="grid"></div>

在你的控制器中添加：

$scope.$watch('gridApi.core.getVisibleRows().length', function() {
    if ($scope.gridApi) {
        $scope.gridApi.core.refresh();
        var row_height = 30;
        var header_height = 31;
        var height = row_height * $scope.gridApi.core.getVisibleRows().length + header_height;
        $('.grid').height(height);
        $scope.gridApi.grid.handleWindowResize();
    }
});

要关闭滚动，请在初始化gridOptions的位置添加以下行：

enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,

确保将uiGridConstants传递给您的控制器：

angular.module('app').controller('mainController', function($scope, uiGridConstants) { ...

希望这有帮助！

根据内容动态增加ng-grid行高，无需额外的插件和jquery

1 个答案: