如何更改 ui-grid 行的高度？

Posted 2023-02-19

【中文标题】如何更改 ui-grid 行的高度？

【英文标题】：How to change height of ui-grid row?

【发布时间】：2015-01-27 20:01:10

【问题描述】：

我正在使用ui-grid。我有很多行，这就是我使用滚动的原因。一切正常，直到我尝试更改行的高度。然后滚动变得一团糟。我在这里添加了一个示例http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview 这是来自 ui-grid 网站的教程之一——我唯一改变的是 CSS。我已经添加了这些规则。

.ui-grid-cell-contents 
  padding: 1px 1px;


.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
.grid .ui-grid-row,
.grid .ui-grid-cell,
.grid .ui-grid-cell .ui-grid-vertical-bar 
  height: 22px !important;
  font-size: 12px;
  line-height: 20px;

.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
ui-grid-header-cell 
  height: 55px !important;

.ui-grid-filter-container 
  padding: 1px 3px;

如果删除上述 CSS 规则，滚动效果会非常好。 所以我要么需要添加更多的 CSS 规则，要么需要使用网格的一些 API 才能正确设置行高。 任何帮助都感激不尽。

如何更改行高并保持滚动流畅？

更新： 这是默认网格和修改 CSS 的比较： http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview 尝试为每个网格上下滚动行。区别应该很明显。

【参考方案1】：

取出：

height: 22px !important;

从 css 中添加：

rowHeight:22

到gridOptions。

我感觉这更流畅了。

Forked Plunker

【讨论】：

谢谢。正是我想要的。

我不喜欢这个解决方案。当网格高度与屏幕高度匹配时，在此处更改 CSS 会干扰 scolling 行为。它无法正确计算行高，因为我怀疑它使用代码中的 rowHeight 值而不是测量 offsetHeight()

【参考方案2】：

scope.gridOptions = 行高：33 更改行高的最佳方法是使用网格选项。

【讨论】：

为什么这是最好的方法？我发现 css 更容易。

因为 ui-grid 需要 javascript 中的行高进行计算。通过使用 CSS 更改它，你会搞乱行显示

【参考方案3】：

尝试将此添加到您的 css 中：

.ui-grid-viewport .ui-grid-cell-contents 
  word-wrap: break-word;
  white-space: normal !important;


.ui-grid-row, .ui-grid-cell 
  height: auto !important;


.ui-grid-row div[role=row] 
  display: flex ;
  align-content: stretch;

【讨论】：

对虚拟化的影响是否会对性能产生影响？

不，我在工作中使用它，它工作正常，没有延迟或任何影响

我找到了“padding-top: 5px;”除了自动高度之外也很有用；

【参考方案4】：

只需相应地更改 grid 类即可。

.grid
    height: 70vh;