sapui5 - sap.ui.table.Table "VisibleRowCountMode.Auto"模式不起作用

Question

我无法设置表的行数以自动填充其封装容器的可用空间。

According to the API ，设置visibleRowCountMode属性(property)给 sap.ui.table.VisibleRowCountMode.Auto应该将表格呈现为

"[...] automatically fills the height of the surrounding container. The visibleRowCount property is automatically changed accordingly. All rows need the same height, otherwise the auto mode doesn't always work as expected."

我使用了以下代码:

var oTable = new sap.ui.table.Table( {
    rowHeight           : 30,
    height              : "100%",
    // The below property is seemingly ignored... What did I do wrong?
    visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto
});

...但是正如您在这个 jsbin 示例中看到的 http://jsbin.com/vazuz/1/edit它只显示默认的 10 行，当然不会“相应地更改 visibleRowCount 属性”:-(

有人有解决方案吗？
提前致谢!

======================

编辑:感谢@matz3 在下面的回答，我最终能够解决这个问题。

将周围的容器 DIV 设置为 100%，这似乎被忽略了。但是，将其设置为固定高度效果很好。但我真正想要的是，如果用户调整了窗口大小，则需要相应地调整可用行数。因此，将其设置为固定高度不是一种选择...

然而，诀窍在于一些额外的 CSS:不仅 DIV 需要设置为 100% 的高度，BODY 和 HTML (!!) 也需要将高度设置为 100%:

html, body {
  height: 100%
}

div#uiArea {
  height: 100%
}

现在，表格跨越了可用视口(viewport)的整个高度，调整窗口大小可以很好地调整表格。在此处查看最终的工作解决方案: http://jsbin.com/bosusuya/3/edit

Matz3，谢谢你的帮助!

Answer 1

我有同样的问题。我以这种方式“解决”了这个问题。这并不完美，但它比 UI5 调整大小要好......

  _resizeTableRow: function () {

        var oTable = this.getView().byId("referenceTabId");
        var sTop = $('#' + oTable.getId()).offset().top;

        var sHeight = $(document).height();

        //if there a row, you can take the row Height
        //var iRowHeight = $(oTable.getAggregation("rows")[0].getDomRef()).height();

        var iRowHeight = 40; 

        var iRows = Math.trunc((sHeight - sTop ) / iRowHeight);

        oTable.setVisibleRowCount(iRows);
       },