트리 Lazy Loading
트리뷰에 표시할 데이터셋을 초기에 모두 로드 할 필요는 없습니다. 사용자가 트리 행을 펼치는 시점에 그 행의 자식 행들을 가져와 트리뷰에 추가할 수 있습니다.
현재 자식이 없는 트리 행이지만 자식이 있는 것으로 표시하고 행 펼침 시 자식을 추가하려면. 먼저 행 추가시 자식 있음 설정을 true로 해야 합니다.
setRows()의 네번째 필드가 자식 있음 여부를 지정한 필드의 이름입니다. 0보다 큰 값을 "자식 있음"으로 간주하여 가져온 데이터는 자식데이터가 없지만 +를 표시합니다.
아래 예제예서는 서울특별시만 추가 데이터가 있다고 표시하였습니다.
처음 조회시 가져온 데이터
var data = [
{
"treeId": "11",
"treeName": "서울특별시",
"area1code": "11",
"area1name": "서울특별시",
"hasChild": 1, //앞에 + 표시
"iconField": 0
},
{
"treeId": "20",
"treeName": "제주도",
"area1code": "22",
"area1name": "제주도",
"hasChild": 0, //자식 데이터가 없다고 지정했기 때문에 앞에 아무 표시가 없음
"iconField": 8
}
];
treeProvider.setRows(data, "treeId", true, "hasChild", "iconField")펼칠때 다음 데이터 가져오기
treeView.onTreeItemExpanding = function (tree, itemIndex, rowId) {
// false를 리턴하면 펼쳐지지 않는다.
// return false;
// expanding 중인 행이 자식이 하나도 없다면 hasChildren이 설정된 행이다.
// 자식들을 가져와 그 행에 추가한다.
if (treeProvider.getChildCount(rowId) <= 0) {
//펼치려는 행의 키 값을 가져와서 db에서 해당 행의 자식들을 가져온 후 addChildRow()를 사용해서 추가한다.
//var key = treeProivder.getValue(rowId, "treeId");
var datas = [{
"treeId": "11.010",
"treeName": "종로구",
"area1code": "11",
"area1name": "서울특별시",
"area2code": "11010",
"area2name": "종로구",
"iconField": 1
},
{
"treeId": "11.020",
"treeName": "중구",
"area1code": "11",
"area1name": "서울특별시",
"area2code": "11020",
"area2name": "중구",
"iconField": 2
},
{
"treeId": "11.030",
"treeName": "용산구",
"area1code": "11",
"area1name": "서울특별시",
"area2code": "11030",
"area2name": "용산구",
"iconField": 3
} ];
datas.forEach(function(el) {
var childId = treeProvider.addChildRow(rowId, el, el.iconField, true);
})
}
return true;
}