Ng-сетка Авто/Динамическая высота
Как получить ng-сетку для автоматического изменения ее высоты в зависимости от размера страницы? Документация на сайте ng-grid использует фиксированную высоту. Лучшее решение, которое я видел, происходит из этой ссылки:
.ngViewport.ng-scope {
height: auto !important;
overflow-y: hidden;
}
.ngTopPanel.ng-scope, .ngHeaderContainer {
width: auto !important;
}
Это не работает с поисковым сервером на стороне сервера. Я скопировал пример подкачки на стороне сервера с сайта ng-grid и применил css выше, но, как вы можете видеть, отображаются только первые 6 строк: http://plnkr.co/edit/d9t5JvebRjUxZoHNqD7K?p=preview
И {height: 100%} не работает...
Ответы
Ответ 1
Вы можете попробовать использовать ng-grid Flexible Height Plugin, все, что вам нужно сделать, это добавить этот плагин к свойству plugins в настройках сетки и он позаботится обо всем остальном.
Пример:
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
plugins: [new ngGridFlexibleHeightPlugin()]
};
Пример в реальном времени: http://plnkr.co/edit/zNHhsEVqmpQmFWrJV1KQ?p=preview
Ответ 2
Если вы не хотите добавлять плагины, я внедрил простое решение для динамического изменения высоты таблицы строго на основе видимых строк. Я использую Ui-Grid-Unstable v3.0. Не нужно прикасаться к CSS.
Мой HTML выглядит так:
<div id="grid1" ui-grid="gridOptions" ui-grid-grouping ui-grid-exporter class="grid"></div>
В контроллере добавьте:
$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();
}
});
И чтобы отключить прокрутку, добавьте следующую строку, где инициализируются gridOptions:
enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,
Убедитесь, что uiGridConstants передан в ваш контроллер:
angular.module('app').controller('mainController', function($scope, uiGridConstants) { ...
Надеюсь, это поможет!
Ответ 3
Я думаю, что я решил эту проблему отлично через 48 часов,
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 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>
Ответ 4
$( "gridStyle." ) CSS ( "высота", "");.
удалите свойство height в вашем классе gridstyle, а затем установите динамическую высоту, установленную на вашей ng-сетке.
Ответ 5
вы можете добавить auto style примерно так:
ng-style="{ 'height': myData.length*34 }", а myData -
Ответ 6
Я нахожу, что использование этого фрагмента кода в таблице стилей решает мою проблему. Я отключил плагин, но он работает в любом случае.
.ngViewport.ng-scope{
height: auto !important;
overflow-y: hidden;
}
.ngTopPanel.ng-scope, .ngHeaderContainer{
width: auto !important;
}
.ngGrid{
background-color: transparent!important;
}
Я надеюсь, что это поможет кому-то!
Ответ 7
В методе, в котором вы пытаетесь сохранить данные для каждой строки в каждой сетке, добавьте код для вычисления длины сетки в отдельном массиве и нажмите эту рассчитанную длину на другой массив. Убедитесь, что индекс сетки и индекс массива должны быть одинаковыми, чтобы мы могли получить доступ к нему из пользовательского интерфейса. Мой подход был следующим:
//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>
