트리뷰 Lazy Loading 구현
트리뷰(TreeView)에서 Lazy Loading(지연된 로드, 레이지 로딩)은 트리의 노드가 펼쳐질때 자식 노드를 추가 하는 방식으로 구현할 수 있습니다.
pivot, grid, 피벗, 필터, filter
pivot, export
pivot, style, callback, styleCallback
pivot, value, getCellValue
pivot, pivotFields, getPivotFields
트리뷰(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;
};
참고로, 트리가 접힐때 호출되는 콜백 함수는
입니다.