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，物业sticky是公开的。

黏 定义sap.m.Table控件的部分，该控件在垂直滚动期间保持固定在页面顶部，只要该表位于视口中。

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

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

---

• 但是：ぁzxswい
• https://jsbin.com/ticivew/edit?js,output
• Property descriptionv1.56 - 在XMLView中分配多个值的语法如下所示： Other sticky options

Answer 2

不知道为什么你不想使用<Table sticky="HeaderToolbar,InfoToolbar,ColumnHeaders"> ，但这里仍然是一个例子：

sap.m.Table

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            data : [
                {
                    "col1": "at curabitur vestibulum",
                    "col2": "porttitor pharetra rutrum",
                    "col3": 93
                },
                {
                    "col1": "hendrerit dui fringilla",
                    "col2": "adipiscing suspendisse lorem",
                    "col3": 36
                },
                {
                    "col1": "placerat vel placerat",
                    "col2": "suspendisse quis sit",
                    "col3": 9
                },
                {
                    "col1": "sagittis at sed",
                    "col2": "malesuada aliquam sit",
                    "col3": 26
                },
                {
                    "col1": "donec donec sed",
                    "col2": "dui tempor nunc",
                    "col3": 38
                },
                {
                    "col1": "sed vitae fringilla",
                    "col2": "vestibulum pretium dolor",
                    "col3": 17
                },
                {
                    "col1": "scelerisque curabitur orci",
                    "col2": "sit sollicitudin amet",
                    "col3": 16
                },
                {
                    "col1": "libero lacus pulvinar",
                    "col2": "lorem velit elit",
                    "col3": 15
                },
                {
                    "col1": "convallis in at",
                    "col2": "fringilla sagittis magna",
                    "col3": 35
                },
                {
                    "col1": "dolor magna sed",
                    "col2": "at turpis tortor",
                    "col3": 3
                },
                {
                    "col1": "elit mi tortor",
                    "col2": "quis aenean turpis",
                    "col3": 32
                },
                {
                    "col1": "ipsum et magna",
                    "col2": "amet massa aliquam",
                    "col3": 59
                },
                {
                    "col1": "eget magna at",
                    "col2": "pharetra amet porta",
                    "col3": 69
                },
                {
                    "col1": "magna et scelerisque",
                    "col2": "aliquam vitae nullam",
                    "col3": 4
                },
                {
                    "col1": "velit etiam odio",
                    "col2": "lorem lacus magna",
                    "col3": 28
                },
                {
                    "col1": "at scelerisque lorem",
                    "col2": "facilisis odio dolor",
                    "col3": 4
                },
                {
                    "col1": "amet ipsum massa",
                    "col2": "sollicitudin sed tortor",
                    "col3": 54
                },
                {
                    "col1": "velit tincidunt massa",
                    "col2": "risus tortor massa",
                    "col3": 7
                },
                {
                    "col1": "id amet adipiscing",
                    "col2": "aliquam vitae adipiscing",
                    "col3": 94
                },
                {
                    "col1": "lorem massa lacus",
                    "col2": "malesuada ac sed",
                    "col3": 27
                }
            ]
        });

        this.getView().setModel(oModel);
    }
});


sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

/* extra CSS classes here */

Answer 3

你需要两张桌子。第一个表只有列，第二个表包含要显示空列标题的项目。

第二张表将是

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.ui.commons"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.ui.commons"
      xmlns:l="sap.ui.commons.layout"
      xmlns:t="sap.ui.table"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc" >
        <t:Table rows="{/data}" visibleRowCount="5">
            <t:columns>
                <t:Column width="100px">
                    <t:label><Label text="col1" /></t:label>
                    <t:template><TextView text="{col1}" /></t:template>
                </t:Column>
                <t:Column width="100px">
                    <t:label><Label text="col2" /></t:label>
                    <t:template><TextView text="{col2}" /></t:template>
                </t:Column>
            </t:columns>
        </t:Table>
    </mvc:View>
</script>

的内容。

ScrollContainer