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"后，标题会在滚动时保持不变。

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

演示： https://jsbin.com/ticivew/edit?js,output
Property description
Other sticky options ^v1.56 - 在XMLView中分配多个值的语法如下所示：
```
<Table sticky="HeaderToolbar,InfoToolbar,ColumnHeaders">
```

Answer 2

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

第二个表格将是void logout(HTTPServerRequest req, HTTPServerResponse res) { try { logInfo("Logout section"); Json request = req.json; Json responseBody = Json.emptyObject; // if (req.session) // if user have active session { res.terminateSession(); responseBody["status"] = "success"; responseBody["isAuthorized"] = false; res.writeJsonBody(responseBody); logInfo("-------------------------------------------------------------------------------"); logInfo(responseBody.toString); logInfo("^-----------------------------------------------------------------------------^"); logInfo("User %s logout", request["username"]); // logInfo("User 12333333333333 logout"); // } else { responseBody["status"] = "fail"; // user do not have active session? logInfo("User do not have active session"); res.writeJsonBody(responseBody); } writeln("-------before-------"); writeln(responseBody.toString); res.writeJsonBody(responseBody); writeln("-------after-------"); } catch (Exception e) { logInfo(e.msg); writeln("3333"); } }的内容。

demo

Answer 3

不确定为什么你不想使用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 */

<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>

Answer 4

要使您自己的示例正常工作，必须使用ScrollContainer包裹在表周围，并将vertical="true"和height设置为某个值。并且您需要在表本身上使用属性sticky="ColumnHeaders"。

这是修改后的JS Bin示例中的代码，可以正常工作：

jQuery.sap.require("sap.m.MessageToast");

// Controller definition
sap.ui.controller("local.controller", {

  onInit: function() {
    var data = [{
      name: "asd",
      amount: "100",
      currency: "USD",
      size: "L"
    }, {
      name: "asd",
      amount: "800",
      currency: "INR",
      size: "XL"
    }, {
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    }];
    var oModel = new sap.ui.model.json.JSONModel(data);
    this.getView().setModel(oModel);
    var table = this.getView().byId("tableid");
    var mytemplate = new sap.m.ColumnListItem({
      cells: [
        new sap.m.Text({
          text: "{name}"
        }), new sap.m.Text({
          text: "{amount}"
        }), new sap.m.Text({
          text: "{currency}"
        }), new sap.m.Text({
          text: "{size}"
        })
      ]
    });
          table.bindAggregation("items",{
          path: "/",
          template : mytemplate
          });
    
  }
});

// Instantiate the View, assign a model and display
var oView = sap.ui.xmlview({
  viewContent: jQuery('#view1').html()
});
oView.placeAt('content');

<!DOCTYPE HTML>
<html>

<head>
  <meta name="description" content="temp">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">

  <title></title>

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

  <!-- XML-based view definition -->
  <script id="view1" type="sapui5/xmlview">
    <mvc:View controllerName="local.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
      <App>
        <Page title="My View" id="page">
          <ScrollContainer
            height="200px"
            vertical="true"
          >
            <Table id="tableid" sticky="ColumnHeaders">
              <columns>
                <Column>
                  <Text text="column1" />
                </Column>
                <Column>
                  <Text text="column2" />
                </Column>
                <Column>
                  <Text text="column3" />
                </Column>
                <Column>
                  <Text text="column4" />
                </Column>
              </columns>
            </Table>
          </ScrollContainer>
        </Page>
      </App>
    </mvc:View>
  </script>


</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

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

4 个答案: