javascript - navigationend - Altura de la fila de la rejilla angular ng

router events subscribe angular 4

Question

¿Hay alguna forma de aplicar la altura de la fila en ng-grid de acuerdo con su contenido? hay una opción rowHeight que cambia la altura de todas las filas. Pero quiero una altura de fila dinámica según su contenido.

A continuación, se encuentra el Plunker que hice, en este caso, he usado cellTemplate para insertar el campo Educación, pero quiero aumentar la altura de la fila según el detalle del campo educativo.

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

Según este enlace no es posible: [1] https://github.com/angular-ui/ng-grid/issues/157

Pero si alguien encuentra la solución ...

Answer 1

Al investigar esto, descubrí que, en mi corrección, debería llamar a la función anónima $scope.resizeViewPort cada vez que se realicen cambios en los datos de ngGrid o se debería llamar cada vez que se actualicen las filas de la ventana.

Algunos ejemplos son después de que Angular realiza actualizaciones a las filas a través de los datos del módulo ng-grid. He encontrado estos pasos útiles en mi función anónima para la altura solamente:

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

Answer 2

Estas clases harán que la tabla actúe como una tabla real, mediante la visualización de tabla-fila y tabla-celda.

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

Tenga en cuenta que esto es compatible con IE8 y superiores. También está anulando todas las clases de ng grid, por lo que será prudente utilizarlo en una "necesidad de" base:

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

Answer 3

Ninguna de estas soluciones funcionará completamente. La altura que se fija se asume en todo el código. Es típico que la virtualización de filas suponga esto porque no está cargando todas las filas a la vez, por lo que es muy difícil determinar la altura máxima de la cuadrícula. Se supone que NGrid 3.0 es compatible con la altura de fila dinámica, pero no estoy seguro de cuándo se espera que esté listo.

Answer 4

No es la cosa más sexy del mundo y dudo que sea un actor excelente, pero este es el truco:

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

Ejecutar usando plugins en opciones:

plugins: [new flexRowHeight()]

Answer 5

Quería ponerme a tono con esta pregunta. He seguido este ejemplo y he usado la solución provista por getuliojr. Esta solución parece funcionar bastante bien, tenga en cuenta que tendrá que clonar la bifurcación y construir la fuente para poder utilizarla en su aplicación. Tengo un plunker en vivo trabajando: http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview

Tenga en cuenta que también necesitará agregar 2 reglas de css:

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

.ngVerticalBarVisible{
      height: 100% !important;
    }

Todavía tengo que probar esto con una carga significativa o un navegador cruzado, pero actualizaré con más una vez que lo haga.

GH Repo para ng-grid con altura flexible por getuliojr: https://github.com/getuliojr/ng-grid/commits/master

Answer 6

Adapt-Strap . Aquí está el fiddle .

Es extremadamente ligero y tiene alturas de fila dinámicas.

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