UI-GRID - 动态行高 - 替代方案

Question

我试图让一个单元格动态扩展它的高度.

有没有办法在渲染后调整行的高度(GridRow)？

如果没有,那么我将尝试在网格中使用可扩展的网格或树.

是否可以显示特定单元格/列的可扩展网格？

目前,我看到所有可扩展的网格/树网格占据了父级下面的整行.

谢谢

Answer 1

将此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;
}

Answer 2

你可以在这里看到同一个问题的答案:https://github.com/angular-ui/ng-grid/issues/3239#issuecomment-91045267

UI-Grid虚拟化行,这意味着它只渲染一小部分数据,并保留未查看的所有内容.这意味着网格需要知道每一行的高度,以便它可以计算定位.

如果它必须在渲染时测量每一行,这将导致浏览器一遍又一遍地重新绘制,性能将是悲惨的.

您会发现其他虚拟化工具(如Ionic的集合重复)具有相同的限制.

更新:

要回答第二个问题:您可以height在GridRow对象上设置属性(不是您的实体,您可以使用网格API中的getRow来获取GridRow对象),并且网格将在渲染行时使用此高度.

而你的第三个问题:不,expandable只能用于处理整行.可能会根据某些单元格中的点击次数更改子网格中显示的数据类型,但这可能需要对可扩展代码进行一些更改.