트리뷰 Lazy Loading 구현
트리뷰(TreeView)에서 Lazy Loading(지연된 로드, 레이지 로딩)은 트리의 노드가 펼쳐질때 자식 노드를 추가 하는 방식으로 구현할 수 있습니다.
트리뷰(TreeView)에서 Lazy Loading(지연된 로드, 레지 로딩)은 트리 노드가 펼쳐질때 비동기 방식으로 데이터를 가져와 자식 노드에 추가하는 방식으로 구현할 수 있습니다.
이 데모에서 자식 노드는 jQuery ajax()함수로 원격의 데이터를 비동기 방식으로 가져옵니다.
트리 노드가 펼쳐질때 호출해 주는 콜백 함수는
입니다.
이벤트가 호출되는 시점에 원격 데이터를 가지고와서 트리의 자식노드로 추가합니다. 콜백함수에서 true
를
리턴하면 펼치는 동작을 완료하고 false
를 리턴하면 펼치기를 취소합니다.
버튼을 클릭하면 노드의 (+) 버튼을 눌러 펼칠때 원격 데이터를 비동기 방식으로 불러와 자식 노드를 만듭니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// onTreeItemExpanding 이벤트에서 자식 노드 추가
treeView.onTreeItemExpanding = function (tree, itemIndex, rowId) {
// expanding 중인 행이 자식이 하나도 없다면 hasChildren이 설정된 행이다.
// 자식들을 가져와 그 행에 추가한다.
if (treeDataProvider.getChildCount(rowId) <= 0) {
$.ajax({
type: "GET",
url: "https//" + location.host + "/resource/data/treedata5.txt?__time__=" + new Date().getTime(),
dataType: "text",
success: function (data) {
treeDataProvider.fillCsvData(data,
{
append: true,
parent: rowId,
children: "childrenField",
tree: "tree",
icon: "icon",
quoted: true,
start: 0
}
);
treeView.setFocus();
},
error: function (xhr, status, error) {
alert(error);
}
});
}
return true;
};
참고로, 트리가 접힐때 호출되는 콜백 함수는
입니다.