# 행(Row) 구조에 대한 이해

> `ibsheet`를 가로로 나누어보면 크게 `헤더와 바디, 푸터`로 나누어 집니다.
> 헤더는 데이터 영역 상단에 고정되어 보여지는 부분으로 헤더행과 필터 등이 헤더 영역에 속합니다.
> 바디는 스크롤에 의해 보여지는 데이터 영역이고, 푸터는 합계행과 같이 바디 영역 하단에서 스크롤 여부와 상관없이 항상 보여지는 부분을 의미합니다.

## 헤더 영역

### 헤더행

시트 생성시 `options.Cols.Header`를 통해 설정한 값들이 헤더에 들어가게 됩니다.
헤더 셀은 클릭시 소팅이 되거나 드래그를 통해 열의 위치를 바꾸는 등의 역할을 수행합니다.

    var options = {
        "Cols": [
            {
                Header: [
                    {    // 열의 헤더 설정 개별 셀 설정
                        "Value": "부서정보",
                        "Color": "#085820",
                        "Span": 2
                    }, "부서명"
                ],
                "Name": "deptName", "Type": "Text", "Size": 100
            }, {
                Header: ["", "부서코드"],
                "Name": "deptCd", "Type": "Text", "Width": 100
            }, {
                Header: [
                    {
                        "Value": "2014 년 실적",
                        "Color": "#6699FF",
                        "Span": 4
                    }, "1분기"
                ],
                "Name": "qt1", "Type": "Int", "Width": 100
            }, {
                Header: ["", "2분기"],
                "Name": "qt2", "Type": "Int", "Width": 100
            }, {
                Header: ["", "3분기"],
                "Name": "qt3", "Type": "Int", "Width": 100
            }, {
                Header: ["", "4분기"],
                "Name": "qt4", "Type": "Int", "Width": 100
            }
        ]
    };

[생성된 헤더행]

### 필터행

(`cfg`) ShowFilter나 sheet.showFilterRow()함수를 통해 생성되는 필터행도 헤더부에 위치하게 됩니다.

    sheet.showFilterRow();

[필터행]

### 커스텀 행

헤더행 아래(필터행 아래)에 스크롤 여부와 상관없이 항상 보여지는 행을 원하는 개수만큼 만드실 수 있습니다.
커스텀 헤더행은 `options.Head` 속성을 통해 설정합니다.

    options = {
        Head: [
            {
                "id": "myHeadRow1",          //헤더행 ID
                "deptName": {
                    "Type": "Text", "Value": "미수금 포함 여부",
                    "Span": 2, "Color": "#EDEDED", "Align": "center", "TextStyle": 1
                },
                "qt1": {"Type": "Bool"},
                "qt2": {"Type": "Bool"},
                "qt3": {"Type": "Bool"},
                "qt4": {"Type": "Bool"}
            }
        ]
    }

[커스텀헤더행]

## 바디 영역

바디는 doSearch(), loadSearchData()함수를 통해서 조회 된 데이터나 addRow()함수를 통해 추가된 데이터가 보여지는 영역입니다.
[바디 영역]

## 푸터 영역

### 합계 행

열 생성시 (`col`) FormulaRow 속성을 설정하면 시트 하단에 고정된 합계행이 만들어져 합계값을 보여 줍니다.
합계행의 위치는 상단으로 올릴 수 도 있으나 기본적으로 생성되는 합계행은 푸터 영역에 위치하게 됩니다.

    var options = {
        "Cols": [
            ...
           }, {
                "Header": [
                    {
                        "Value": "2014 년 실적",
                        "Color": "#6699FF",
                        "Span": 4
                    }, "1분기"
                ],
                "Name": "qt1", "Type": "Int", "Width": 100, FormulaRow: "Sum"
            }, {
                "Header": ["", "2분기"],
                "Name": "qt2", "Type": "Int", "Width": 100, FormulaRow: "Avg"
            }, {
            ...
        ]
    }

