使用 rowHeight 的 ui-grid 行高：'auto'

Posted 2023-03-06

【中文标题】使用 rowHeight 的 ui-grid 行高：\'auto\'

【英文标题】：ui-grid row height using rowHeight : 'auto'使用 rowHeight 的 ui-grid 行高：'auto'

【发布时间】：2015-03-26 19:35:29

【问题描述】：

我从 ui-grid 得到了这种奇怪的行为，如果我将 rowHeight 设置为 auto，同一行中的每个单元格将具有不同的高度。每行中的一个单元格将包含多行数据，但显然 ui-grid 会阻塞。 （我为该行着色，以便您可以看到问题所在！）知道如何解决这个问题吗？我的意思是为每行中的所有单元格获得相同的高度。如何处理同一个网格中不同的行高？

【问题讨论】：

这是问题所在：plnkr.co/edit/9Ndmv6R0ebWWNN6Ab3yz

有什么更新吗？？同样的问题...

并非如此，正如您在此链接中看到的 github.com/angular-ui/ng-grid/issues/2656 ，我与他们取得了联系，但不幸的是，他们不想修复它......

不！这真是一场灾难……这真是一个重要的功能……，他们怎么能忽略它？

您推荐的任何其他网格..？

【参考方案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

【参考方案2】：

如果没有预定义的行高，虚拟化几乎是不可能的。您会发现任何虚拟化列表工具都有相同的限制。例如检查Ionic's collection-repeat。

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

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