使用rowHeight的ui-grid行高：＆＃39; auto＆＃39;

Question

我从ui-grid获得了这种奇怪的行为，如果我将rowHeight设置为auto，则同一行中的每个单元格将具有不同的高度。每行中的一个单元格将具有多行数据，但显然ui-grid将会阻塞。 （我给行着色，这样你就可以看出错了！）任何想法如何解决这个问题？我的意思是为每行中的所有细胞获得相同的高度。如何处理同一网格中的不同行高？

Answer 1

使用CSS

[ui-grid-row] {
  display: table-row;
}

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

.ui-grid-cell {
  float: none;
  display: table-cell;
}

.ui-grid-header-cell, .ui-grid-cell-contents {
  white-space: normal;
  padding: 2px;
  word-break: break-word;
}

使用JavaScript

当您使用多重选择时，检查栏的高度不会改变，因此您可以设置enableRowHeaderSelection: false。它会隐藏此列，但您仍然可以选择行，或者如果您愿意，可以使用@jibap中的此函数来对齐容器http://plnkr.co/edit/JwbEmPhJq2LInfUNncdi?p=preview

Answer 2

如果没有预先定义的行高，虚拟化几乎是不可能的。您将在任何虚拟化列表工具中找到相同的限制。例如，请检查Ionic's collection-repeat。

问题是UI-Grid只在任何给定时间显示所有行的子集，但为了使它显示，就像所有行一样，它必须创建为空渲染行周围的空间。如果它不知道所有行的高度，它就不知道应该有多少空白空间。

如果你想要自动行高，它必须单独渲染每一行，测量它，然后总结所有高度。这会彻底破坏浏览器。