트리메뉴 메인메뉴 서브메뉴 가이드

이 화면은 하나의 데이터셋을 2개의 트리메뉴에 연결하고, 메인메뉴와 서브메뉴로 표시하는 샘플 화면이다.

메인메뉴용 트리메뉴에서는 display_depth속성으로 표시할 깊이를 지정한다.

서브메뉴용 트리메뉴에는 item_display_mode속성을 1:api로 지정하여 초기기동시 메뉴를 표시하지 않도록 한다.

메인메뉴의 on_itemclick이벤트에서 서브메뉴의 setrootrowindex API를 호출하여 서브메뉴에 표시할 메뉴를 지정한다.

템플릿 위치: /HTML5/COMPONENT/TREEMENU/treemenu_main_sub

템플릿 파일

• treemenu_main_sub.xml
• treemenu_main_sub.js
• 새창으로 실행

function treemenu_main_on_itemclick(objInst, index, depth, type)
{
	// 메인메뉴에서 선택된 아이템의 인덱스로부터 데이터셋의 행 인덱스를 취득
	var row_index = treemenu_main.getitemrowindex(index);

	if (depth == 1 && row_index >= 0) {
		// 서브메뉴에서 루트가 될 데이터셋 행 인덱스를 지정한다.
		treemenu_sub.setrootrowindex(row_index);

		// item_display_mode가 1:api인 경우, refresh API를 호출해야 화면에 메뉴정보가 표시된다.
		treemenu_sub.refresh();
	}
}