TreeView 컨트롤이 여러 개 표시되는 경우, 사용자에게 여러 TreeView 간에 데이터를 끌어다 놓을 수 있는 기능을 제공하고자 할 때가 있습니다. Wijmo의 TreeView 컨트롤을 사용하면 쉽고 간단하게 이 기능을 제공할 수 있습니다.

이 블로그에서는 TreeView 컨트롤을 두 개 만들어 컨트롤 간에 데이터를 끌어다 놓을 수 있도록 한 다음, TreeView 컨트롤의 끌어서 놓기 기능을 토글하는 단계를 간략히 설명합니다.

Wijmo는 가장 빠르고 가장 유연한 JavaScript DataGrid와 함께 정렬, 그룹화, 검색, Excel과 유사한 필터링, DataMaps, 사용자 정의 CellTemplates, 스파크라인, 풍부한 편집, Excel/PDF 내보내기, 유효성 검사, DetailsRows 등의 기능을 제공합니다. 전체 Wijmo 컴포넌트 라이브러리를 다운로드하실 수 있습니다.

필수 모듈을 가져오는 방법

TreeView 컨트롤을 생성하려면 먼저 JavaScript 파일에 필수 Wijmo 파일을 가져와야 합니다.

(자바스크립트 SystemJS 모튤 기반으로 작성되었습니다)

import ‘@grapecity/wijmo.styles/wijmo.css’;  
import * as wjNav from ‘@grapecity/wijmo.nav’;

이 코드는 Wijmo의 Nav 모듈을 가져오는데, 여기에는 TreeView를 만들기 위한 코드와 Wijmo의 CSS 파일이 포함되어 있기 때문에 컨트롤 스타일을 올바르게 지정할 수 있습니다.

TreeView 컨트롤 생성하기

필요한 파일을 가져왔으니, 이제 TreeView 컨트롤을 계속해서 만들겠습니다. 사용자가 그리드 간에 데이터를 이동할 수 있도록 하려면 컨트롤의 allowDragging 속성을 true로 설정해야 합니다. 또한 사용자가 단일 TreeView 내에서 (또는 TreeView 간에) 요소를 끌어 끌어서 놓기 기능을 비활성화할 수 있는 방법을 보여주는 메서드를 만듭니다.

var firstTree= new wjNav.TreeView(‘#firstTree’, {  
itemsSource: [  
  { header: ‘root 1’, items: [  
    { header: ‘Item 1.1’ },  
    { header: ‘Item 1.2’ },  
    { header: ‘Item 1.3’ }  
  ]}  
],  
displayMemberPath: ‘header’,  
childItemsPath: ‘items’,  
allowDragging: true,  
dragOver: dragOverBetweenTrees  
});
​
var secondTree = new wjNav.TreeView(‘#secondTree’, {  
itemsSource: [  
  { header: ‘root 2’, items: [  
    { header: ‘Item 2.1’ },  
    { header: ‘Item 2.2’ },  
    { header: ‘Item 2.3’ }  
  ]}  
],  
displayMemberPath: ‘header’,  
childItemsPath: ‘items’,  
allowDragging: true,  
dragOver: dragOverBetweenTrees  
});

TreeView가 생성되었으므로 목록 요소를 다른 TreeView로 끌어다 놓을 때 호출되는 메서드를 만들어야 합니다.

function dragOverBetweenTrees(s,e) {  
var t1 = e.dragSource.treeView;  
var t2 = e.dropTarget.treeView;
​
if(t1 == t2 && !document.getElementById(‘dragWithin’).checked) {  
  e.cancel = true;  
}  
if(t1 != t2 && document.getElementById(‘dragBetween’).checked) {  
  e.cancel = true;  
}  
}

선택한 ID(dragWithin 또는 dragBetween)를 확인합니다. 이 선택 사항은 사용자가 TreeView 컨트롤 주변 및 컨트롤 사이에 데이터를 끌어다 놓을 수 있는 방법을 결정합니다.

위의 그림과 같이 체크박스는 TreeViews와 컨트롤 내에서 항목을 끌어올 때 사용됩니다. 항목을 첫 번째 TreeView에서 두 번째 TreeView로 옮겼는데 그 반대의 경우도 마찬가지입니다.

여기서 이 샘플을 실시간으로 확인하실 수 있습니다.