[UI5] 배열을 바인딩하는 모듈(Table)

먼저 데이터가 있는 json파일을 불러온다.

component.js

    var that = this; 

            $.ajax({
             url:"./json/products.json",
             type: "get",
             success: function (oResult) { /*결과가 oResult 변수에 들어감*/
                 var oProductModel = new JSONModel(oResult);    
                 that.setModel(oProductModel, "product"); 
             }
         });

this는 Component를 가리키는데 ajax 안에서 this를 하게되면 다른걸 가리키게 된다.

App.view.xml

<mvc:View 
   controllerName="product.controller.App"
   xmlns:html="http://www.w3.org/1999/xhtml" 
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:table="sap.ui.table"
   displayBlock="true" xmlns="sap.m">
   <App>
      <pages>
         <Page title="{i18n>title}">
            <content>
               <table:Table
                      fixedBottomRowCount="2"
                    selectionBehavior="Row"
                    rows="{product>/ProductCollection}"> 
                  <table:extension>
                     <OverflowToolbar>
                        <Title text="Product List" />
                     </OverflowToolbar>
                  </table:extension>
                  <table:columns>
                     <table:Column width="12rem" sortProperty="Name" filterProperty="Name"> 
                        <Label text="Product Name" />
                        <table:template>
                           <Text text="{product>Name}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="11rem">
                        <Label text="Product Id" />
                        <table:template>
                           <Text text="{product>ProductId}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="6rem">
                        <Label text="Quantity" />
                        <table:template>
                           <Text text="{product>Quantity}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="9rem">
                        <Label text="Status" />
                        <table:template>
                           <Text text="{product>Status}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="8rem">
                        <Label text="Price" />
                        <table:template>
                           <Text text="{product>Price}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="10rem">
                        <Label text="Supplier" />
                        <table:template>
                           <Text text="{product>SupplierName}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="11rem">
                        <Label text="Category" />
                        <table:template>
                           <Text text="{product>Category}"/>
                        </table:template>
                     </table:Column>
                        <table:Column width="11rem" hAlign="Center">
                        <Label text="Delivery Date" />
                        <table:template>
                           <Text text="{product>DateOfSale}"/>
                        </table:template>
                     </table:Column>
                  </table:columns>
               </table:Table>
            </content>
         </Page>
      </pages>
   </App>
</mvc:View>

component.js에서 모델이름을 product로 줬기 때문에 데이터를 바인딩할때 {모델명>프로포티명}으로 바인딩한다.

table:Table에서 여러 프로포티를 사용해 속성을 부여할 수 있다.

selectionMode는 MultiToggle이 기본값이다. 그래서 값을 "Single"로 줘야 체크박스가 삭제되고 하나만 선택 가능해진다. "None"은 아예 선택이 불가능하다.
selectionBehavior는 RowSelector이 기본값이다. 그래서 값을 "Row"로 주면 줄을 선택했을때 체크박스도 체크된다. "Rowonly" 는 줄만 선택할 수 있게 한다.

fixedColumnCount는 숫자만큼 열을 고정시켜 값을 "2"로 주면 앞에오는 2번째 열까지 고정한다. 엑셀에서 사용하는 열 고정 기능과 비슷한 기능이다.
fixedBottomRowCount는 숫자만큼 아래 행을 고정시킨다.

table:Column에서도 여러 프로포티를 사용해 속성을 부여할 수 있다.

sortProperty는 값에 정렬할 필드이름을 적으면 해당 필드를 정렬한다.
filterProperty는 값에 필드이름을 적으면 해당 column에 필터 기능이 추가된다.

금액에 단위 추가

    <table:Column width="8rem">
                        <Label text="Price" />
                        <table:template>
                           <!--<Text text="{product>Price}"/>-->
                           <Text text="{
                                parts: [{path: 'product>Price'}, {path:'product>CurrencyCode'}],
                                type: 'sap.ui.model.type.Currency',
                                formatOptions: {
                                    showMeasure: true
                                }
                            }" />
                       </table:template>
        </table:Column>