TreeView는 DataSet 의 부모-자식 키 컬럼을 이용해 계층(Tree) 구조로 표시하는 컨트롤입니다. 체크박스, 드래그&드롭, 인라인 편집, 컨텍스트 메뉴, Lazy-Load (자식 노드 동적 로딩), 라벨 기반 필터를 지원합니다.
구버전 Tree 컨트롤과 데이터 바인딩 방식은 동일하지만, TreeView 는 Canvas 기반으로 렌더링되어 대량 데이터에서도 부드러운 스크롤/그리기 성능을 제공합니다.
1. TreeView 컴포넌트 생성하기
i-AUD Designer 의 상단 컨트롤 메뉴에서 Tree 그룹을 펼쳐 TreeView를 클릭한 뒤, 화면의 원하는 위치에 드롭하여 컴포넌트를 배치합니다.
배치 후 우측 PropertyGrid 에서 다음 절에 설명할 속성들을 설정합니다.
2. TreeView 속성
| 구분 | 상세 구분 | 상세 설명 |
|---|---|---|
| Data | Data Source | Tree 에 바인딩할 DataSource 선택 |
| Label Field | 화면에 표시할 텍스트(캡션) 컬럼명 | |
| Value Field | 각 노드의 고유 키(=PK) 컬럼명 | |
| Has Child Field | 서버 Lazy-Load 대상임을 표시할 컬럼명. 값이 'Y' / 1 / true 이면 자식 노드 존재로 표시되며, 펼치는 시점에 OnNodeBeforeExpand 이벤트 발생 | |
| Image Field | 노드 좌측 아이콘 이미지 경로 컬럼명 | |
| Parent Key Field | 부모 노드 키 컬럼명. 값이 비어 있으면 최상위 노드로 취급 | |
| Tool Tip Field | 마우스 오버 시 툴팁으로 표시할 컬럼명 | |
| Behavior | Show CheckBox | 체크박스 표시 여부 |
| CheckBox Select Type | 체크 동작 방식. Hierarchy = 부모↔자식 자동 전파, SingleNode = 노드 단일 토글 | |
| Auto Expand Level | SetDataSet 직후 자동으로 펼칠 깊이 (0=루트만, 1=루트+자식 1단계 …) | |
| Editable | 캡션 더블클릭으로 인라인 편집 허용 여부 ( OnTextChange 이벤트로 변경 값 수신) | |
| Enable DragNDrop | 드래그&드롭으로 노드 위치 이동 허용 여부 | |
| Is Multi Select | Ctrl/Shift 다중 선택 허용 여부 | |
| Row Height | 노드 한 줄 높이 (px) | |
| Hover BackColor | 마우스 오버 노드 행 배경색 |
3. Lazy-Load (자식 노드 동적 로딩)
자식 데이터가 많거나 서버 호출 비용이 큰 경우, 펼치는 시점에 자식만 로딩하는 Lazy-Load 패턴을 사용합니다.
- 최상위 데이터 SQL 결과에 HAS_CHILD 컬럼을 포함시키고, 자식이 있는 행은
'Y'로 채워 둡니다. - PropertyGrid 의 Data > Has Child Field 에
HAS_CHILD컬럼명을 설정합니다. - 스크립트에서
OnNodeBeforeExpand이벤트 안에서 자식 데이터를 조회하고AppendTable(node, dataTable)로 주입합니다.
var tree = Matrix.getObject("TREE_VIEW");
tree.OnNodeBeforeExpand = function (sender, e) {
if (e.Node.IsChildLoaded) return; // 이미 로드된 노드는 skip
BizObject.READ_CHILD_LIST(e.Node.GetValue("KEY"), function (ds) {
tree.AppendTable(e.Node, ds.GetTable(0)); // 자식 일괄 주입
});
};
5. 스크립트 사용 예제
5.1 선택된 노드 가져오기
var tree = Matrix.getObject("TREE_VIEW");
tree.OnSelectedItemChanged = function (sender, e) {
var lastNode = e.LastSelectedNode;
if (lastNode) {
var key = lastNode.Key;
var label = lastNode.Caption;
}
};
5.2 체크된 노드 모두 수집
var tree = Matrix.getObject("TREE_VIEW");
function collectChecked(parent, out) {
parent.GetChildNodeList().forEach(function (c) {
if (c.IsChecked) out.push(c);
collectChecked(c, out);
});
}
var checked = [];
collectChecked(tree.RootNode, checked);
5.3 노드 동적 추가
var tree = Matrix.getObject("TREE_VIEW");
var node = tree.AppendRow("NEW_KEY", "PARENT_KEY");
node.SetValue("LABEL", "신규 항목");
tree.Update();
5.4 라벨 기반 필터
var tree = Matrix.getObject("TREE_VIEW");
var txtFind = Matrix.getObject("TXT_FIND");
txtFind.OnTextKeydown = function (sender, e) {
if (e.Event.isEnter()) tree.Filter(txtFind.Text);
};
// 필터 해제
// tree.Filter("");
6. 주요 이벤트
| 이벤트 | 발생 시점 / 주요 args |
|---|---|
| OnSelectedItemChanged | 선택 노드 변경. e.SelectedNodes, e.LastSelectedNode |
| OnNodeClick | 노드 좌클릭. e.Node |
| OnNodeRightClick | 노드 우클릭 (ContextMenu 직전). e.Node |
| OnNodeDbClick | 노드 더블클릭. e.Node |
| OnNodeCheckboxClick | 체크박스 클릭. e.Row, e.Checked, e.Cancel |
| OnNodeBeforeExpand | 노드 펼치기 직전. Lazy-Load 진입 지점. e.Node |
| OnNodeAfterExpand | 노드 펼침 완료 직후. e.Node |
| OnNodeBeforeCollapsed | 노드 접기 직전. e.Node |
| OnNodeAfterCollapsed | 노드 접힘 완료 직후. e.Node |
| OnContextMenuOpening | 컨텍스트 메뉴 열림. e.Menu 로 동적 메뉴 구성 |
| OnTextChange | 인라인 편집 후 Enter/포커스 아웃. e.SelectedRow, e.Value |
| OnStartDrag / OnDrag / OnStartDrop / OnEndDrop | 드래그&드롭 라이프사이클 |
| OnCellLoaded | 각 노드가 화면에 처음 그려질 때 |
7. 주요 메소드
| 메소드 | 설명 |
|---|---|
| SetDataSet(ds) | DataSet 바인딩. 첫 호출 시 AutoExpandLevel 깊이까지 자동 펼침 |
| ClearDataSet() / Clear() | 전체 노드/데이터 초기화 |
| AppendRow(key, parentKey) | 단일 노드 추가. 반환 TreeViewNode |
| AppendTable(parentNode, dataTable) | parentNode 자식을 dataTable 로 일괄 주입 (Lazy-Load) |
| RemoveRow(key) / RemoveNode(code) | 노드 삭제 |
| Expand(node) / Collapse(node) | 노드 단위 펼침/접기 |
| ExpandAll() / CollapseAll() | 전체 펼침/접기 |
| ExpandToLevel(depth) | 특정 깊이까지 펼침 |
| FindAndFocus(key) | 키로 노드 검색 후 스크롤 + 포커스 |
| Filter(keyword) | 라벨 부분일치 필터. 빈 문자열로 해제 |
| GetTreeNode(key) / GetNode(key) | 키로 노드 조회 |
| RefreshNode(node) | Lazy-Load 노드 강제 재조회 (OnNodeBeforeExpand 재발생) |
| Refresh() | DataSource 서버 재조회 + 바인딩 |
| Update() | 다시 그리기 |
