트리 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;
  }