[합계행]

### 커스텀 행

헤더 영역과 마찬가지로 푸터 영역에도 커스텀행을 추가할 수 있습니다.
커스텀 푸터행은 `options.Foot` 속성을 통해 설정합니다.

    options = {
        Foot: [                               //풋 영역 설정
            {
                "id": "MyFootRow1",
                "Color": "#666666",
                "TextColor": "#FFFFFF",
                "deptName": {"Value": "2015년 자료", "TextColor": "#FFBBBB", "Span": 5},
                "qt4": {"Type": "Int", "Format": "#,###", "Value": 1248423}
            }
        ]
    }

[푸터행]

## 기타

### 솔리드 행

헤더나 푸터 영역 주변에 임의의 행을 추가할 수 있습니다.
이렇게 추가된 행은 시트 내 열과 무관하게 기능과 크기를 갖을 수 있습니다.
보다 자세한 내용은 (appendix) Soild을 참고하세요.

### 행의 ID

모든 행은 고유한 `ID`를 갖고 있습니다.

데이터 행은 순서대로 `AR1, AR2, AR3...` 식의 `ID`를 갖습니다.
헤더 행은 헤더가 한줄 일 때는 Header 라는 이름을 갖고 2번째 헤더행부터는 `HR1,HR2...` 식으로 `ID`를 갖습니다.
헤더 영역나 푸터 영역에 커스텀하게 생성한 행 또는 솔리드 행은, 만드실 때 부여한 id속성 값이 고유한 ID가 됩니다.
(푸터 행을 만들때 별도의 id를 지정하지 않으면 `FR1,FR2..` 식의 `ID`를 갖습니다.)

이외에 필터행은 `Filter`, 합계행은 `FormulaRow` 라는 ID를 갖고 있습니다.
이러한 ID를 이용하여 행에 대한 값을 변경하거나 내용을 확인하실 수 있습니다.

    //example1 헤더행의 타이틀를 수정
    var hrow = sheet.getRowById("Header"); //헤더행 객체 얻기
    hrow["colName"] = "수정할 헤더명";
    sheet.refreshCell(hrow, "colName");

    //example2 일반행에 기능 설정하기
    var trow = sheet.getRowById("AR34"); //AR34번 행을 얻음
    trow["CanEdit"] = 0; //행에대한 편집 불가 설정
    trow["CanFocus"] = 0; //행 포커스 불가 설정
    sheet.refreshRow(trow);

### Def를 통한 행 공통 설정

시트 생성시 행/열에 대한 공통기능을 설정하는 `Def`를 통해서 커스텀행에 대한 디자인과 기능을 설정할 수 있습니다.

    var options = {
        Def: {
            "Col": {},  //전체 열에 대한 공통 설정
            "Row": {},  //전체 데이터 행에 대한 공통 설정
            "Header": {}, //헤더행에 대한 공통 설정

            myCustomRow2: {  //임의의 커스텀 행에대한 공통 기능 설정
                "Color": "#555555",
                "TextColor": "#FFFFFF",
                "CanFocus": 0,
                "Tip": "커스텀 행입니다."
            }
        }
    };

위와 같이 만들어진 "myCustomRow2"는 아래와 같은 방식으로 커스텀행에 적용하실 수 있습니다.

    options = {
        Head:[
            {       //커스텀 헤더행
                Def: "myCustomRow2", //Def에서 정의한 공통을 적용함
                id: "headRow1",
                "colName1": {"Type": "Text", "Align": "Right", "Value": "상태"},
                "colName2": {"Type": "Text", "Align": "Left", "Value": "작업완료"}
            }
        ]
    };

### Read More

- ShowFilter cfg
- FormulaRow col
- addRow method
- doSearch method
- loadSearchData method
- showFilterRow method
- 행 객체 appendix
- Soild appendix

### Since

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