ng-switch angularjs




Ui-rejilla angular calcula dinámicamente la altura de la rejilla (6)

Estoy usando: https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.0-RC.18

<div ui-grid="gridOptions" style="height:765px"></div>

Cuando codifico el valor, como se muestra arriba, la cuadrícula se extiende y todo funciona como se espera.

Sin embargo, si hago lo siguiente ...

$scope.gridStyle = 'height:'+numRows*rowHeight+'px' //(765px);
<div ui-grid="gridOptions" style="{{gridStyle}}"></div>

La altura se imprime en los espacios div y div, pero el contenido en sí se amplía solo a alrededor de 340 px. El espacio que queda está en blanco, así que en lugar de 25 filas solo veo 8. Tengo que desplazarme hacia abajo, mientras que hay un total de 400px libre en la cuadrícula. El ui-grid-viewport y ui-grid-canvas no están utilizando este espacio ...

¿Por qué no puede el ui-grid-viewport usar ese espacio?


.ui-grid, .ui-grid-viewport, .ui-grid-contents-wrapper, .ui-grid-canvas {height: auto! important; }


El enfoque de tony funciona para mí, pero cuando hago una consola.log, la función getTableHeight se llama demasiado tiempo (ordenar, hacer clic en el menú ...)

Lo modifico para que la altura se vuelva a calcular solo cuando agrego / elimino filas. Nota: tableData es la matriz de filas

$scope.getTableHeight = function() {
   var rowHeight = 30; // your row height
   var headerHeight = 30; // your header height
   return {
      height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px"
   };
};

$scope.$watchCollection('tableData', function (newValue, oldValue) {
    angular.element(element[0].querySelector('.grid')).css($scope.getTableHeight());
});

Html

<div id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize"></div>

Me gusta el enfoque de Tony. Funciona, pero decidí implementarlo de otra manera. Aquí mis comentarios:

1) Hice algunas pruebas y cuando uso ng-style, Angular evalúa el contenido de ng-style, me refiero a la función getTableHeight () más de una vez. Puse un punto de interrupción en la función getTableHeight () para analizar esto.

Por cierto, ui-si fue eliminado. Ahora tienes ng-if build-in.

2) Prefiero escribir un servicio como este:

angular.module('angularStart.services').factory('uiGridService', function ($http, $rootScope) {

var factory = {};

factory.getGridHeight = function(gridOptions) {

    var length = gridOptions.data.length;
    var rowHeight = 30; // your row height
    var headerHeight = 40; // your header height
    var filterHeight = 40; // your filter height

    return length * rowHeight + headerHeight + filterHeight + "px";
}
factory.removeUnit = function(value, unit) {

    return value.replace(unit, '');
}
return factory;

});

Y luego en el controlador escribe lo siguiente:

  angular.module('app',['ui.grid']).controller('AppController', ['uiGridConstants', function(uiGridConstants) {

  ...

  // Execute this when you have $scope.gridData loaded...
  $scope.gridHeight = uiGridService.getGridHeight($scope.gridData);

Y en el archivo HTML:

  <div id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize style="height: {{gridHeight}}"></div>

Cuando angular aplica el estilo, solo tiene que buscar en la variable $ scope.gridHeight y no evaluar una función completa.

3) Si desea calcular dinámicamente la altura de una cuadrícula expandible, es más complicado. En este caso, puede establecer la propiedad expandableRowHeight. Esto corrige la altura reservada para cada subgrid.

    $scope.gridData = {
        enableSorting: true,
        multiSelect: false,  
        enableRowSelection: true,
        showFooter: false,
        enableFiltering: true,    
        enableSelectAll: false,
        enableRowHeaderSelection: false, 
        enableGridMenu: true,
        noUnselect: true,
        expandableRowTemplate: 'subGrid.html',
        expandableRowHeight: 380,   // 10 rows * 30px + 40px (header) + 40px (filters)
        onRegisterApi: function(gridApi) {

            gridApi.expandable.on.rowExpandedStateChanged($scope, function(row){
                var height = parseInt(uiGridService.removeUnit($scope.jdeNewUserConflictsGridHeight,'px'));
                var changedRowHeight = parseInt(uiGridService.getGridHeight(row.entity.subGridNewUserConflictsGrid, true));

                if (row.isExpanded)
                {
                    height += changedRowHeight;                    
                }
                else
                {
                    height -= changedRowHeight;                    
                }

                $scope.jdeNewUserConflictsGridHeight = height + 'px';
            });
        },
        columnDefs :  [
                { field: 'GridField1', name: 'GridField1', enableFiltering: true }
        ]
    }

Un enfoque más simple es el uso de css combinado con la configuración dinámica de los valores minRowsToShow y virtualizationThreshold .

En la hoja de estilo:

.ui-grid, .ui-grid-viewport {
    height: auto !important;
}

En el código, llame a la siguiente función cada vez que cambie sus data en gridOptions . maxRowToShow es el valor que predefinió, para mi caso de uso, lo puse en 25.

ES5:

setMinRowsToShow(){
    //if data length is smaller, we shrink. otherwise we can do pagination.
    $scope.gridOptions.minRowsToShow = Math.min($scope.gridOptions.data.length, $scope.maxRowToShow);
    $scope.gridOptions.virtualizationThreshold = $scope.gridOptions.minRowsToShow ;
}

siguiendo el enfoque de @ tony, cambió la función getTableHeight () a

<div id="grid1" ui-grid="$ctrl.gridOptions" class="grid" ui-grid-auto-resize style="{{$ctrl.getTableHeight()}}"></div>

getTableHeight() {
    var offsetValue = 365;
    return "height: " + parseInt(window.innerHeight - offsetValue ) + "px!important";
}

La cuadrícula también tendría una altura dinámica con respecto a la altura de la ventana.


ACTUALIZACIÓN :

Se solicitó el HTML, así que lo pegué a continuación.

<div ui-grid="gridOptions" class="my-grid"></div>

ORIGINAL :

Pudimos resolver adecuadamente este problema utilizando CSS responsivo ( @media ) que establece la altura y el ancho según el estado real de la pantalla. Algo como (y claramente puedes agregar más según tus necesidades):

@media (min-width: 1024px) {
  .my-grid {
    width: 772px;
  }
}

@media (min-width: 1280px) {
  .my-grid {
    width: 972px;
  }
}

@media (min-height: 768px) {
  .my-grid {
    height: 480px;
  }
}

@media (min-height: 900px) {
  .my-grid {
    height: 615px;
  }
}

La mejor parte de esta solución es que no necesitamos cambiar el tamaño del manejo de eventos para monitorear los cambios en el tamaño de la cuadrícula. Simplemente funciona.







angular-ui-grid