헤더 컨텍스트를 사용하기 위해서는 useContextHeaderMenu 속성 설정 및 contextMenuHeaderItems 속성을 설정하여야 합니다.
useContextMenu 속성 설정만으로 기본 바디 컨텍스트 메뉴는 출력됩니다. 그러나 헤더 컨텍스트 메뉴는 직접 원하는 메뉴 구성을 해야 합니다.
본 데모는 헤더 컨텍스트를 다음과 같이 정의한 모습입니다.
// 헤더 컨텍스트 메뉴 아이템 정의
contextMenuHeaderItems = [{
label: "오름 차순 정렬", callback: contextItemHeaderHandler
}, {
label: "내림 차순 정렬", callback: contextItemHeaderHandler
}, {
label: "정렬 초기화", callback: contextItemHeaderHandler
}, {
label: "_$line" // label 에 _$line 을 설정하면 라인을 긋는 아이템으로 인식합니다.
}, {
label: "현재 칼럼 숨기기", callback: contextItemHeaderHandler
}, {
label: "모든 칼럼 보이기(숨기기 초기화)", callback: contextItemHeaderHandler
}, {
label: "_$line" // label 에 _$line 을 설정하면 라인을 긋는 아이템으로 인식합니다.
}, {
label: "헤더 서브 메뉴",
children: [{
label: "서브 메뉴1", callback: contextItemHeaderSubHandler
}, {
label: "서브 메뉴2", style: 'my-context-item-export', callback: contextItemHeaderSubHandler
}, {
label: "서브 메뉴3", callback: contextItemHeaderSubHandler
}]
}];
모든 데모는 각각 독립적인 단일 HTML 페이지입니다. 마우스 우클릭 후 "소스 보기" (또는 크롬 기준 단축키 Ctrl + U)로 어떻게 작성되었는지 쉽게 확인 할 수 있습니다.
Copyright © AUISoft Co., Ltd.