AngularJS ng-Grid e ngGridFlexibleHeightPlugin non funzionano come previsto

Question

Sto tentando di utilizzare Angular ng-grid per mostrare alcuni contenuti dinamici. La griglia avrà 0 - 25 righe. Voglio avere una dimensione minima e poi fare in modo che la griglia di ng aggiusti l'altezza man mano che gli oggetti vengono aggiunti alla matrice. Per qualche motivo, la dimensione automatica si interrompe dopo l'aggiunta di 6-7 elementi (sembra che dipenda anche dalla risoluzione).

Qualcuno può aiutare? Cosa mi manca? Ho un Plunker qui sotto che mostra il problema.

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

Answer 1

Il codice soffietto è una modifica al plugin. Funziona controllando il numero di elementi nei dati della griglia e calcolando l'altezza in base a quello. Le opzioni passate al plug-in sono l'altezza della riga e l'altezza dell'intestazione.

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

    }; 
}; 

Answer 2

Se si continua ad avere problemi avrei suggerimento che non usano il ng-grid e creare il layout direttamente in HTML (Usa DIV, formattazione larghezza della colonna, stili, ecc ...). Quindi compila il tuo nuovo layout usando $ scope. Tra variabili, modelli e ng-repeat dovresti essere in grado di fare tutto ciò di cui hai bisogno.

Answer 3

Trovo che l'utilizzo di questo pezzo di codice sul foglio di stile abbia risolto il problema. Ho disabilitato il plugin ma funziona in entrambi i modi.

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

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

Spero che aiuta qualcuno