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

Question

我在设置表的行数时遇到了麻烦,无法自动填充其封装容器的可用空间.

根据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'}]

您可以像这样绑定到Array属性长度:

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>

经过这些更改，它现在可以按预期工作