헤더 기능

열 너비 변경

헤더 셀의 너비를 조절하여 컬럼의 크기를 조절할 수 있습니다.

열너비 조절

열 위치 이동

사용자가 헤더 셀에서 Drag & Drop을 통해 열의 너비를 변경하거나 열의 위치를 수정하실 수 있습니다.

단일 헤더 열이동
[드래그를 통한 열 위치 이동 예1]

다중 헤더 열이동
[드래그를 통한 열 위치 이동 예2]

다중 열 정렬

헤더 셀을 클릭하거나 제공되는 API를 통해 단일열 뿐 아니라 여러개 열에 대해 동시에 정렬하실 수 있습니다.
(별도 설정하지 않는 경우, 기본 3개 컬럼에 대해 순차적으로 정렬 가능)

다중열소트
[여러개 열에 대한 소팅 예]

정렬 다이얼로그

또한 별도의 정렬 다이얼로그를 띄우는 경우 다이얼로그를 통해 소팅될 컬럼과 순서를 설정할 수 있습니다.

정렬다이얼로그
[다이얼로그를 통한 소팅 예]


헤더 메뉴

헤더 셀에서 마우스 우클릭을 통해 메뉴를 띄울 수 있습니다.
컬럼 표시 여부, 컬럼 정보 저장 여부, 필터행 여부는 ibsheet-common.js에서 공통으로 제공하는 기능입니다.
화면 개발 시 보여지는 메뉴의 구성을 추가/삭제하여 설정할 수 있습니다.

헤더메뉴
[헤더 메뉴]


1) 다중컬럼 보이기/감추기

컬럼의 표시 여부를 설정하여 일부 컬럼을 감추거나 보이게 할 수 있습니다.

다중컬럼 감추기/보이기1
[다중컬럼 감추기/보이기]

헤더가 여러줄인 경우, 트리 형태로 표시됩니다.

다중컬럼 감추기/보이기2
[헤더가 여러줄인 경우 다중컬럼 감추기/보이기]

단, 멀티레코드 형태의 그리드에서는 지원하지 않습니다.

다중컬럼 감추기/보이기3
[멀티레코드 그리드에서는 메뉴노출이 되지 않음]


2) 컬럼 정보 저장

시트의 정보를 로컬/세션 스토리지에 저장할 수 있습니다.

컬럼 정보 저장
[컬럼 순서 수정 후 새로고침 시 저장한 순서로 생성됨]

컬럼 정보 저장을 취소하면 새로고침 시 초기 설정의 시트를 확인할 수 있습니다.


3) 필터행 생성

헤더 아래 필터행을 생성하거나 제거할 수 있습니다.

필터행 생성
[필터행 생성/제거]