[转]ng-grid Auto / Dynamic Height

本文转自：https://stackoverflow.com/questions/23396398/ng-grid-auto-dynamic-height

I think I solved this problem perfectly after 48 hours,

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 heightvar headerHeight = 50; // header heightvar footerHeight = 60; // bottom scroll bar heightvar 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;
}

>
Current Page: {{ currentPage }}
Total Page: {{ totalPage }}
Page Size: {{ pageSize }}
Table Height: {{tableHeight}}

Also see Plunker: http://plnkr.co/edit/np6y6rgN1ThnT0ZqyJeo?p=preview

其他类似尝试的参考地址：

https://stackoverflow.com/questions/27837335/angular-ui-grid-dynamically-calculate-height-of-the-grid

https://stackoverflow.com/questions/28678582/angularjs-ui-grid-dynamic-expandablerowheight

转载于:https://www.cnblogs.com/freeliver54/p/7771890.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！