sap.ui.table.Table“VisibleRowCountMode.Auto”模式不起作用

Question

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

According to the API，将visibleRowCountMode属性设置为sap.ui.table.VisibleRowCountMode.Auto会将表格设为

  

“[...]自动填充周围容器的高度。    visibleRowCount属性会相应地自动更改。所有   行需要相同的高度，否则自动模式并不总是有效   正如所料。“

我使用了以下代码：

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%
}

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

Matz3，谢谢你的帮助！

Answer 1

CSS hacks是一种肮脏的方式。在我的应用程序中，我使用 visibleRowCount 绑定到 Array.length 例如，如果您有包含此数据的模型：

[{firstName: 'John', lastName: 'Smith',
{firstName: 'David', lastName: 'Ericsson'}]

您可以像这样绑定到数组属性长度：

var oTable = new sap.ui.table.Table({
  visibleRowCount : '{/length}'
})

Answer 2

  

[...]自动填充周围容器的高度[...]

您的周围容器是视图，因此您必须将其高度设置为一个值（例如100％）

this.setHeight("100%");

你的视图将被设置到uiArea-div中，所以这个也需要一个高度（例如500px）

<div id="uiArea" style="height:500px"></div>

现在进行这些更改works as expected

Answer 3

我遇到同样的问题。我以这种方式“解决”。这不是完美的方法，但是比调整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);
       },

Answer 4

其他选择是将表格放入sap.ui.layout.Splitter：