행(Row) 구조에 대한 이해

시트를 가로로 나눠 보면 크게 상단 고정 / 가운데(데이터) / 하단 고정 세 부분으로 나뉩니다.
가운데는 스크롤되는 데이터 영역입니다. 상단 고정은 데이터 영역 위, 하단 고정은 데이터 영역 아래에 고정되어 세로 스크롤해도 항상 보입니다.
각 부분에 어떤 행이 있는지는 아래에서 설명합니다. 행의 종류(Kind)는 Kind appendix를 참고하세요.

---

상단 고정

데이터 영역 위에 고정되어 항상 보이는 부분입니다. 다음 행들이 포함됩니다.

• 헤더행 — 열 제목을 보여주고, 클릭 시 소팅, 열 이동, 너비 조절을 합니다.
• 필터행 — 열별로 조건을 입력해 데이터를 거릅니다.
• 커스텀 행(Head) — 헤더행 아래에 고정으로 넣는 행입니다.

헤더행

시트 생성시 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();

[필터행]

커스텀 행(Head)

options.Head에 정의해 헤더행 아래(필터행이 있으면 그 아래)에 고정 행을 원하는 개수만큼 만듭니다. 행 구성과 예제는 → Head / Foot appendix

---

가운데 (데이터)

가운데는 doSearch(), loadSearchData()함수로 조회하거나 addRow()함수로 추가한 데이터가 보여지는 데이터 영역입니다.

[데이터 영역]

---

하단 고정

데이터 아래에 고정되어 항상 보이는 부분입니다. 다음 행들이 포함됩니다.

• 합계행(FormulaRow) — 열 합계 등을 자동 계산해 보여주는 행입니다.
• 커스텀 행(Foot) — 데이터 아래에 고정으로 넣는 행입니다.

합계 행

열의 (col) FormulaRow 속성을 설정하면 데이터 아래에 고정된 합계행이 생겨 합계나 평균 등을 자동 계산해 보여줍니다. (FormulaRow: "Sum", "Avg" 등)

커스텀 행(Foot)

options.Foot에 정의해 데이터 아래에 고정 행을 만듭니다. 행 구성과 예제는 → Head / Foot appendix

---

기타

솔리드 행

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

행의 id

행은 종류(Kind)에 따라 고유 id가 자동 부여됩니다. (AR# 데이터, Header/HR# 헤더, FR# 하단 고정 등)
자세한 규칙은 → Kind appendix, id로 행을 얻어 값이나 속성을 다루는 법은 → 행 객체 appendix

Read More

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

Since