Pytanie Kątowa wysokość rzędu siatki


czy jest jakiś sposób na zastosowanie wysokości rzędu w ng-grid zgodnie z jego treścią. istnieje jedna opcja rowHeight, która zmienia wysokość wszystkich rzędów. Ale chcę dynamicznej wysokości wiersza zgodnie z jego treścią.

Poniżej znajduje się zrobiony przeze mnie Plunker, w tym celu użyłem cellTemplate do wstawienia pola edukacyjnego, ale chcę zwiększyć wysokość wiersza zgodnie z wykresem terenu edukacyjnego.

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

Według tego linku nie jest to możliwe: [1]https://github.com/angular-ui/ng-grid/issues/157

Ale jeśli ktoś znajdzie rozwiązanie ...


21
2017-09-30 12:49


pochodzenie




Odpowiedzi:


Klasy te sprawią, że tabela będzie działać jako rzeczywista tabela, przy użyciu wyświetlania wiersza tabeli i komórki tabeli.

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

Pamiętaj, że jest to obsługiwane przez IE8 i nowsze wersje. Zastępuje również wszystkie klasy siatki ng, więc mądrze będzie użyć ich w bazie "need to":

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

21
2017-12-01 15:25



Uważaj podczas używania tych stylów za pomocą opcji virtualizationThreshold - po przekroczeniu okno ekranu zaczyna działać dziwnie - link64
Dzięki Yair, więc nauczyłeś się tam kodu angular.js :) Jak mogę dokonać całej dynamicznej wysokości ng-grid w oparciu o jej zawartość? - Dejell
Dejel - ustaw klasę ngViewport na wysokość: auto i przepełnienie: widoczne; - Yair Tavor
Poza wirtualizacją wierszy i wtyczkami dynamicznej wysokości siatki, czy coś jeszcze się zepsuje? Jeśli można bez nich żyć, czy można z tego korzystać? - patorjk
Po nieco dalszej zabawie wygląda na to, że wewnętrzna wysokość i szerokość wykresu nieznacznie się zmniejszają, a przypinanie nie działa poprawnie. - patorjk


Badanie tego odkryło, że w mojej poprawce powinien zadzwonić anonimowa funkcja $scope.resizeViewPort za każdym razem, gdy zmienia się dane ngGrid lub powinno być wywoływane za każdym razem, gdy wiersze rzutni są aktualizowane.

Przykłady są po kątowe wykonuje aktualizacje wierszy za pośrednictwem danych z modułu ng-grid. Te kroki przydały mi się w mojej anonimowej funkcji tylko dla wysokości:

$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);
}

2
2018-02-13 20:47



Działa to tylko dla jednej siatki. Musisz dowiedzieć się, jak uzyskać zasięg aktualnej siatki, a następnie zmień port widoku. - user3250966


Chciałem zagłosować na to pytanie. Kontynuowałem ten przykład i skorzystałem z rozwiązania dostarczonego przez getuliojr. To rozwiązanie wydaje się działać całkiem dobrze, pamiętaj, że będziesz musiał sklonować widelec i zbudować źródło, aby móc go używać w swojej aplikacji. Mam żywą grę na żywo: http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview

Zauważ, że będziesz musiał dodać 2 reguły css:

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

.ngVerticalBarVisible{
      height: 100% !important;
    }

Muszę to przetestować pod dużym obciążeniem lub w różnych przeglądarkach, ale zaktualizuję je jeszcze raz.

GH Repo dla ng-grid z elastyczną wysokością przez getuliojr: https://github.com/getuliojr/ng-grid/commits/master


2
2018-04-16 21:02





Żadne z tych rozwiązań nie będzie działać całkowicie. Ustalana wysokość jest przyjmowana przez cały kod. Jest to typowe dla wirtualizacji wierszy, ponieważ zakłada się, że nie ładuje się wszystkich wierszy jednocześnie, dlatego bardzo trudno jest określić ostateczną wysokość siatki. NGrid 3.0 ma obsługiwać dynamiczną wysokość wiersza, ale nie jestem pewien, kiedy oczekuje się, że będzie gotowy.


1
2018-05-12 16:10





Adapt-Strap. Tutaj jest skrzypce.

Jest niezwykle lekki i ma dynamiczne wysokości rzędów.

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

1
2017-09-06 07:28





to nie jest najseksowniejsza rzecz na świecie i wątpię, żeby to była ta wydajność, ale to działa:

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

wykonaj używając wtyczek w opcjach:

plugins: [new flexRowHeight()]

0
2017-12-01 22:03