首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >AngularJS ng-网格和ngGridFlexibleHeightPlugin没有像我预期的那样工作

AngularJS ng-网格和ngGridFlexibleHeightPlugin没有像我预期的那样工作
EN

Stack Overflow用户
提问于 2013-05-20 13:00:22
回答 3查看 5.9K关注 0票数 11

我正在尝试使用Angular ng-grid来显示一些动态内容。网格将有0- 25行。我希望有一个最小的大小,然后让ng-grid在项目添加到数组时自动调整高度。由于某些原因,自动尺寸在添加6-7个项目后停止(它甚至似乎取决于您的分辨率)。

有人能帮上忙吗?我遗漏了什么?我下面有一个柱塞,显示了这个问题。

http://plnkr.co/edit/frHbLTQ68GjMgzC59eSZ?p=preview

EN

回答 3

Stack Overflow用户

发布于 2015-03-26 06:25:31

如果您仍然有问题,我建议不要使用ng-grid,直接在html中创建布局(使用DIVs、列宽格式、样式等)。然后使用您的$scope填充您的新布局。在变量、模型和ng-repeat之间,你应该能够做你需要的一切。

票数 1
EN

Stack Overflow用户

发布于 2014-03-04 01:37:30

下面的代码是对插件的修改。它的工作原理是检查网格数据中的项数,并在此基础上计算高度。传递给插件的选项是行高和表头高度。

代码语言:javascript
运行
复制
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);

    };
};
票数 0
EN

Stack Overflow用户

发布于 2016-04-09 03:27:20

我发现在样式表上使用这段代码解决了我的问题。我禁用了插件,但无论哪种方式,它都可以工作。

代码语言:javascript
运行
复制
 .ngViewport.ng-scope{
    height: auto !important;
    overflow-y: hidden;
}

.ngTopPanel.ng-scope, .ngHeaderContainer{
    width: auto !important;
}
.ngGrid{
    background-color: transparent!important;
}

我希望它能帮助一些人

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16642888

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档