[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

Data Binding

TreeView 컨트롤을 데이터에 바인딩하기 위해 다음 세 가지 속성을 설정해야 합니다:

  1. itemsSource: 계층형 데이터를 포함하는 배열을 정의합니다. 배열의 각 항목은 노드에 대한 정보와 (선택적으로) 자식 노드 배열을 포함합니다.

  2. displayMemberPath: 트리 노드에 표시될 텍스트를 포함하는 항목의 속성 이름을 정의합니다. 기본적으로 이 속성은 'header'라는 문자열로 설정됩니다.

  3. childItemsPath: 자식 노드 배열을 포함하는 항목의 속성 이름을 정의합니다. 기본적으로 이 속성은 'items'라는 문자열로 설정됩니다.

기본적으로 TreeView는 데이터를 바인딩하면 각 레벨의 첫 번째 노드를 확장하고, 다른 모든 노드는 접힙니다. 이 동작은 트리 항목이 생성된 후 발생하는 loadedItems 이벤트를 처리하여 사용자 정의할 수 있습니다.


트리가 로드될 때 항목을 선택하려면 selectedItem 속성을 설정하면 됩니다. TreeView 컨트롤은 선택된 노드가 표시되도록 자동으로 트리를 확장하거나 스크롤합니다.


또는, collapseToLevel 메서드를 사용하여 주어진 레벨까지 모든 노드를 접거나 펼칠 수 있습니다.

HTML
 <div id="theTree"></div>
Javascript
import * as wjNav from '@mescius/wijmo.nav';

// create the tree
var tree = new wjNav.TreeView('#theTree', {
	itemsSource: getData(),
	displayMemberPath: 'header',
	childItemsPath: 'items',   
});

// get the tree data
function getData() {
	return [
		{ header: 'Electronics', img: 'resources/electronics.png', items: [
			{ header: 'Trimmers/Shavers' },
			{ header: 'Tablets' },
			{ header: 'Phones', img: 'resources/phones.png', items: [
				{ header: 'Apple' },
				{ header: 'Motorola', newItem: true },
				{ header: 'Nokia' },
				{ header: 'Samsung' }]
			},
			{ header: 'Speakers', newItem: true },
			{ header: 'Monitors' }]
		},
		{ header: 'Toys', img: 'resources/toys.png', items: [
			{ header: 'Shopkins' },
			{ header: 'Train Sets' },
			{ header: 'Science Kit', newItem: true },
			{ header: 'Play-Doh' },
			{ header: 'Crayola' } ]
		},
		{ header: 'Home', img: 'resources/home.png', items: [
			{ header: 'Coffeee Maker' },
			{ header: 'Breadmaker', newItem: true },
			{ header: 'Solar Panel', newItem: true },
			{ header: 'Work Table' },
			{ header: 'Propane Grill' }]
		}
	];
}

여러 종류로 이루어진 데이터(Hetrogeneous Data)

대부분의 TreeView 애플리케이션에서는 displayMemberPath 와 childItemsPath 속성이 노드에 표시될 속성의 이름과 자식 항목을 포함하는 속성의 이름을 정의하는 문자열로 설정됩니다.

그러나 일부 애플리케이션에서는 이러한 바인딩 속성의 이름이 데이터의 계층적 레벨에 따라 달라질 수 있습니다. 이런 경우에는 이러한 속성에 대해 속성 이름의 배열을 사용할 수 있습니다.

아래 예제는 displayMemberPath 와 childItemsPath 속성에 문자열 대신 배열을 사용하는 방법을 보여줍니다.

HTML
<div id="theTree"></div>
Javascript
onload = function() {

	// create the tree
  var tree = new wijmo.nav.TreeView('#theTree', {
  	itemsSource: getData(),
      displayMemberPath: 'continent,country,city'.split(','),
      childItemsPath: 'countries,cities'.split(',')
	});
  
  // get the data
  function getData() {
    return [
	    { continent: 'Africa', countries: [
		    { country: 'Algeria', cities: [
			    { city: 'Algiers' },
			    { city: 'Oran' },
			    { city: 'Constantine' }
		    ]},
		    { country: 'Angola', cities: [
			    { city: 'Luanda' },
			    { city: 'Ambriz' },
			    { city: 'Bailundo' }
		    ]},
		    { country: 'Benin', cities: [
			    { city: 'Porto Novo' },
			    { city: 'Cotonou' },
			    { city: 'Parakou' }
		    ]},
		    { country: 'Botswana', cities: [
			    { city: 'Gaborone' },
			    { city: 'Francistown' },
			    { city: 'Molepolole' }
		    ]},
	    ]},
	    { continent: 'Asia', countries: [
		    { country: 'Afghanistan', cities: [
			    { city: 'Kabul' },
			    { city: 'Kandahar' },
			    { city: 'Herat' }
		    ]},
		    { country: 'Armenia', cities: [
			    { city: 'Yerevan' },
			    { city: 'Gyumri' },
			    { city: 'Vanadzor' }
		    ]},
		    { country: 'Azerbaijan', cities: [
			    { city: 'Baku' },
			    { city: 'Agjabadi' },
			    { city: 'Astara' }
		    ]},
		    { country: 'Bahrain', cities: [
			    { city: 'Manama' },
			    { city: 'Riffa' },
			    { city: 'Sitra' }
		    ]},
	    ]},
	    { continent: 'Europe', countries: [
		    { country: 'Albania', cities: [
			    { city: 'Tirana' },
			    { city: 'Elbasan' },
			    { city: 'Fier' }
		    ]},
		    { country: 'Andorra', cities: [
			    { city: 'Andorra la Vieja' },
			    { city: 'Canillo' },
			    { city: 'Encamp' }
		    ]},
		    { country: 'Austria', cities: [
			    { city: 'Vienna' },
			    { city: 'Salzburg' },
			    { city: 'Graz' }
		    ]},
		    { country: 'Belarus', cities: [
			    { city: 'Minsk' },
			    { city: 'Barysaw' },
			    { city: 'Slutsk' }
		    ]},
	    ]},
	    { continent: 'America', countries: [
		    { country: 'Canada', cities: [
			    { city: 'Ottawa' },
			    { city: 'Toronto' },
			    { city: 'Vancouver' }
		    ]},
    		{ country: 'United States', cities: [
    			{ city: 'Washington' },
    			{ city: 'New York' },
    			{ city: 'Pittsburgh' }
    		]},
    		{ country: 'Mexico', cities: [
    			{ city: 'Mexico City' },
    			{ city: 'Acapulco' },
    			{ city: 'San Jose' }
    		]},
    		{ country: 'Belize', cities: [
    			{ city: 'Belmopan' },
    			{ city: 'Dangriga' },
    			{ city: 'Belize City' }
    		]},
	    ]},
	    { continent: 'Ocenania', countries: [
		    { country: 'Australia', cities: [
			    { city: 'Canberra' },
			    { city: 'Sydney' },
			    { city: 'Melbourne' }
		    ]},
		    { country: 'New Zealand', cities: [
			    { city: 'Wellington' },
			    { city: 'Christchurch' },
			    { city: 'Auckland' }
		    ]},
		    { country: 'Fiji', cities: [
			    { city: 'Suva' },
			    { city: 'Labasa' },
			    { city: 'Nasinu' }
		    ]},
		    { country: 'Vanuatu', cities: [
			    { city: 'Port Vila' },
			    { city: 'Forari' },
			    { city: 'Etate' }
		    ]},
	    ]},
    ];
  }
}