Angular высота строки сетки ng

Ответ 1

Эти классы сделают таблицу действительной таблицей, используя таблицу display table-table и 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, поэтому было бы разумно использовать базу "need to":

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

Ответ 2

Исследование этого обнаружило, что в моем исправлении должна вызывать анонимную функцию $scope.resizeViewPort всякий раз, когда она вносит изменения в данные ngGrid или должна быть вызвана всякий раз, когда обновляются строки в окне просмотра.

Примеры после 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. Это решение работает очень хорошо, обратите внимание, что вам придется клонировать вилку и строить источник для использования в вашем приложении. Я работаю над ним: http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview

Обратите внимание, что вам также необходимо добавить 2 правила css:

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

.ngVerticalBarVisible{
      height: 100% !important;
    }

Мне еще предстоит проверить это при значительной нагрузке или кросс-браузере, но я буду обновлять его еще раз.

GH Repo для ng-сетки с гибкой высотой по getuliojr: 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()]