角度 ng-grid 行高

Posted 2023-03-06

【中文标题】角度 ng-grid 行高

【英文标题】：Angular ng-grid row height

【发布时间】：2013-10-06 08:18:15

【问题描述】：

有没有办法根据其内容在 ng-grid 中应用行的高度。 有一个选项 rowHeight 可以更改所有行的高度。但我想要根据其内容动态行高。

以下是我做的Plunker，这里我用cellTemplate插入教育字段，但是我想根据教育字段的细节增加行高。

http://plnkr.co/edit/tQJNpB?p=preview

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

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

【参考方案1】：

这些类将使表格充当实际表格，使用显示表格行和表格单元格。

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

【讨论】：

在将这些样式与 virtualizationThreshold 选项一起使用时要小心 - 当超过它时，视口开始表现异常

感谢 Yair，所以你在那里学习了 angular.js :) 如何根据其内容使整个 ng-grid 高度动态化？

Dejel - 将 ngViewport 类设置为 height:auto 和 overflow:visible;

除了行虚拟化和动态网格高度插件之外，还有什么会破坏的吗？如果一个人可以没有这些，这可以用吗？

玩了一会儿之后，图表的内部高度和宽度似乎有点偏离，并且固定似乎无法正常工作。

【参考方案2】：

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

示例是在 Angular 通过来自 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);

【讨论】：

这只适用于一个网格。需要弄清楚如何获取当前网格的范围，然后进行此视口更改。

【参考方案3】：

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

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

.ngCellText
    white-space:normal !important;
    

.ngVerticalBarVisible
      height: 100% !important;
    

我还没有在高负载或跨浏览器的情况下对此进行测试，但一旦我这样做了就会更新更多。

getuliojr 为 ng-grid 提供灵活高度的 GH 回购：https://github.com/getuliojr/ng-grid/commits/master

【参考方案4】：

这些解决方案都不能完全发挥作用。在整个代码中都假定高度是固定的。行虚拟化通常会假设这一点，因为您不会一次加载所有行，因此很难判断网格的最终高度。 NGrid 3.0 应该支持动态行高，但我不确定它什么时候准备好。

【参考方案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>

【参考方案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()]