테이블 시트 교차 열

테이블 시트는 여러 관련 테이블의 필드를 단일 행 뷰에서 표시할 수 있도록 돕는 교차 열(cross column)을 생성할 수 있는 기능을 제공합니다. 이 기능은 데이터 입력을 위한 보다 간소화된 행 뷰로 테이블 시트를 표시할 수 있게 해줍니다.

교차 열은 method 메서드에서 필드를 추가할 때 각 필드의 cross 속성을 사용하여 설정할 수 있습니다. cross 속성은 fields, attributes, filters, captions 등의 옵션을 설정하는 데 사용할 수 있습니다.

다음 단계는 테이블 시트에서 "package" 필드의 배열 값을 사용하여 교차 열을 추가하는 방법을 보여줍니다.

1. 데이터 소스 스키마에서 columns 옵션을 사용하여 여러 테이블을 추가합니다.

   스키마에서 lookup으로 정의된 필드만 교차 열(cross-columns)에서 사용할 수 있습니다.

   //dataManager에 고객 테이블 추가
   var customerTable = dataManager.addTable("customerTable", {
       remote: {
           read: {
               url: 'https://demodata.grapecity.com/wwi/api/v1/customers'
   
           }
       }
   });
   
   // dataManager에 세일즈 테이블 추가
   var salesTable = dataManager.addTable("salesTable", {
       remote: {
           read: {
               url: 'https://demodata.grapecity.com/wwi/api/v1/sales?PageNumber=10&PageSize=500'
           }
       },
       schema:{
           columns:{
               package: { lookup: ["Each","Pair"] }, // 교차열 기능 
           }
       }
   });

2. 테이블의 기본 키(primary key)를 지정합니다.

   customerTable.primaryKey("customerKey")
   salesTable.primaryKey("saleKey")

3. 테이블 간의 관계를 추가합니다.

   //세일즈 테이블과 고객 테이블 사이 관계 추가 
   dataManager.addRelationship(salesTable, "customerKey", "myCustomer", customerTable, "customerKey", "mySales");

4. 교차 열(cross-column) 옵션이 포함된 사용자 정의 뷰(custom view)를 추가합니다.

   Ask ChatGPT

   //사용자정의 뷰 추가
   customerTable.fetch().then(function () {
       var selectView = customerTable.addView("customersView",
           [
               { value: 'customerKey' },
               { value: 'customer' },
               { value: 'billToCustomer' },
               { value: 'category' },
           ]);
       // 관계형 뷰에 사용될 다중 열 드롭다운 생성
       var multiSelectStyle = {
           formatter: '{{=IFERROR(CONCAT(PROPERTY(@, "customer"), ", ", PROPERTY(@, "customerKey")), "")}}',
           cellButtons: [
               {
                   imageType: "dropdown",
                   command: "openMultiColumn",
                   useButtonStyle: true,
               }
           ],
           dropDowns: [
               {
                   type: "multiColumn",
                   option: {
                       width: 400,
                       height: 300,
                       dataSource: selectView,
                       bindingInfos: [
                           { name: "customerKey", size: 100, caption: "Customer Key" },
                           { name: "customer", size: "*", caption: "Customer" },
                           { name: "category", size: 100, caption: "Category" }
                       ]
                   }
               }
           ]
       };
       var myView = salesTable.addView("myView", [
           { value: "saleKey", width: 100, caption: "Sale Key" },
           { value: "salesPerson", width: 150, caption: "Sales Person" },
           { value: "myCustomer", width: 250, caption: "Customer Information", style: multiSelectStyle },
           { value: "address", width: 300, caption: "Address" },
           { value: "stockItem", width: 350, caption: "Stock Item" },
           { value: 'quantity', width: 80,cross: { over: 'package' } } // cross column
       ]);
       myView.fetch().then(function () {
           console.log(myView);
           // 테이블 시트에 사용자 정의 뷰 설정
           tableSheet.setDataView(myView);
       });
   });

다음과 같은 출력 결과가 생성됩니다:

테이블 시트 패널 사용

사이드 패널을 통해 테이블 시트에서 교차 열(cross-column)을 설정할 수 있습니다. 데이터 소스 스키마를 정의할 때 columns 옵션 내에 lookup 속성이 설정되어 있어야 합니다.

아래 이미지와 같이, lookup 필드를 클릭하면 cross 영역이 표시되며, 필요한 필드를 "값(Value)" 영역으로 드래그하면 교차 열이 생성됩니다.

다음과 같은 출력 결과가 생성됩니다: