Question

有没有办法根据其内容应用ng-grid中行的高度。有一个选项rowHeight，它改变了所有行的高度。但我希望根据其内容获得动态行高。

以下是我制作的Plunker，在此我使用了cellTemplate来插入教育字段，但我想根据教育领域细节增加行高。

根据此链接，不可能： [1] https://github.com/angular-ui/ng-grid/issues/157

但如果有人找到解决方案.....

Answer 1

这些类将使表显示为实际表，使用display table-row和table-cell。

.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;
}

请注意，IE8及以上版本支持此功能。它也覆盖了整个ng网格类，因此在“需要”基础上使用它是明智的：

#myTableId .ngCell {...}
#myTableId .ngRow {...}
...

Answer 2

研究这一点发现，在我的修复程序中，只要对ngGrid数据进行更改，就应调用匿名函数$scope.resizeViewPort，或者每当更新视口行时都应调用它。

示例是在角度通过ng-grid模块的数据执行对行的更新之后。我发现这些步骤在我的匿名函数中只对高度有用：

$scope.resizeViewPort = function { // and the two steps below
  // retrieve viewPortHeight
  var viewportHeight = $('ngViewPort').height();
  var gridHeight = $('ngGrid').height();

  // set the .ngGridStyle or the first parent of my ngViewPort in current scope
  var viewportHeight = $('.ngViewport').height();
  var canvasHeight = $('.ngCanvas').height();
  var gridHeight = $('.ngGrid').height();

  alert("vp:" + viewportHeight + " cv:" + canvasHeight + " gh:" + gridHeight);
  var finalHeight = canvasHeight;
  var minHeight = 150;
  var maxHeight = 300;


  // if the grid height less than 150 set to 150, same for > 300 set to 300
  if (finalHeight < minHeight) {
    finalHeight = minHeight;
  } else if (finalHeight > viewportHeight) {
    finalHeight = maxHeight;
  }

  $(".ngViewport").height(finalHeight);
}

Answer 3

我想谈谈这个问题。我已经跟进了这个例子，并使用了getuliojr提供的解决方案。这个解决方案似乎工作得很好，请注意，您必须克隆fork并构建源代码才能在您的应用程序中使用。我有一个有效的工作：http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview

请注意，您还需要添加2个css规则：

.ngCellText{
    white-space:normal !important;
    }

.ngVerticalBarVisible{
      height: 100% !important;
    }

我还没有在重负载或跨浏览器下对此进行测试，但一旦我做了就会更新。

GH repo for ng-grid，灵活的高度由getuliojr：https://github.com/getuliojr/ng-grid/commits/master

Answer 4

这些解决方案都不会完全奏效。整个代码中假定高度固定。行虚拟化通常会假设这一点，因为您没有一次加载所有行，因此很难分辨网格的最终高度。 NGrid 3.0应该支持动态行高，但我不确定它何时会被准备好。

Answer 5

Adapt-Strap。这是fiddle。

它非常轻巧，具有动态的行高。

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

Answer 6

这不是世界上最性感的东西，我怀疑它是否具有高性能，但这样才能解决问题：

function flexRowHeight() {
    var self = this;
    self.grid = null;
    self.scope = null;
    self.init = function (scope, grid, services) {
        self.domUtilityService = services.DomUtilityService;
        self.grid = grid;
        self.scope = scope;

        var adjust = function() {
            setTimeout(function(){
                var row = $(self.grid.$canvas).find('.ngRow'),
                    offs;
                row.each(function(){
                    var mh = 0,
                        s = angular.element(this).scope();

                    $(this).find('> div').each(function(){
                        var h = $(this)[0].scrollHeight;
                        if(h > mh)
                            mh = h

                        $(this).css('height','100%');
                    });

                    $(this).height(mh)

                    if(offs)
                        $(this).css('top',offs + 'px');

                    offs = $(this).position().top + mh;
                    self.scope.$apply(function(){
                        s.rowHeight = mh;
                    });
                });
            },1);
        }

        self.scope.$watch(self.grid.config.data, adjust, true);
    }
}

使用选项中的插件执行：

plugins: [new flexRowHeight()]

角度ng网格行高

6 个答案: