我正在尝试使用Angular ng-grid来显示一些动态内容。网格将有0- 25行。我希望有一个最小的大小,然后让ng-grid在项目添加到数组时自动调整高度。由于某些原因,自动尺寸在添加6-7个项目后停止(它甚至似乎取决于您的分辨率)。
有人能帮上忙吗?我遗漏了什么?我下面有一个柱塞,显示了这个问题。
http://plnkr.co/edit/frHbLTQ68GjMgzC59eSZ?p=preview
发布于 2015-03-26 06:25:31
如果您仍然有问题,我建议不要使用ng-grid,直接在html中创建布局(使用DIVs、列宽格式、样式等)。然后使用您的$scope填充您的新布局。在变量、模型和ng-repeat之间,你应该能够做你需要的一切。
发布于 2014-03-04 01:37:30
下面的代码是对插件的修改。它的工作原理是检查网格数据中的项数,并在此基础上计算高度。传递给插件的选项是行高和表头高度。
ngGridCustomFlexibleHeightPlugin = function (opts) {
var self = this;
self.grid = null;
self.scope = null;
self.init = function (scope, grid, services) {
self.domUtilityService = services.DomUtilityService;
self.grid = grid;
self.scope = scope;
var recalcHeightForData = function () { setTimeout(innerRecalcForData, 1); };
var innerRecalcForData = function () {
var gridId = self.grid.gridId;
var footerPanelSel = '.' + gridId + ' .ngFooterPanel';
var extraHeight = self.grid.$topPanel.height() + $(footerPanelSel).height();
var naturalHeight = (grid.data.length - 1) * opts.rowHeight + opts.headerRowHeight;
self.grid.$viewport.css('height', (naturalHeight + 2) + 'px');
self.grid.$root.css('height', (naturalHeight + extraHeight + 2) + 'px');
// self.grid.refreshDomSizes();
if (!self.scope.$$phase) {
self.scope.$apply(function () {
self.domUtilityService.RebuildGrid(self.scope, self.grid);
});
}
else {
// $digest or $apply already in progress
self.domUtilityService.RebuildGrid(self.scope, self.grid);
}
};
scope.$watch(grid.config.data, recalcHeightForData);
};
};发布于 2016-04-09 03:27:20
我发现在样式表上使用这段代码解决了我的问题。我禁用了插件,但无论哪种方式,它都可以工作。
.ngViewport.ng-scope{
height: auto !important;
overflow-y: hidden;
}
.ngTopPanel.ng-scope, .ngHeaderContainer{
width: auto !important;
}
.ngGrid{
background-color: transparent!important;
}我希望它能帮助一些人
https://stackoverflow.com/questions/16642888
复制相似问题