sapui5 - sap.m.Table - 带有固定标题的垂直滚动

Question

我有一张包含大量数据的表。现在我想在固定表格标题的情况下垂直滚动。我能做到吗？

这是我的代码:

 onInit: function() {
   var data = new JSONModel("Model/data.json");
   this.getView().setModel(data);
   var otable = this.getView().byId("PlaceIt");
   otable.bindItems("/employees", new ColumnListItem({
     cells: [
       new Text({
         text: "{name}"
       }),
       new Text({
         text: "{Physics}"
       }),
       new Text({
         text: "{Chemistry}"
       }),
       new Text({
         text: "{Maths}"
       }),
       new Text({
         text: "{English}"
       })
     ]
   }));
   otable.setModel(data);
   var oScrollContainer = new ScrollContainer({
     height: "100px",
     vertical: true,
     focusable: true,
     content: [oTableItems]
   });
 },

<Table id="PlaceIt">
  <columns>
    <Column>
      <Text text="Student Name" />
    </Column>
    <Column>
      <Text text="Physics" />
    </Column>
    <Column>
      <Text text="Chemistry" />
    </Column>
    <Column>
      <Text text="Maths" />
    </Column>
    <Column>
      <Text text="English" />
    </Column>
  </columns>
  <!-- ... -->
</Table>

我尝试使用 sap.m.ScrollContainer控制，但我什么也没得到。

这是一个 demo .

Answer 1

As of v1.54 ，属性(property)sticky是公开的。

sticky
Defines the section of the sap.m.Table control that remains fixed at the top of the page during vertical scrolling as long as the table is in the viewport.

一旦它的值设置为 "ColumnHeaders" ，滚动时标题将保持固定。



请注意，此功能仅受现代浏览器支持。

演示: https://jsbin.com/ticivew/edit?js,output

Property description

Other sticky options v1.56 - 在 XMLView 中分配多个值的语法如下所示:

<Table sticky="HeaderToolbar,InfoToolbar,ColumnHeaders">