guide:component:treemenu:treemenu_main_sub [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

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

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

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

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

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

===== 예시 =====

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

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/TREEMENU/treemenu_main_sub.xml|treemenu_main_sub.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/TREEMENU/treemenu_main_sub.js|treemenu_main_sub.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/TREEMENU/treemenu_main_sub|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/TREEMENU/treemenu_main_sub"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
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();
	}
}
</sxh>