>

데이터가 많은 테이블이 하나 있습니다. 이제 테이블 헤더가 고정 된 상태에서 세로로 스크롤하고 싶습니다. 이것을 달성 할 수 있습니까?

내 코드는 다음과 같습니다 :

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 를 사용해 보았습니다  제어하지만 아무것도 얻지 못했습니다.

다음은 데모 입니다.

  • 답변 # 1

    v1.54 현재 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.

    로 설정되면 스크롤하는 동안 헤더가 고정 된 상태로 유지됩니다.

    이 기능은 최신 브라우저에서만 지원됩니다.

    <시간>

    데모 :https://jsbin.com/ticivew/edit?js,output

    속성 설명

    기타 고정 옵션v1.56-XMLView에서 여러 값을 할당하는 구문은 다음과 같습니다.

    "ColumnHeaders"
    
    

  • 답변 # 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 */
    
    

  • 답변 # 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

관련 자료

  • 이전 python - tensorflow의 boolean_mask 또는 스파 스 도트 제품
  • 다음 c# - UWP의 DevExpress GridControl 스타일