헤더 컨텍스트를 사용하기 위해서는 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.