2014-02-25 3 views
0

json 데이터 렌더링을 위해 Dojo 트리를 렌더링하려고합니다.Dijit Tree가 예상대로 렌더링되지 않습니다.

당신은 내가 아이 노드를 참조하고 있지 않다 http://jsfiddle.net/F53Ge/38/

        require(["dojo/parser","dojo/json","dojo/store/Memory","dijit/tree/ObjectStoreModel","dijit/Tree", "dojo/window"], function    (parser,json,Memory,ObjectStoreModel,Tree,win) { 



var data = [{"id":"root","team":[{"teamId":1,"teamname":"JMK_TEST_1","parentteamId":0,"associatedList":[{"type":"9117","number":"1011D1P"}]},{"teamId":174,"teamName":"JJG_PARENT_3","parentteamId":0,"associatedList":[{"type":"8205","number":"062072T"}]},{"teamId":172,"teamName":"JJG_PARENT_1","parentteamId":0,"subteamsList":[{"teamId":175,"teamName":"JJG_Subteam_1","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]},{"teamId":176,"teamName":"JJG_Subteam_2","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]},{"teamId":221,"teamName":"JJG_Parent_4","parentteamId":0,"subteamsList":[{"teamId":222,"teamName":"JJG_Subteam_4_1","parentteamId":221,"associatedList":[{"type":"9117","number":"10E7683"},{"type":"9119","number":"514DDB2"},{"type":"8233","number":"102FE9P"},{"type":"7978","number":"KDGYKLL"},{"type":"7978","number":"99A9880"}]}]},{"teamId":106,"teamName":"JMK_TEST","parentteamId":0,"subteamsList":[{"teamId":107,"teamName":"JMK_TEST1","parentteamId":106,"subteamsList":[{"teamId":173,"teamName":"JJG_PARENT_2","parentteamId":107,"subteamsList":[{"teamId":178,"teamName":"JJG_Subteam_2_1","parentteamId":173,"associatedList":[{"type":"9117","number":"10E7683"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]}]}]}]}]; 


var store = new Memory({ 
    data: data, 
    getChildren: function(object){ 
     return object.team || []; 
    } 
}); 

    var model = new ObjectStoreModel({ 
store: store, 
    query: { id:'root' }, 
    mayHaveChildren: function (item) { 
     return "subteamsList" in item; 
    } 
}); 

var tree = new Tree({ 
    model: model, 
    showRoot: false, 
    autoExpand: true, 
    persist: false, 
    onClick: function (item, treeNode, e) { 
     selectednodeid = this.selectedNode; 
     win.scrollIntoView(selectednodeid); 
     alert(selectednodeid); 
    } 
},"oopt_list"); 
tree.startup(); 


}); 

처음에 일을하고 있고 또한 목록의 정의와 같이 라벨을 전달하는 방법을 모르는 것을 볼 수 있습니다.

도움을 주시면 감사하겠습니다.

대신 ForestModel을 사용해야하는지 알려주세요. 기본적으로 나는 나무 hireachy에서 json 데이터를 표시하려고하고 어떤 노드가 사용자가 클릭했는지 알고 싶습니다. 그래서 나는 그것에 기초하여 어떤 행동을 할 수 있습니다.

감사 땅벌 레이블로 사용되어야하는 속성을 정의하려면

답변

0

, 당신은 정의 할 필요가있다 'labelAttr'모델.

하위 노드가 보이지 않는 이유는 상점에 idProperty가 없다는 것입니다. (또는 루트 항목 'id'에는 다른 id 속성이 있고 다른 항목에는 'teamId'가 다릅니다.)

ForestModel 대신 ObjectStoreModel을 사용하는 것이 정확합니다. 새로운 dojo/store API의 구현 인 Memory store를 사용하고 있습니다.

는 샘플 여기 http://jsfiddle.net/F53Ge/42/

require(["dojo/parser","dojo/json","dojo/store/Memory","dijit/tree/ObjectStoreModel","dijit/ Tree", "dojo/window"], function (parser,json,Memory,ObjectStoreModel,Tree,win) { 



var data = [{"teamId":"root","subteamsList":[{"teamId":1,"teamName":"JMK_TEST_1","parentteamId":0,"associatedList":[{"type":"9117","number":"1011D1P"}]},{"teamId":174,"teamName":"JJG_PARENT_3","parentteamId":0,"associatedList":[{"type":"8205","number":"062072T"}]},{"teamId":172,"teamName":"JJG_PARENT_1","parentteamId":0,"subteamsList":[{"teamId":175,"teamName":"JJG_Subteam_1","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]},{"teamId":176,"teamName":"JJG_Subteam_2","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]},{"teamId":221,"teamName":"JJG_Parent_4","parentteamId":0,"subteamsList":[{"teamId":222,"teamName":"JJG_Subteam_4_1","parentteamId":221,"associatedList":[{"type":"9117","number":"10E7683"},{"type":"9119","number":"514DDB2"},{"type":"8233","number":"102FE9P"},{"type":"7978","number":"KDGYKLL"},{"type":"7978","number":"99A9880"}]}]},{"teamId":106,"teamName":"JMK_TEST","parentteamId":0,"subteamsList":[{"teamId":107,"teamName":"JMK_TEST1","parentteamId":106,"subteamsList":[{"teamId":173,"teamName":"JJG_PARENT_2","parentteamId":107,"subteamsList":[{"teamId":178,"teamName":"JJG_Subteam_2_1","parentteamId":173,"associatedList":[{"type":"9117","number":"10E7683"}]}],"associatedList": [{"type":"7945","number":"KQZGTNC"}]}]}]}]}]; 


    var store = new Memory({ 
     data: data, 
     idProperty:"teamId", 
     getChildren: function(object){ 
      return object.subteamsList || []; 
     } 
    }); 

    var model = new ObjectStoreModel({ 
    store: store, 
     query: { teamId:'root' }, 
     mayHaveChildren: function (item) { 
      console.log("may",item) 
      return "subteamsList" in item; 
     },labelAttr :"teamName" 
    }); 
    var tree = new Tree({ 
     model: model, 
     showRoot: false, 
     autoExpand: true, 
     persist: false, 
     onClick: function (item, treeNode, e) { 
      selectednodeid = this.selectedNode; 
      win.scrollIntoView(selectednodeid); 
      alert(selectednodeid); 
     } 
    },"oopt_list"); 
    tree.startup(); 


}); 
+0

DS 업데이트를 참조하십시오 (ForestModel 오래된 도장/데이터 API 만 사용되어야한다). 이것은 완벽 해. 내가 가진 한 가지 질문은 associatedList의 하위 항목도 얻을 수 있습니까? – bumblebee