컨텍스트 메뉴를 사용자 정의로 동적 구성한 데모입니다..
원하는 명령어나 메뉴를 컨텍스트 메뉴에 넣을 때 조건을 걸어 동적으로 구성합니다.
데모는 이름(Name) 칼럼과 그 외 칼럼을 다르게 구성한 모습니다.
// 컨텍스트 메뉴 이벤트 바인딩 AUIGrid.bind(myGridID, "contextMenu", function(event) { // 컨텍스트 메뉴에 보일 아이템 리스트 var myContextMenus = [{ label : "$value (커스텀)", callback : contextItemHandler // label 에 $value 를 설정하면 마우스가 있는 곳의 value 값으로 대체됩니다. }, { label : "_$line" // label 에 _$line 을 설정하면 라인을 긋는 아이템으로 인식합니다. }, { label : "Export To Excel", callback : contextItemHandler }, { label : "Open Google.com", callback : contextItemHandler }]; var myContextMenus2 = [{ label : "$value (커스텀)", callback : contextItemHandler // label 에 $value 를 설정하면 마우스가 있는 곳의 value 값으로 대체됩니다. }, { label : "_$line" // label 에 _$line 을 설정하면 라인을 긋는 아이템으로 인식합니다. }, { label : "Export To Excel", disable: true, // disable 설정하면 비활성화된 메뉴 구성 }, { label : "Open Google.com", disable: true, // disable 설정하면 비활성화된 메뉴 구성 }]; // Name 칼럼에서만 엑셀 내보내기와 구글 열기 메뉴 활성화함. if(event.dataField == "name") { return myContextMenus; } // contextMenu 이벤트에서 반환하는 컨텍스트메뉴를 출력함. return myContextMenus2 });
모든 데모는 각각 독립적인 단일 HTML 페이지입니다. 마우스 우클릭 후 "소스 보기" (또는 크롬 기준 단축키 Ctrl + U)로 어떻게 작성되었는지 쉽게 확인 할 수 있습니다.
Copyright © AUISoft Co., Ltd.