将表格水平滚动附加到父容器（sapui5）答案

【问题标题】：Attach table horizontal scroll to parent container (sapui5)将表格水平滚动附加到父容器（sapui5）
【发布时间】：2015-04-01 08:19:47
【问题描述】：

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

我已经尝试将垂直布局组件宽度设置为“自动”，这将使我获得所需的行为，但在这种情况下，表格不会扩展到页面的 100%（它在 chrome 上运行良好，当 IE 上存在 auto 时无法 100% 运行的问题（在我的情况下为 IE11））。所以基本上，我需要将父级的宽度设置为 100%，以便表格和容器扩展到页面的右边距，但是如果需要水平滚动条，我需要显示在容器上而不是在表。

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

更新：我添加了一个jsFiddle，它也复制了页面的结构和我的问题。我必须补充一点，问题出在仅在 IE 中（我使用 IE11）。

【问题讨论】：

在垂直容器内使用面板，然后在其上放置表格。
@SrikanthKshatriy 您好，感谢您的提示。我尝试了该解决方案，但问题仍然存在。

标签： scroll sapui5 horizontal-scrolling

【解决方案1】：

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

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

2) 像这样在表上附加一个 columnResize 函数：

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

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

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

4) 您也可以在document.load 上添加支票。如果显示表格滚动条，再次将其附加到容器。

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%");
}

【讨论】：