angularjs - gridoptions - ui grid row
ng-grid Auto/Dynamic Height (7)
¿Cómo puedo hacer que ng-grid redimensione automáticamente su altura en función del tamaño de la página? La documentación en el sitio de ng-grid utiliza una altura fija. La mejor solución que he visto viene de este link :
.ngViewport.ng-scope {
height: auto !important;
overflow-y: hidden;
}
.ngTopPanel.ng-scope, .ngHeaderContainer {
width: auto !important;
}
Esto no funciona con la paginación del lado del servidor. He copiado el ejemplo de paginación del lado del servidor del sitio de ng-grid y apliqué el css anterior, pero como puede ver, solo se muestran las primeras 6 filas: http://plnkr.co/edit/d9t5JvebRjUxZoHNqD7K?p=preview
Y {altura: 100%} no funciona ...
$ (". gridStyle"). css ("height", "");
elimine su propiedad de altura en su clase de estilo de cuadrícula y luego establezca la altura dinámica automática en su ng-cuadrícula ...
Creo que resolví este problema perfectamente después de 48 horas,
var app = angular.module(''app'', [''ngTouch'', ''ui.grid'', ''ui.grid.pagination'', ''ui.grid.autoResize'']);
app.controller(''MainCtrl'', [''$scope'', ''$http'', ''$interval'', function($scope, $http, $interval) {
var paginationOptions = {
pageNumber: 1,
pageSize: 20,
};
$scope.currentPage = 1;
$scope.pageSize = paginationOptions.pageSize;
$scope.gridOptions = {
rowHeight: 30,
enableSorting: true,
paginationPageSizes: [$scope.pageSize, $scope.pageSize * 2, $scope.pageSize * 3],
paginationPageSize: paginationOptions.pageSize,
columnDefs: [{
name: ''name''
}, {
name: ''gender'',
enableSorting: false
}, {
name: ''company'',
enableSorting: false
}],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
gridApi.pagination.on.paginationChanged($scope, function(newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
$scope.pageSize = pageSize;
$scope.currentPage = newPage;
$scope.totalPage = Math.ceil($scope.gridOptions.totalItems / $scope.pageSize);
});
}
};
var loadData = function() {
var url = ''https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json'';
$http.get(url)
.success(function(data) {
$scope.gridOptions.totalItems = data.length;
$scope.totalPage = Math.ceil($scope.gridOptions.totalItems / $scope.pageSize);
$scope.gridOptions.data = data;
});
};
loadData();
// for resize grid''s height
$scope.tableHeight = ''height: 600px'';
function getTableHeight(totalPage, currentPage, pageSize, dataLen) {
var rowHeight = 30; // row height
var headerHeight = 50; // header height
var footerHeight = 60; // bottom scroll bar height
var totalH = 0;
if (totalPage > 1) {
// console.log(''hehehehe'');
if (currentPage < totalPage) {
totalH = pageSize * rowHeight + headerHeight + footerHeight;
} else {
var lastPageSize = dataLen % pageSize;
// console.log(lastPageSize);
if (lastPageSize === 0) {
totalH = pageSize * rowHeight + headerHeight + footerHeight;
} else {
totalH = lastPageSize * rowHeight + headerHeight + footerHeight;
}
}
console.log(totalH);
} else {
totalH = dataLen * rowHeight + headerHeight + footerHeight;
}
return ''height: '' + (totalH) + ''px'';
}
$interval(function() {
$scope.tableHeight = getTableHeight($scope.totalPage,
$scope.currentPage, $scope.pageSize,
$scope.gridOptions.data.length);
console.log($scope.tableHeight);
$scope.gridApi.grid.handleWindowResize();
$scope.gridApi.core.refresh();
}, 200);
}]);
.grid {
width: 600px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-pagination id="grid" style="{{tableHeight}}"></div>
<div>
<p>Current Page: {{ currentPage }}</p>
<p>Total Page: {{ totalPage }}</p>
<p>Page Size: {{ pageSize }}</p>
<p>Table Height: {{tableHeight}}</p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
También vea Plunker: http://plnkr.co/edit/np6y6rgN1ThnT0ZqyJeo?p=preview
En el método en el que está tratando de almacenar los datos para cada fila dentro de cada cuadrícula, agregue un código para calcular la longitud de la cuadrícula en una matriz separada y presione esa longitud calculada a una matriz diferente. Asegúrese de que el índice de la cuadrícula y el índice de la matriz deben ser iguales, de modo que podamos acceder a él desde la interfaz de usuario juntos. Mi enfoque fue el siguiente:
//Stores the calculated height of each grid.
$scope.gridHeights = [];
//Returns the height of the grid based on the ''id'' passed from the UI side.
//Returns the calculated height appended with ''px'' to the HTML/UI
$scope.getHeight = function(id){
if($scope.gridHeights[id]) {
return {
''height'': $scope.gridHeights[id] + ''px''
};
}else{
return {
''height'': ''300px''
};
}
};
for (var idx = 0; idx < $scope.auditData.length; idx++) {
//gets the rows for which audit trail/s has to be displayed based on single or multi order.
$scope.gridData[idx] = $scope.auditData[idx].omorderAuditTrailItems;
//Calculates and pushes the height for each grid in Audit Trail tab.
$scope.gridHeights.push(($scope.auditData[idx].omorderAuditTrailItems.length + 2)*30);
//IN HTML, set the height of grid as :
<div id=''orderAuditTrailList''>
<div class="row fits-auditTrail" ng-style="getHeight(id)">
<div class="fits-ng-grid" ng-if="auditTrail.omorderAuditTrailItems.length>0" ng-grid="gridOrderAuditTrailList[id]" ng-style="getHeight(id)"></div>
</div>
</div>
Encuentro que usar este fragmento de código en la hoja de estilo resolvió mi problema. He deshabilitado el plugin pero funciona de cualquier manera.
.ngViewport.ng-scope{
height: auto !important;
overflow-y: hidden;
}
.ngTopPanel.ng-scope, .ngHeaderContainer{
width: auto !important;
}
.ngGrid{
background-color: transparent!important;
}
¡Espero que esto ayude a alguien!
Puede intentar usar el complemento de altura flexible de ng-grid, todo lo que necesita hacer es agregar este complemento a la propiedad de los complementos en las opciones de cuadrícula y él se encargará del resto.
Ejemplo:
$scope.gridOptions = {
data: ''myData'',
enablePaging: true,
showFooter: true,
totalServerItems: ''totalServerItems'',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
plugins: [new ngGridFlexibleHeightPlugin()]
};
Ejemplo en vivo: http://plnkr.co/edit/zNHhsEVqmpQmFWrJV1KQ?p=preview
Puedes agregar un estilo automático como este:
ng-style="{ ''height'': myData.length*34 }" , y myData es
Si no desea agregar ningún complemento, he implementado una solución fácil para cambiar dinámicamente la altura de la tabla en función de las filas visibles. Estoy usando Ui-Grid-Unstable v3.0. No es necesario tocar CSS.
Mi HTML se ve como:
<div id="grid1" ui-grid="gridOptions" ui-grid-grouping ui-grid-exporter class="grid"></div>
En su controlador agregue:
$scope.$watch(''gridApi.core.getVisibleRows().length'', function() {
if ($scope.gridApi) {
$scope.gridApi.core.refresh();
var row_height = 30;
var header_height = 31;
var height = row_height * $scope.gridApi.core.getVisibleRows().length + header_height;
$(''.grid'').height(height);
$scope.gridApi.grid.handleWindowResize();
}
});
Y para desactivar el desplazamiento, agregue la siguiente línea donde se inicializa gridOptions:
enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,
Asegúrese de que uiGridConstants se pasa a su controlador:
angular.module(''app'').controller(''mainController'', function($scope, uiGridConstants) { ...
¡Espero que esto ayude!