시트 객체 구조

시트 객체 초기화(options)

초기화 구문 구조

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

시트설정 예)

var OPT =
{
    "Def" : {               // 공통 속성 설정
        "Col": {            // 모든 열 공통 설정  (col property)
            "CanEdit": 0
        },
        "Row": {            // 모든 행 공통 설정  (row property)
            "AlternateColor": "#FEEDFF",
            "Spanned": 1
        },
        "Header": {          // 헤더행 공통 설정 (row property)
            "Align": "Center",
            "TextStyle": 1
        },
        "MyCustomRow": {     // 임의의 행 공통 설정 (row property)
            "Color": "#666666",
            "TextColor": "#FFFFFF",
            "CanFocus": 0
        },
        "FormulaRow": {     // FormulaRow 설정 (row property)
            "Spanned": true,
            "SEQSpan": 2
        },
        "Group": {          // Group 행 설정 (row property)
            "Expanded": 1,
            "sPrice": {
               "Formula": sPriceFormula
             }
        },
        "SubSum": {         // 소계/누계 행 설정 (row property)
            "AFormat": "#,##0.##",
            "BFormat": "#,##0"
        }
    },
    "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이나 querystring 형태로 추출됩니다…

// 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", ...},
        ...
    ]
}

// querystring 형태 추출 예
id=AR1&STATUS=Changed&ColName1=ABCD&ColName2=1234&....

저장시 Response (응답) 데이터

서버사이드에서 저장작업 후 클라이언트 측으로 전달되어야 하는 json 구조는 아래와 같습니다.

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

저장 결과가 성공인 경우 입력/수정 상태의 행은 조회 상태로 돌아가고 삭제 상태의 행은 시트에서 제거 됩니다.
저장 결과가 실패인 경우 기존 상태를 유지하며 doSave()함수는 종료됩니다.

리턴되는 값에 IOResult 와 같은 속성이 없는 경우 다음과 같이 처리 됩니다.

리턴되는 결과 서버상태 처리 형태
IO 안에 Result가 없는 경우 200 성공으로 판단. onAfterSave이벤트에 result는 0리턴
결과가 아무것도 없는 경우 200 실패로 판단. onAfterSave이벤트에 result는 -4리턴
서버에서 오류가 발생한 경우 400이상의 값 실패로 판단. onAfterSave이벤트에 result는 -3 리턴

Read More

Since

product version desc
core 8.0.0.0 기능 추가