그리드 가이드

그리드 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

템플릿 파일

/*
화면로더.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();
}

그리드 컨텍스트 메뉴 가이드

예시

화면 스크립트