UI-GRID - 动态行高 - 备选方案

Question

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

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

如果没有，那么我会尝试使用可扩展的网格或网格中的树。

是否可以在特定 cell/column 之外显示可展开的网格？

目前我看到所有可展开的 grids/tree 网格占据了父级下方的整行。

谢谢

Answer 1

您可以在此处查看同一问题的答案：https://github.com/angular-ui/ng-grid/issues/3239#issuecomment-91045267

UI-Grid 虚拟化了行，这意味着它只呈现数据的一小部分，而不会呈现所有不会出现在视图中的内容。这意味着网格需要知道每一行的高度，以便它可以计算定位。

如果它必须在呈现时测量每一行，这将导致浏览器一遍又一遍地重新绘制，性能会很糟糕。

您会发现其他虚拟化工具（如 Ionic 的 collection-repeat）也有同样的限制。

更新:

回答你的第二个问题：你可以在 GridRow 对象上设置一个 height 属性（不是你的实体，你可以使用网格 API 中的 getRow获取 GridRow 对象）并且网格将在呈现行时使用此高度。

您的第三个问题：不，expandable 仅用于处理整行。可以根据某些单元格中的点击来更改子网格中显示的数据类型，但这需要对可扩展代码进行一些更改。

Answer 2

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

UI-GRID - 动态行高 - 备选方案

UI-GRID - Dynamic Row Height - Alternatives

angular-ui-grid