열(Col) 구조에 대한 이해

시트를 세로로 나누면 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인 열 객체 얻기

// 열에 설정된 색상 확인
console.log(col["Color"]);

// 열에 속성 변경
col["TextColor"] = "#FF0000";       //열에 색상 정의
col["CanSelect"] = 0;               //열에 대한 선택 불가(드래그시 선택이 안됨)
sheet.rerender();                   //변경내용 반영

다만 위와 같이 직접 열에 속성에 직접 접근하여 속성값을 변경하는 경우 시트내에서 이를 감지하지 못하여 예상치 못한 문제가 발생할 수 있으므로 가급적 getAttributesetAttribute 함수를 사용하실 것을 권해드립니다.

빈번하게 사용되는 열 유형에 대해서 Extend 기능 활용

프로젝트에서 자주 사용될 것 같은 기능을 갖은 열, 가령 "yyyy-MM-dd" 형식의 Date열이나 "$ 12.33"와 같은 통화 형식의 Float열을 공통으로 정의해 두고 각 화면에서는 미리 정의해둔 설정을 불러다 사용하실 수 있습니다.

[ibsheet-common.js 파일에 공통기능을 정의한 IB_Preset 이 있습니다.]

var IB_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: "Float", Width: 100, Format: "$ #,###.##"},
   ....
};

[각 페이지에서 시트 초기화 구문]

var options = {
    Cols:[
        ///Extend를 통해 미리 정의한 Type,Format 등의 설정을 적용
        {Header: "국외수입", Name: "Income", Extend: IB_Preset.USD},
        {Header: "취득일", Name: "ICDate", Extend: IB_Preset.YMD}
    ]
}

Read More

Since

product version desc
core 8.0.0.0 기능 추가