시트 객체 기본 구조

IBSheet.create의 options(초기화 구문) 구조입니다.
먼저 아래 기본 구조(자주 쓰는 핵심)를 익히고, Def, Head, Foot, Solid, Filter 등 나머지 항목이 필요하면 문서 아래 상세 구조를 참고하세요.

초기화 구문 구조 (기본)

options.(ROOT)
├── Def               // 각 영역의 공통 기능 설정
│   └── Row:{}        // 모든 데이터 행의 공통 기능 설정
│
├── Cfg:{}            // 시트 전역 기능 설정
│
├── LeftCols:[]       // 왼쪽 고정 영역 열 설정
├── Cols:[]           // 기본열 설정(가운데 영역)
├── RightCols:[]      // 우측 고정 영역 열 설정
│
└── Events:{}         // 이벤트 선언

시트설정 예)

var OPT =
{
    "Cfg": {                // 전역 기능 설정(cfg property)
        "CanEdit": 0,
    },
    "LeftCols": [           // 왼쪽영역(LeftSection) 고정 열 설정 (col property)
        { "Header": "NO", "Type": "Int", "Name": "SEQ", "Width": 50 },
        { "Header": "선택", "Type": "Bool", "CanEdit": 1, "Name": "CHK"} 
    ],
    "Cols": [               // 기본 열 설정(가운데영역)  (col property)
        { "Header": "부서명", "Name": "deptName", "Type": "Text", "Size": 30 }, 
        { "Header": "1분기", "Name": "qt1", "Type": "Int", "Width": 100, "Format": "#,##0 만원", "FormulaRow": "Avg" }, 
        { "Header": "2분기", "Name": "qt2", "Type": "Int", "Width": 100, "Format": "#,##0 만원", "FormulaRow": "Avg", "Color": "#EDEDED" }, 
        { "Header": "3분기", "Name": "qt3", "Type": "Int", "Width": 100, "Format": "#,##0 만원", "FormulaRow": "Avg" }, 
        { "Header": "4분기", "Name": "qt4", "Type": "Int", "Width": 100, "Format": "#,##0 만원", "FormulaRow": "Avg", "Color": "#EDEDED"}
    ],
    "RightCols": [],        // 오른쪽 영역(RightSection)
    "Events":{              // 이벤트 설정
        "onBeforeChange":function (evt) {
            ...
        }
    }
};

조회 데이터 구조

var DATA = [
        {"deptName": "국내영업 1팀", "qt1": 15030, "qt2": 21102, "qt3": 20308, "qt4": 23041},
        {"deptName": "국내영업 2팀", "qt1": 25100, "qt2": 42460, "qt3": 38740, "qt4": 54765},
        {"deptName": "국내영업 3팀", "qt1": 11474, "qt2": 19671, "qt3": 24746, "qt4": 20754},
        {"deptName": "해외 영업팀", "qt1": 24146, "qt2": 24654, "qt3": 24164, "qt4": 48121}
    ]

시트 생성 구문

IBSheet.create({
    "id": "mySheet", // 시트객체 이름 (SPA에서는 사용 X)
    "el": document.querySelector("div.part1 .gridarea"), // 시트를 생성할 html element 
    "options": OPT, // 초기화 구문
    "data": DATA  //초기 데이터
});

상세 구조

기본 구조 외에, 필요에 따라 사용하는 항목(Def, Head, Foot, Solid, Filter 등)까지 포함한 전체 구조입니다.

options.(ROOT)
├── Def               // 각 영역의 공통 기능 설정
│   ├── Row:{}        // 모든 데이터 행의 공통 기능 설정
│   ├── Col:{}        // 모든 데이터 열의 공통 기능 설정
│   ├── Header:{}     // 헤더 행의 공통 기능 설정
│   ├── CustomID:{}   // 임의의 행에 대한 설정
│   ├── Group: {}     // Group 행에 대한 설정
│   ├── SubSum : {}   // 소계/누계 행에 대한 설정
│   ├── FormulaRow:{} // FormulaRow행(합계)에 대한 설정
│   └── InfoRow:{}    // InfoRow(건수정보 행)에 대한 설정 (높이 등)
│
├── Cfg:{}            // 시트 전역 기능 설정
│
├── LeftCols:[]       // 왼쪽 고정 영역 열 설정
├── Cols:[]           // 기본열 설정(가운데 영역)
├── RightCols:[]      // 우측 고정 영역 열 설정
│
├── Events:{}         // 이벤트 선언
│
├── Head:[]           // 헤드영역에 커스텀행 추가/정의
├── Foot:[]           // 풋 영역에 커스텀행 추가/정의
├── Solid:[]          // Solid 행 추가/정의
└── Filter:{}         // 필터 행 추가/정의

시트설정 예)

var OPT =
{
    "Def": {                                    // 각 영역 공통 설정
        "Row":    { "AlternateColor": "#FEEDFF" },      // 모든 데이터 행 공통
        "Col":    { "CanEdit": 0 },                      // 모든 열 공통
        "Header": { "Align": "Center", "TextStyle": 1 }, // 헤더행 공통
        "SubSum": { "Color": "#EEF3FB" }                 // 소계/누계 행 공통 (배경색 등 행 속성)
    },
    "Cfg": { "HeaderMerge": 3 },                // 전역 설정
    "LeftCols":  [ { "Header": "NO",    "Name": "SEQ",      "Type": "Int",  "Width": 50 } ],
    "Cols":      [ { "Header": "부서명", "Name": "deptName", "Type": "Text" } ],
    "RightCols": [ { "Header": "합계",   "Name": "total",    "Type": "Int" } ],
    "Head": [                                   // 상단 고정행 (헤더와 데이터 사이)
        { "id": "HEAD1", "CanEdit": 0, "deptName": "상단 고정 안내" }
    ],
    "Foot": [                                   // 하단 고정행 (데이터 아래)
        { "id": "FOOT1", "CanEdit": 0, "deptName": "합계", "total": { "Type": "Int" } }
    ],
    "Events": {                                     // 전역 이벤트
        "onAfterChange": function (evt) { /* ... */ }
    },
    "Solid": [                                  // Solid 행 (열 구성과 무관한 독립 행)
        {
            "id": "mySolidRow",
            "Space": 0,                 // 위치: -1~5 (0 = 헤더 위)
            "Height": 30,
            "Cells": "Msg",             // 셀 순서
            "Msg": { "Type": "Text", "Value": "고정 안내행", "CanEdit": 0 }
        }
    ],
    "Filter": {                                 // 필터 행 (헤더 아래) — 열별 필터 셀 구성
        "deptName": {
            "Button": "Defaults",               // 필터 셀에 목록 드롭다운 버튼
            "Defaults": "|*Rows"                // 조회된 값들을 체크리스트로 자동 구성 (*RowsVisible = 보이는 행만)
        }
    }
};

Read More

• Quick Start getting started
• create static
• Header col
• ShowFilter cfg
• Defaults col

Since