ui-grid 的高度问题

Posted 2023-03-06

【中文标题】ui-grid 的高度问题

【英文标题】：Height issues with ui-grid

【发布时间】：2015-09-08 03:09:17

【问题描述】：

我想在 angularJS ui-grid 上使用 height: auto。我在添加 ui-grid 属性的 div 上设置特定高度的内联样式遇到问题。还有一个名为 getViewPortStyle() 的函数，它动态地为 .ui-grid-viewport 类添加高度和宽度。

关于使用 ui-grid 属性应用于元素的内联样式，我尝试在元素上的类上使用 height: auto !important; 覆盖。当用户通过鼠标移动操作浏览器来增加或减少窗口宽度或高度时，除了getViewPortStyle() 触发之外，这非常有效。

我的想法是覆盖 ui-grid，这样getViewPortStyle() 函数就不会触发。我希望有一种方法可以通过 ui-grid api 禁用此功能，但我无法在文档中找到任何可以解释如何执行此操作的内容。

对不起，如果我在这个问题上到处都是。我会尝试深入研究...

“如何禁用getViewPortStyle() 函数触发或覆盖控制基于浏览器窗口的网格高度和宽度的CSS？”

ui-grid getViewPortStyle 函数

         GridRenderContainer.prototype.getViewPortStyle = function () 
            var self = this;
            var styles = ;
            
            if (self.name === 'body') 
                styles['overflow-x'] = self.grid.options.enableHorizontalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
            if (!self.grid.isRTL()) 
            if (self.grid.hasRightContainerColumns()) 
                styles['overflow-y'] = 'hidden';
            
            else 
                styles['overflow-y'] = self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
            
            
            else 
            if (self.grid.hasLeftContainerColumns()) 
                styles['overflow-y'] = 'hidden';
            
            else 
                styles['overflow-y'] = self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
            
            
            
            else if (self.name === 'left') 
                styles['overflow-x'] = 'hidden';
                styles['overflow-y'] = self.grid.isRTL() ? (self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll') : 'hidden';
            
            else 
                styles['overflow-x'] = 'hidden';
                styles['overflow-y'] = !self.grid.isRTL() ? (self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll') : 'hidden';
            
            
            return styles;
        
        
        ;

【问题讨论】：

查看 ui 网格的新帖子，工作 Manual Height Adjust

【参考方案1】：

将height: 100%; 添加到包含height: auto; 的.ui-grid 的子元素可解决此问题。为简洁起见，这里是 LESS/SASS 嵌套版本...

.ui-grid 
  height: auto;
   .ui-grid-viewport 
     height: 100% !important;
   
 

【讨论】：

无论您添加多少行，这是否有效？我担心一旦超过虚拟化阈值，行将停止呈现。

我通过分页最多添加 60 行。我会做一些测试并检查一下。

谢谢！我在这件事上花了很多时间，你的解决方案救了我。它也适用于各种数量的分页行。

【参考方案2】：

.ui-grid-viewport 高度：100% !important;

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。