노드와의 사용자 상호작용
노드 편집
TreeView 컨트롤은 편집 기능을 제공합니다. isReadOnly 속성을 false 로 설정하면 사용자가 F2 키를 눌러 노드의 콘텐츠를 편집할 수 있습니다.
노드 내용에 대한 편집은 자동으로 displayMemberPath속성에 지정된 속성을 사용하여 itemsSource 배열의 항목에 적용됩니다.
편집 동작은 다음 이벤트들을 사용하여 사용자 정의할 수 있습니다: nodeEditStarting, nodeEditStarted, nodeEditEnding, nodeEditEnded.
예제
편집은 자식이 없는 노드에 대해서만 활성화되었습니다. 편집하려면 노드를 선택하고 F2 키를 누르세요.
HTML
<div id="theTree"></div>Javascript
onload = function() {
// create the tree
var tree = new wjNav.TreeView('#theTree', {
itemsSource: getData(),
displayMemberPath: 'header',
childItemsPath: 'items',
isReadOnly: false,
nodeEditStarting: function (s, e) {
if (e.node.hasChildren) {
e.cancel = true;
}
}
});
// get the tree data
function getData() {
return [
{ header: 'Electronics', items: [
{ header: 'Trimmers/Shavers' },
{ header: 'Tablets' },
{ header: 'Phones', items: [
{ header: 'Apple' },
{ header: 'Motorola', newItem: true },
{ header: 'Nokia' },
{ header: 'Samsung' }]
},
{ header: 'Speakers', newItem: true },
{ header: 'Monitors' }]
},
{ header: 'Toys', items: [
{ header: 'Shopkins' },
{ header: 'Train Sets' },
{ header: 'Science Kit', newItem: true },
{ header: 'Play-Doh' },
{ header: 'Crayola' } ]
},
{ header: 'Home', items: [
{ header: 'Coffeee Maker' },
{ header: 'Breadmaker', newItem: true },
{ header: 'Solar Panel', newItem: true },
{ header: 'Work Table' },
{ header: 'Propane Grill' }]
}
];
}
}노드 비활성
TreeNode의 isDisabled 속성을 사용하여 노드를 비활성화할 수 있습니다.
비활성화된 노드는 마우스나 키보드를 사용하여 선택할 수 없습니다.
예제
버튼 클릭 시 선택된 노드를 비활성화하는 방법을 보여줍니다.
Javascript
document.getElementById('btDisable').addEventListener('click', function(e) {
//Get the currently selected node
var nd = tree.selectedNode;
if (nd) {
//Disable the node
nd.isDisabled = true;
}
});노드 표시 및 선택
TreeNode 클래스에는 ensureVisible 메서드가 있어 부모 노드를 필요에 따라 확장하고, 필요한 경우 노드를 화면에 표시하여 해당 노드가 보이도록 합니다. 또한 select 메서드를 사용하면 노드를 표시하고 선택할 수 있습니다.
예제
"Work Table" 노드를 표시하고 선택하는 방법을 보여줍니다.
onload = function() {
// find a node to show or to select and show
var theItem = findItem(tree.itemsSource, 'Work Table');
var theNode = tree.getNode(theItem);
// show the node when the user clicks the button
document.getElementById('btnShow').addEventListener('click', function() {
theNode.ensureVisible();
});
//show and select the node when the user clicks the button
document.getElementById('btnSelect').addEventListener('click', function() {
theNode.select();
});
//Find the treeview item to be shown or selected
function findItem(items, text) {
var node = null;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.header == text) {
return item;
}
if (item.items) {
item = findItem(item.items, text);
if (item) {
return item;
}
}
}
return null; // not found
}
}