Hauteur angulaire de la rangée ng-grid

Ces classes permettront au tableau d'agir en tant que table actuelle, à l'aide de l'affichage table-ligne et 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; } 

Veuillez noter que ceci est pris en charge par IE8 et plus haut. Il supprime également l'ensemble des classes de grille ng afin qu'il soit judicieux d'utiliser sur une base de «besoin de»:

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

En recherchant cela, j'ai découvert que dans mon correctif, il faut appeler la fonction anonyme $scope.resizeViewPort chaque fois qu'il modifie les données de ngGrid ou doit être appelé chaque fois que les lignes de fenêtre sont mises à jour.

Les exemples sont postérieurs à l'analyse angulaire des mises à jour des lignes via les données du module ng-grid. J'ai trouvé ces étapes utiles dans ma fonction anonyme uniquement pour la taille:

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

Je voulais répondre à cette question. J'ai suivi cet exemple et j'ai utilisé la solution fournie par getuliojr. Cette solution semble fonctionner très bien, notez que vous devrez cloner la fourchette et construire la source afin de l'utiliser dans votre application. J'ai un plunker en direct de cela fonctionne: http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview

Notez que vous devrez également ajouter 2 règles css:

 .ngCellText{ white-space:normal !important; } .ngVerticalBarVisible{ height: 100% !important; } 

Je n'ai pas encore testé cela sous une charge importante ou un navigateur croisé, mais je le mettrai à jour plus une fois que je le ferai.

GH Repo pour ng-grid avec hauteur flexible par getuliojr: https://github.com/getuliojr/ng-grid/commits/master

Aucune de ces solutions ne fonctionnera complètement. La hauteur réglée est supposée tout au long du code. Il est typique de la virtualisation en ligne de l'assumer parce que vous ne chargez pas toutes les lignes à la fois, donc il est très difficile de dire la hauteur maximale de la grille. NGrid 3.0 est censé prendre en charge la hauteur de rangée dynamique, mais je ne suis pas sûr de savoir quand il est prévu qu'il soit prêt.

Adapt-Strap . Voici le violon .

Il est extrêmement léger et a des hauteurs de rangées dynamiques.

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

Ce n'est pas la chose la plus sexy du monde et je doute que ce soit l'interprète, mais cela fait l'affaire:

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

Exécutez en utilisant des plugins dans les options:

 plugins: [new flexRowHeight()]