angularjs - switch - Ui-rejilla angular calcula dinámicamente la altura de la rejilla

ng-href angular 4

Question

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?

Answer 1

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

Answer 2

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>

Answer 3

Llego tarde al juego pero encontré una buena solución. Creé una directiva de atributos personalizados, todo lo que necesita hacer es pasar el gridApi y calculará automáticamente la altura. También se suscribe al evento de cambio de paginación, por lo que si el usuario cambia el tamaño de la página, cambiará su tamaño.

class UIGridAutoResize implements ng.IDirective {
    link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
    scope: { gridApi: "=" };
    restrict = "A";

    private previousValue: string;
    private isValid: boolean = true;
    private watch: any;

    constructor($timeout: ng.ITimeoutService) {
        UIGridAutoResize.prototype.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
            const gridOptions = scope.$eval(attrs.uiGrid) as any;
            const gridApi = scope.$eval(attrs.gridResize) as any;

            gridApi.core.on.rowsRendered(scope, () => {
                $timeout(() => {
                    this.autoSizeGrid(element, attrs, gridOptions, gridApi, false);
                }, 100);
            });

            gridApi.core.on.filterChanged(scope, () => {
                this.autoSizeGrid(element, attrs, gridOptions, gridApi, false);
            });

            if (attrs.uiGridPagination === "") {
                gridApi.pagination.on.paginationChanged(null, () => {
                    this.autoSizeGrid(element, attrs, gridOptions, gridApi, true);
                });
            }

            angular.element(window).resize(() => {
                $timeout(() => {
                    this.autoSizeGrid(element, attrs, gridOptions, gridApi, false);
                }, 100);
            });
        };
    }

    static Factory(): ng.IDirectiveFactory {
        const directive = ($timeout: ng.ITimeoutService) => {
            return new UIGridAutoResize($timeout);
        };

        directive["$inject"] = ["$timeout"];

        return directive;
    }

    private autoSizeGrid(element: ng.IAugmentedJQuery, attrs: ng.IAttributes, gridOptions: any, gridApi: any, isPaginationChanged: boolean) {
        gridApi.core.handleWindowResize();

        // Clear empty grid message 
        angular.element(element.parent()).find("#emptyGridMessage").remove();
        element.find(".ui-grid-viewport").css("display", "");

        if (attrs.hidePageSize === "") {
            element.find(".ui-grid-pager-row-count-picker").css("display", "none");
        }

        let rowCount = gridApi.core.getVisibleRows().length;

        const headerElements = element.find(".ui-grid-header");
        let headerHeight = 2;

        if (headerElements.length > 1) { // If we have more than one header element the grid is using grouping
            const headerElement = angular.element(headerElements[1]);
            headerHeight += headerElement.height();
        } else {
            headerHeight += headerElements.height();
        }

        if (attrs.uiGridPagination === "") {
            if (rowCount < 1) {
                gridOptions.enablePagination = false;
                gridOptions.enablePaginationControls = false;
                element.css("height", (rowCount * 30) + headerHeight - 2);
                element.find(".ui-grid-viewport").css("display", "none");
                angular.element("<div id=''emptyGridMessage'' style=''font-size: 1em; width: 100%; background-color: white; border: 1px solid #d4d4d4; padding: 7px 12px; color: #707070;''><span style=''opacity: 0.95;''>There are no records.</span></div>").insertAfter(element);
            } else if (gridApi.core.getVisibleRows().length < gridOptions.paginationPageSize && !isPaginationChanged) {
                gridOptions.enablePagination = false;
                gridOptions.enablePaginationControls = false;
                element.css("height", (rowCount * 30) + headerHeight);
            } else {
                gridOptions.enablePagination = true;
                gridOptions.enablePaginationControls = true;              
                element.css("height", (rowCount * 30) + headerHeight);
            }
        } else {
            if (rowCount < 1) {
                element.css("height", (rowCount * 30) + headerHeight - 2);
                element.find(".ui-grid-viewport").css("display", "none");
                angular.element("<div id=''emptyGridMessage'' style=''font-size: 1em; width: 100%; background-color: white; border: 1px solid #d4d4d4; padding: 7px 12px; color: #707070;''><span style=''opacity: 0.95;''>There are no records.</span></div>").insertAfter(element);
            } else {
                element.css("height", (rowCount * 30) + headerHeight);
            }
        }

        // Add extra margin to prevent scroll bar and pager from overlapping content underneath
        const pagerHeight = element.find(".ui-grid-pager-panel").height();

        if (rowCount > 0) {
            if (pagerHeight > 0)
                element.css("margin-bottom", pagerHeight);
            else
                element.css("margin-bottom", 10);
        } else {
            if (pagerHeight > 0)
                angular.element(element.parent()).find("#emptyGridMessage").css("margin-bottom", pagerHeight);
            else 
                angular.element(element.parent()).find("#emptyGridMessage").css("margin-bottom", 10);
        }

        if (rowCount > gridOptions.paginationPageSize) // Sometimes paging shows all rows this fixes that
           gridApi.core.refresh();
    }
}

<div ui-grid="vm.gridOptions" grid-resize="vm.gridApi" ui-grid-resize-columns ui-grid-pagination></div>

Answer 4

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 }
        ]
    }

Answer 5

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

Answer 6

Yo uso ui-grid - v3.0.0-rc.20 porque se ui-grid - v3.0.0-rc.20 un problema de desplazamiento cuando se va a la altura completa del contenedor. Utilice el módulo ui.grid.autoResize para cambiar automáticamente el tamaño de la cuadrícula de forma dinámica a sus datos. Para calcular la altura de su cuadrícula, utilice la siguiente función. El ui-if es opcional para esperar hasta que sus datos se configuren antes de renderizar.

angular.module(''app'',[''ui.grid'',''ui.grid.autoResize'']).controller(''AppController'', [''uiGridConstants'', function(uiGridConstants) {
    ...
    
    $scope.gridData = {
      rowHeight: 30, // set row height, this is default size
      ...
    };
  
    ...

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

<div ui-if="gridData.data.length>0" id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize ng-style="getTableHeight()"></div>

Answer 7

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.

Answer 8

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.