AngularJS ng-Grid i ngGridFlexibleHeightPlugin nie działają zgodnie z oczekiwaniami

Próbuję użyć Angular ng-grid, aby pokazać dynamiczną zawartość. Siatka będzie mieć 0 - 25 rzędów. Chcę mieć minimalny rozmiar, a następnie ng-grid automatycznie dostosować wysokość, gdy elementy zostaną dodane do tablicy. Z jakiegoś powodu rozmiar automatyczny zatrzymuje się po dodaniu 6-7 elementów (wydaje się to nawet zależeć od rozdzielczości).AngularJS ng-Grid i ngGridFlexibleHeightPlugin nie działają zgodnie z oczekiwaniami

Czy ktoś może pomóc? czego mi brakuje? Mam poniżej Plunkera, który pokazuje problem.

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

Źródło

2013-05-20 Aaron Hickman

I został uruchomiony w takich i innych problemów i rozpoczął próbę naprawić (patrz widelec na github oddziału improve_layout https://github.com/a5sk4s/ng-grid/tree/improve_layout) - to jest praca w toku i może wprowadzać nowe problemy - zobacz rozwidlenie twojego pluna tutaj: http://plnkr.co/edit/06CYAGjVURxGxDfX8wnt (niektóre problemy z układem, ponieważ zmieniłem ng-grid.css i nie mogę tego odnieść) - mam nadzieję, że pomoże – Andreas

Dzięki Andreas. Obawiałem się, że nie używam wtyczki poprawnie lub nawet ngGrid. Wygląda na to, że ma teraz tylko kilka problemów. W przypadku tego konkretnego problemu, czy wiesz, jakie produkty zmodyfikowałeś w swoim oddziale? Mogę wprowadzić zmiany lokalnie, gdzie nie sądzę, że korzystanie z tej gałęzi jest dla mnie opcją. –

Andreas, link do twojego plunkera jest zepsuty. – Rob

Kod poniżej jest modyfikacją do wtyczki. Działa poprzez sprawdzenie liczby elementów w danych siatki i obliczenie wysokości na podstawie tego. Opcje przekazywane do wtyczki to wysokość wiersza i wysokość nagłówka.

ngGridCustomFlexibleHeightPlugin = function (opts) { 
    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 recalcHeightForData = function() { setTimeout(innerRecalcForData, 1); }; 
     var innerRecalcForData = function() { 
      var gridId = self.grid.gridId; 
      var footerPanelSel = '.' + gridId + ' .ngFooterPanel'; 
      var extraHeight = self.grid.$topPanel.height() + $(footerPanelSel).height(); 
      var naturalHeight = (grid.data.length - 1) * opts.rowHeight + opts.headerRowHeight; 
      self.grid.$viewport.css('height', (naturalHeight + 2) + 'px'); 
      self.grid.$root.css('height', (naturalHeight + extraHeight + 2) + 'px'); 
      // self.grid.refreshDomSizes(); 
      if (!self.scope.$$phase) { 
       self.scope.$apply(function() { 
        self.domUtilityService.RebuildGrid(self.scope, self.grid); 
       }); 
      } 
      else { 
       // $digest or $apply already in progress 
       self.domUtilityService.RebuildGrid(self.scope, self.grid); 
      } 
     }; 
     scope.$watch(grid.config.data, recalcHeightForData); 

    }; 
};

Źródło

2014-03-03 17:37:30

nie działa dla mnie w ogóle: "caught TypeError: Can not read property" rowHeight "of undefined". Oryginalna wersja działa dobrze. – sgroves

Jeśli nadal występują problemy chciałbym sugestia nie używając NG-siatkę i tworzą układ bezpośrednio w html (Użyj DIV, formatowanie szerokość kolumny, style, itp ...). Następnie zapełnij nowy układ za pomocą $ scope. Między zmiennymi, modelami i ng-repeat powinieneś być w stanie zrobić wszystko, czego potrzebujesz.

Źródło

2015-03-25 22:25:31

Uważam, że użycie tego fragmentu kodu w arkuszu stylów rozwiązało mój problem. Wyłączyłem wtyczkę, ale działa ona w dowolny sposób.

.ngViewport.ng-scope{ 
    height: auto !important; 
    overflow-y: hidden; 
} 

.ngTopPanel.ng-scope, .ngHeaderContainer{ 
    width: auto !important; 
} 
.ngGrid{ 
    background-color: transparent!important; 
}

Mam nadzieję, że ktoś pomaga

Źródło

2016-04-08 19:27:20

AngularJS ng-Grid i ngGridFlexibleHeightPlugin nie działają zgodnie z oczekiwaniami

Odpowiedz

Powiązane problemy