각 영역별(Layout) 명칭 소개

헤더와 데이터

헤더 영역은 각 컬럼에서 Header속성에 설정한 값이 출력 되는 영역으로 해당 컬럼에서 사용되는 데이터에 대한 설명을 나타내는 영역입니다.

데이터 영역은 헤더 영역의 하단에 위치하며, 바인딩 된 데이터가 출력 되는 영역입니다.

일반적으로 데이터 영역과 구분을 위해 배경색을 적용하여 쉽게 알아보실 수 있습니다.

var OPT = {
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": ["회사명","회사명"],"Type": "Text","Name": "sCorp","MinWidth": "100","Align": "Center","CanEdit": 1, RelWidth: 1},
    {"Header": ["사원수","사원수"],"Type": "Int","Name": "sPerson","Width": "80","Align": "Right","CanEdit": 1},
    {"Header": ["금년신입","금년신입"],"Type": "Int","Name": "sNewPerson","Width": "70","Align": "Right","CanEdit": 1},
    {"Header": ["평균연봉","평균연봉"],"Type": "Float","Name": "sPay","Width": "100","Align": "Right","CanEdit": 1},
    {"Header": ["평균보너스","평균보너스"],"Type": "Float","Name": "sBonus","Width": "100","Align": "Right","CanEdit": 1},
    {"Header": ["전년매출","전년매출"],"Type": "Int","Name": "sPreYear","Width": "120","Align": "Right","CanEdit": 1,"Format": "#,### 만원"},
    {"Header": ["금년매출","금년매출"],"Type": "Float","Name": "sYear","Width": "120","Align": "Right","CanEdit": 1},
    {"Header": ["전년대비\n 증감율","전년대비\n 증감율"],"Type": "Float","Name": "sGrow","Width": "100","Align": "Right","CanEdit": 1,"Format": "#,##0.##\\%"},
    {"Header": ["내년기대\n 증감율","내년기대\n 증감율"],"Type": "Float","Name": "sPreGrow","Width": "100","Align": "Right","CanEdit": 1,"Format": "#,##0.##%"}
  ]
}

헤더와 데이터 영역

좌우측 고정영역(Section)

좌우측 고정영역(Section col)은 시트에서 좌, 우측에 각각 고정적으로 컬럼을 출력하기 위해 사용되는 영역으로, 시트 생성 시 좌측 영역은 LeftCols에서 설정하며, 우측 영역은 RightCols를 통해 설정합니다.

LeftCols가 설정되어 출력 되는 영역을 Left Section, Cols가 설정되어 출력 되는 영역을 Center Section, RightCols가 설정되어 출력 되는 영역을 Right Section이라고 구분합니다.

var OPT = {
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Header": ["기간","기간","기간"],"Type": "Text","Name": "Year","Width": "160","Align": "Center","CanEdit": 0,"RawSort": 1},
  ],
  //틀고정 우측 컬럼 설정
  "RightCols": [
    {"Header": ["세대당 \n 인구","세대당 \n 인구","세대당 \n 인구"],"Type": "Float","Name": "PG","Radio": 1,"Width": "100","Align": "Right","CanEdit": 1,"RawSort": 1},
    {"Header": ["65세이상 \n 고령자","65세이상 \n 고령자","65세이상 \n 고령자"],"Type": "Int","Name": "Elder","Radio": 1,"Width": "100","Align": "Right","CanEdit": 1,"RawSort": 1}
  ]
  ...
}