将 table 水平滚动附加到父容器 (sapui5)

Question

我有一个包裹在 sap.ui.layout.VerticalLayout 中的 sap.ui.table 组件。问题是，如果 table 列重新调整大小（放大），table 将获得水平滚动条。到目前为止一切顺利，但是，我的问题是，如果有任何方法可以将 table 水平滚动条放置在父容器上（因此在 VerticalLayout 组件上），这样用户就不需要了将行一直向下滚动以访问水平滚动条。

我已经尝试将垂直布局组件宽度设置为 "auto"，这将使我获得所需的行为，但在那种情况下，table 将不会扩展到页面的 100% （它在 chrome 上工作正常，当 auto 出现在 IE 上（在我的例子中是 IE11）时不会 100% 的问题）。所以基本上，我需要将父级的宽度设置为 100%，以便 table 和容器扩展到页面的右边距，但是如果需要水平滚动条，我需要显示在容器而不是 table.

I 我真的没有想法所以任何帮助，提示，都会很棒，谢谢！

更新：我添加了一个 jsFiddle 来复制页面结构和我的问题。我必须补充一点，问题只存在于 IE（我使用 IE11）。

Answer 1

以防其他人遇到这个问题，这是我找到的解决方案：

1) 在创建包装容器时将宽度设置为 100%，这样，table 将在所有浏览器上扩展为 100%。

2) 在 table 上附加一个 columnResize 函数，如下所示：

columnResize: function(e){
    applyScrollOnContainer();
}

3) 在 applyScrollOnContainer() 上，只需将容器的宽度更改为自动，这样 table 滚动条就会放置在容器上。

sap.ui.getCore().getElementById("yourContainerIdHere").setWidth("auto");

4) 您还可以在 document.load 上添加检查。如果显示 table 滚动条，再次将其附加到容器。

var scrollDisplay = $("#tableIdhere .sapUiTableHSb").css("display");


if(scrollDisplay === "block"){
    sap.ui.getCore().getElementById("ORDERS_VIEW_FIRST_TABLE").setWidth("auto");
}
else{
    sap.ui.getCore().getElementById("ORDERS_VIEW_FIRST_TABLE").setWidth("100%");
}

将 table 水平滚动附加到父容器 (sapui5)

Attach table horizontal scroll to parent container (sapui5)

scroll

horizontal-scrolling

sapui5