[UI5] Table에 Select 추가하기

Select

테이블에 select 기능을 추가해보자.

매니저일때와 캐셔일때 볼 수 있는 항목을 다르게 설정해본다.

App.view.xml

<table:extension>
               <OverflowToolbar>
                    <Title text="Product List" />
                     <ToolbarSpacer />
                     <Select change=".onSelect">
                          <items>
                             <core:ListItem key="A" text="Manager"/>  
                             <core:ListItem key="B" text="Casher"/>
                         </items>
                     </Select>
               </OverflowToolbar>
</table:extension>

Title과 같은 라인에 Select를 추가해주기 위해 OverflowToolbar안에 Select를 추가한다. ToolbarSpacer는 타이틀과 Select를 띄워서 보여준다.

이후 table:Table에 id를 productTable로 지정한다. id="productTable" onSelect함수에서 이 테이블의 id를 가지고 테이블 데이터를 가지고 올것이기 때문이다.

App.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("product.controller.App", {

     onSelect : function(oEvent) {
           var sSelectedKey = oEvent.getSource().getSelectedKey();
           var oTable = this.byId("productTable");
           var aColumns = oTable.getColumns(); 


         if( sSelectedKey === "A") {
            aColumns[2].setVisible(true);        
            aColumns[4].setVisible(true);         
         } else {
            aColumns[2].setVisible(false);         
            aColumns[4].setVisible(false);         
         }
      }
    });
});

view에서 매니저의 key를 A로 지정했고, 캐셔의 key를 B로 지정했다. oEvent에 사용자가 선택한 값이 들어가고 사용자가 선택한 값에서 getSelectedKey로 어떤 key를 선택했는지가 변수 sSelectedKey에 담긴다.

Id를 사용해 테이블을 가져와 변수 oTable 에 담고, getColumns로 테이블의 데이터를 배열로 가져와 변수 aColumns에 담는다.

getColumns()는 데이터를 배열로 가져온다.

그래서 사용자가 선택한 값인 sSelectedKey가 A인 매니저를 선택했다면, 2번째 column과 4번째 column을 setVisible로 보이게 하고 그게 아닌 B를 선택했다면 보이지 않게 한다.