====== 그리드 컨텍스트 메뉴 가이드 ======
그리드 Context Menu 예시 화면이다.
그리드 Context Menu 정의는 화면로더.js 파일에 CONTEXT_MENU 정보를 이용하여 정의하거나, setcontextmenuinfo API를 통해서 설정한다.
그리드 popupmenu_id 속성을 통해서 화면로더.js에 정의한 컨텍스트 메뉴를 지정할 수 있다.
커스텀 메뉴에 대한 콜백은 메뉴 정보의 "callback" 속성값에 "글로벌모듈이름"."함수이름" 형태로 지정해야 한다.
관련 속성으로 popupmenu_show, popupmenu_id, popupmenu_selectblock_id, popupmenu_drop_id, popupmenu_filesave, popupmenu_excel,
popupmenu_csv, popupmenu_copy, popupmenu_copyrow, popupmenu_copycolumn, popupmenu_copyall, column_sort, column_filter가 있다.
관련 API로 getpopupmenushow, setpopupmenushow, getcontextmenuinfo, setcontextmenuinfo, initcontextmenuinfo가 있다.
===== 예시 =====
커스텀 메뉴에 대한 콜백 함수 프로토타입은 CallbackGridContextMenu 함수 소스를 참조한다.
템플릿 위치: /HTML5/COMPONENT/GRID/grid_context_menu
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_context_menu.xml|grid_context_menu.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_context_menu.js|grid_context_menu.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_context_menu|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
/*
화면로더.js 파일 그리드 메뉴 예시
CONTEXT_MENU: {
GRID: {
_default: {
{ id: 'search', icon: 'search', label: '검색', callback: 'SYSUtil.CallbackGridContextMenu' },
~
*/
//////////////////////////////////////////////////////////////////////////////
// 아래 스크립트는 SYSUtil 글로벌모듈에 정의되어 있다고 가정
//////////////////////////////////////////////////////////////////////////////
/**
* 그리드 Context Menu 처리 콜백
* @param objScreen 화면 오브젝트
* @param objGrid 그리드 컴포넌트 오브젝트
* @param strMenuId 컨텍스트 메뉴 ID
*/
function CallbackGridContextMenu(objScreen, objGrid, strMenuId) {
factory.consoleprint("CallbackExcelUpload> Screen URL = " + objScreen.getscreenurl());
factory.consoleprint("CallbackExcelUpload> Grid Name = " + objGrid.getname());
factory.consoleprint("CallbackExcelUpload> strMenuId = " + strMenuId);
}
// 화면 로드 이벤트
function screen_on_load()
{
this.btn_getcontextmenuinfo_on_click();
}
// "setpopupmenushow" 버튼 이벤트
function btn_setpopupmenushow_on_click(objInst)
{
this.grd.setpopupmenushow(!this.grd.getpopupmenushow());
}
// "getcontextmenuinfo" 버튼 이벤트
function btn_getcontextmenuinfo_on_click(objInst)
{
var objContextMenuInfo;
objContextMenuInfo = this.grdTree.getcontextmenuinfo();
console.log(objContextMenuInfo);
// 트리그리드에 메뉴 JSON 오브젝트 정보 표시
this.grdTree.displayjson(objContextMenuInfo);
}
// "setcontextmenuinfo" 버튼 이벤트
function btn_setcontextmenuinfo_on_click(objInst)
{
var objContextMenuInfo, i, count;
objContextMenuInfo = this.grdTree.getcontextmenuinfo();
// 필터 메뉴 숨김 처리
for (i = 0; i < objContextMenuInfo.menu_arr.length; i++) {
if (objContextMenuInfo.menu_arr[i].id == "filter") {
if (objContextMenuInfo.menu_arr[i].is_hidden) {
objContextMenuInfo.menu_arr[i].is_hidden = false;
}
else {
objContextMenuInfo.menu_arr[i].is_hidden = true; // 숨김 처리
}
}
}
// 변경된 메뉴 설정
this.grdTree.setcontextmenuinfo(objContextMenuInfo);
}
// "initcontextmenuinfo" 버튼 이벤트
function btn_initcontextmenuinfo_on_click(objInst)
{
this.grdTree.initcontextmenuinfo();
}