# 시트 객체 구조

시트 객체 초기화(options)

## 초기화 구문 구조

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

시트설정 예)

    var OPT =
    {
        "Def" : {               // 공통 속성 설정
            "Col": {            // 모든 열 공통 설정  (col property)
                "CanEdit": 0
            },
            "Row": {            // 모든 행 공통 설정  (row proeprty)
                "AlternateColor": "#FEEDFF",
                "Spanned": 1
            },
            "Header": {          // 헤더행 공통 설정 (row proeprty)
                "Align": "Center",
                "TextStyle": 1
            },
            "MyCustomRow": {     // 임의의 행 공통 설정 (row proeprty)
                "Color": "#666666",
                "TextColor": "#FFFFFF",
                "CanFocus": 0
            },
            "FormulaRow": {     // FormulaRow 설정 (row proeprty)
                "Spanned": true,
                "SEQSpan": 2
            },
        },
        "Cfg": {                // 전역 기능 설정(cfg property)
            "LeftCanResize": 1,
            "LeftWidth": 100,
            "RightCanResize": 1,
            "RightWidth": 100
        },
        "LeftCols": [           // 왼쪽영역(LeftSection) 고정 열 설정 (col property)
            {
                "Header": "NO",
                "Type": "Int",
                "Name": "SEQ",
                "Width": 50
            },{
                "Header": {"Value": "", "Type": "Bool"},
                "Type": "Bool",
                "CanEdit": 1,
                "CanSort": 0,
                "Name": "CHK",
                "MaxWidth": 40
            }
        ],
        "Cols": [               // 기본 열 설정(가운데영역)  (col property)
            {
                "Header": {     // 열의 헤더 설정 개별 셀 설정
                    "Value": "부서명",
                    "Color": "#085820"
                },
                "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) 고정 열 설정 (col property)
            {
                "Header": "1년 합산",
                "Name": "YEARSUM",
                "Type": "Int",
                "Format": "#,##0 만원",
                "Formula": "qt1+qt2+qt3+qt4",
                "Width": 100
            }
        ],
        "Foot": [               // 풋 영역 설정
            {
                "Def": "MyCustomRow",
            	"SEQ": {"Type": "Text"},
            	"CHK": {"Type": "Text"},
                "deptName": {"Value": "2017년 자료", "TextColor": "#FF0000", "Span": 5, "Format": "", "Type": "Text", "Align": "Center"},
                "YEARSUM": {"Type": "Text", "Format": "", "Value": "", "Formula": ""}
            }
        ],
        "Events":{              // 이벤트 설정
            "onSelectMenu":function (evt) {

            }
        },
        "Solid": [              // Solid 행 설정
        ],
        "Filter": {              // 필터 행 설정
            컬럼명: {            // 컬럼 단위로 필요한 기능을 셋팅 할 수 있음.
              Button: 'Defaults',
              Defaults: '|*Rows'
            }
        }
    };

## 조회 데이터 구조

    {
        "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}
        ]
    }

[로드된 시트 이미지]

## 이벤트 호출(event)

시트는 일반적으로 기본 이벤트와 행, 열, 셀에서 설정 가능한 `JSON 이벤트`를 가집니다.
시트 생성, 데이터 & 통신, 행, 열, 셀, 셀 타입, 페이징, 전역 설정 부분에서 각각 사용될 수 있는 다양한 이벤트가 있습니다.

이벤트 설정 방법 : 시트 생성 시 사용되는 `options`에 설정

    options.Events : { // 일반 event
        onAfterChange:function (params) {
            alert(params.oldval + "값이 " + params.val + "로 수정되었습니다.");
        }
    }

    options.Cols: [ // JSON event
        {
            Name: "ColName", OnClickSide:function () {alert("JSON Event");}
        }, ...
    ]

## 저장 및 서버 응답(save & server response)

시트의 doSave() 함수를 통해 시트의 변경사항(`추가, 삭제, 값 변경`)을 서버에 보냅니다.
서버는 시트에서 보낸 데이터로 작업을 수행한 후 시트에 결과를 JSON 형식의 객체로 반환해야합니다.

doSave()의 인자에는 시트의 변경사항을 저장할 서버 경로(`url`), 추가로 보낼 파라미터(`opt.Param`)등이 설정 가능합니다.

    function save() {
        sheet.doSave({url: "/fx2/fpSave.do", opt: {param: "p1=aa&p2=bb", delim: ";", mode: 2}});
    }

### 저장시 Request (요청) 데이터

`doSave메소드`를 실행 시 시트 내에 수정된 데이터 행(입력/수정/삭제)이 `json` 형태로 추출되어 전송됩니다.

    {"data":
        [
            {"id": "AR1", "STATUS": "Changed", "ColName1": "ABCD", "ColName2": "1234", ...},
            {"id": "AR15", "STATUS": "Added", "ColName1": "EFGHI", "ColName2": "4567", ...},
            {"id": "AR44", "STATUS": "Deleted", "ColName1": "JKLMN", "ColName2": "7890", ...},
            ...
        ]
    }

### 저장시 Response (응답) 데이터

서버사이드에서 저장작업 후 클라이언트 측으로 전달되어야 하는 json 구조는 아래와 같습니다.
저장이 완료되면 입력/수정 상태의 행은 조회상태로 돌아가고 삭제 상태의 행은 시트에서 제거 됩니다.
`Result` 상태 코드는 따로 설정이 없다면, 0 일시 에는 `-6`, 400 이상일시 에는 `-3` 을 리턴 합니다.

    성공 시 : {"IO": {"Result": 0}}  // 양수 리턴시 성공
    실패 시 : {"IO": {"Result": -2}} // 음수 리턴시 실패

### Read More

### Since

product | version | desc
--- | --- | ---
core | 8.0.0.0 | 기능 추가