[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

스프레드 변환

테이블 시트는 기본적으로 fields 객체 전체를 하나의 열(object column)로 표시하는 기본 열 구성의 뷰(view)를 생성합니다. SpreadJS에서는 fields 객체의 내용을 여러 개의 열로 펼쳐서 표시할 수 있도록 뷰를 구성할 수 있습니다. 서버에서 JSON 파일을 가져온 후, 스프레드할 대상 객체 열을 지정하여 데이터 원본 스키마(schema)를 업데이트하면 됩니다.

테이블 시트 코드에서 스키마의 열 정의에 있는 spread 속성을 사용하면, 계층 구조의 데이터를 평탄화(flatten) 하여 중첩된 객체를 최상위 속성으로 펼칠 수 있습니다. 이렇게 하면 사용자는 테이블 시트 데이터를 더 쉽게 읽고 이해할 수 있습니다.

다음 코드는 정의된 데이터 소스를 보여줍니다:

{
	"records": [{
		"customerKey": 0,
		"customer": "Unknown",
		"fields": {
			"billToCustomer": "N/A",
			"category": "N/A",
			"buyingGroup": "N/A",
			"primaryContact": "N/A",
			"postalCode": "N/A",
			"validFrom": "2013-01-01T00:00:00",
			"validTo": "9999-12-31T23:59:59.9999999"
		}
	}, {
		"customerKey": 1,
		"customer": "Tailspin Toys (Head Office)",
		"fields": {
			"billToCustomer": "Tailspin Toys (Head Office)",
			"category": "Novelty Shop",
			"buyingGroup": "Tailspin Toys",
			"primaryContact": "Waldemar Fisar",
			"postalCode": "90410",
			"validFrom": "2013-01-01T00:00:00",
			"validTo": "9999-12-31T23:59:59.9999999"
		}
	}, // more items

다음 코드 샘플은 스키마의 열(column) 정의 시 fields 열에 대해 spread 속성을 true로 설정하는 방법을 보여줍니다:

// data source 스키마
      schema: 
        { 
          dataPath: 'records', 
             columns: 
                {
                   fields: { spread: true }
                } 
        }

다음 이미지는 spread 속성의 설정 여부에 따른 테이블 시트 뷰를 보여줍니다.

설명

이미지

spread 속성이 true로 설정된 경우

tablesheet-spread

spread 속성이 false로 설정된 경우

tablesheet-spread-false

점 구분자 사용하기

SpreadJS에서는 spread 속성의 대안으로 점(.) 구분자를 사용할 수도 있습니다. 점 구분자는 테이블 시트에 뷰를 바인딩할 때 사용할 수 있습니다.

다음 코드 샘플은 점 구분자를 사용하여 테이블 시트에 뷰를 바인딩하는 방법을 보여줍니다:

//테이블 시트에 뷰 바인딩
 customerTable.fetch().then(function (data) 
 { 
     var view = customerTable.addView("myView", 
       [ 
          "customerKey", 
          "customer", 
          "fields.billToCustomer", 
          "fields.category", 
          "fields.postalCode", 
          "fields.validTo" 
     ], 
     undefined, 
      { 
       defaultColumnWidth: "*" 
      }); 
// 뷰에는 테이블의 모든 기본 열이 포함
sheet.setDataView(view); 
});