시트를 세로로 나누면
Left, Center, Right Section으로 나뉩니다.
각각의 영역은 고유하게 스크롤을 갖을 수 있고 각 영역 간에 이동도 가능합니다.
시트 생성시 LeftCols, Cols, RightCols 에 각 열에 대한 기능을 정의하면 원하는 개수만큼 열을 생성할 수 있습니다.
단, SEQ 열은 항상 자동으로 생성되며 별도로 Name: "SEQ" 인 열을 설정하지 않으면 LeftCols에 Hidden 상태로 생성됩니다.
sheet.showCol('SEQ'); 로 숨겨진 SEQ 열을 확인 할 수 있습니다.
빈번하게 사용될 것 같은 열의 기능은 Extend를 통해 여러개 열에 동일하게 적용하실 수 있습니다.
var options =
{
"Cfg": { //전역 기능 설정(cfg property)
"LeftCanResize": 1, "LeftWidth": 100, "RightCanResize": 1, "RightWidth": 100
},
LeftCols: [ //왼쪽영역(LeftSection) 고정 열 설정 (col property)
{"Header": "NO", "Type": "Int", "Name": "SEQ", "Width": 50},
{"Header": "선택", "Type": "Bool", "CanEdit": 1,"Name": "chk", "Width": 50},
{"Header": "년도", "Name": "Year", "Type": "Text", "Align": "Center", "Width": 70}
],
Cols: [ //가운데 영역
{"Header": "매출", "Name": "revenue", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
{"Header": "매출원가", "Name": "revenueOrg", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
{"Header": "판매관리비", "Name": "salesMgr", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
{"Header": "영업이익", "Name": "oprIncome", "Type": "Int", "Width": 120, "Format": "#,### 백만원", Formula: "revenue-revenueOrg-salesMgr", Color: "#DEDEDE"}
],
RightCols: [ //오른쪽영역(RightSection) 고정 열 설정 (col property)
{"Header": "금융손실", "Name": "finloss", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
{"Header": "법인세", "Name": "corpTax", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
{"Header": "순이익", "Name": "INCOME", "Type": "Int", "Width": 120, "Format": "#,### 백만원", Formula: "oprIncome-finloss-corpTax", Color: "#DEDEDE"}
]
};

[좌측,가운데,우측 영역]
각 영역에 대한 너비는 Cfg에서 LeftWidth, RightWidth를 통해 설정하게 됩니다.
다만, 시트의 너비가 충분히 커서 가로스크롤바가 필요 없는 경우에는 위 설정은 무시됩니다.
영역과 영역사이는 원래 붙어 있으며, 사용자가 직접 영역의 크기를 조절할 수 있게 하려면 Cfg에서 LeftCanResize, RightCanResize을 설정하시면 됩니다.
이미 생성된 열에 대해서도 기능을 수정하거나 추가할 수 있습니다.
var col = sheet.Cols["finloss"]; //Name이 finloss인 열 객체 얻기
col["TextColor"] = "#FF0000"; //열에 색상 정의
col["CanSelect"] = 0; //열에 대한 선택 불가(드래그시 선택이 안됨)
sheet.rerender(); //변경내용 반영
프로젝트에서 자주 사용될 것 같은 유형의 열, 가령 년월일 열이나 USD 통화 형식의 열을 공통으로 정의해 두고 각 화면에서 열을 정의할 때, 미리 정의해둔 설정을 불러다 사용하실 수 있습니다.
[common.js 와 같은 공통 js 파일에서 자주 사용되는 열 유형을 정의해 둔다.]
var IBS_Preset = {
"YMD": {Type: "Date", Width: 110, Align: "Center", Format: "yyyy-MM-dd", DataFormat: "yyyyMMdd", EditFormat: "yyyyMMdd"},
"YM": {Type: "Date", Width: 90, Align: "Center", Format: "yyyy-MM", DataFormat: "yyyyMM", EditFormat: "yyyyMM"},
"USD":{Type: "Int", Width: 100, Format: "$ #,###"}
};
[각 페이지에서 시트 초기화 구문]
var options = {
Cols:[
///Extend를 통해 미리 정의한 Type,Format 등의 설정을 적용
{Header: "국외수입", Name: "Income", Extend: IBS_Preset.USD},
{Header: "취득일", Name: "ICDate", Extend: IBS_Preset.YMD}
]
}
| product | version | desc |
|---|---|---|
| core | 8.0.0.0 | 기능 추가 |