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控制但我没有得到任何东西.

这是一个演示.

Answer 1

自v1.54起,该物业sticky可公开获得.

sticky
定义sap.m.Table控件的一部分,只要表在视口中,它在垂直滚动期间保持固定在页面顶部.

一旦其值设置为"ColumnHeaders",标题将在滚动时保持固定.

请注意,此功能仅受现代浏览器支持.

• 演示: https ://jsbin.com/ticivew/edit？js,output
• 物业描述

• 其他粘性选项^v1.56 - 在XMLView中分配多个值的语法如下所示:

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

Answer 2

您将需要两张桌子。第一个表将仅包含列，第二个表将包含要以空列标题显示的项目。

第二个表将是 的内容ScrollContainer。

演示