dijit樹不能從collapase樹得到孩子

Question

我的道場樹非常巨大。我需要在一段時間擴展一個節點以提高性能。我的樹有複選框。當檢查父節點時，我需要知道父節點的所有子節點，也就是子節點直到樹的葉節點。由於樹未展開，因此我無法使用下面的代碼來獲取該孩子。

onClick: function(item, node) { 
      var childTreeNode = node.getChildren(); 
} 

在這種情況下，我如何獲得子女和子女的詳細信息。

下面的小提琴鏈接包含樹。

http://jsfiddle.net/pyz9Lcpv/11/

HTML代碼：

<div id="contentHere"></div> 
<div id="contentButton"> 
    <button>Try it</button> 
</div> 

的JavaScript：

require([ 
    "dojo/_base/window", "dojo/store/Memory", 
    "dijit/tree/ObjectStoreModel", 
    "dijit/Tree", "dijit/form/CheckBox", "dojo/dom", 
    "dojo/domReady!"], function (win, Memory, ObjectStoreModel, Tree, checkBox, dom) { 

    // Create test store, adding the getChildren() method required by ObjectStoreModel 
    var myStore = new Memory({ 
     data: [{ 
      id: 'world', 
      name: 'The earth', 
      type: 'planet', 
      population: '6 billion' 
     }, { 
      id: 'AF', 
      name: 'Africa', 
      type: 'continent', 
      population: '900 million', 
      area: '30,221,532 sq km', 
      timezone: '-1 UTC to +4 UTC', 
      parent: 'world' 
     }, { 
      id: 'EG', 
      name: 'Egypt', 
      type: 'country', 
      parent: 'AF' 
     }, { 
      id: 'KE', 
      name: 'Kenya', 
      type: 'country', 
      parent: 'AF' 
     }, { 
      id: 'Nairobi', 
      name: 'Nairobi', 
      type: 'city', 
      parent: 'KE' 
     }, { 
      id: 'Mombasa', 
      name: 'Mombasa', 
      type: 'city', 
      parent: 'KE' 
     }, { 
      id: 'SD', 
      name: 'Sudan', 
      type: 'country', 
      parent: 'AF' 
     }, { 
      id: 'Khartoum', 
      name: 'Khartoum', 
      type: 'city', 
      parent: 'SD' 
     }, { 
      id: 'AS', 
      name: 'Asia', 
      type: 'continent', 
      parent: 'world' 
     }, { 
      id: 'CN', 
      name: 'China', 
      type: 'country', 
      parent: 'AS' 
     }, { 
      id: 'IN', 
      name: 'India', 
      type: 'country', 
      parent: 'AS' 
     }, { 
      id: 'RU', 
      name: 'Russia', 
      type: 'country', 
      parent: 'AS' 
     }, { 
      id: 'MN', 
      name: 'Mongolia', 
      type: 'country', 
      parent: 'AS' 
     }, { 
      id: 'OC', 
      name: 'Oceania', 
      type: 'continent', 
      population: '21 million', 
      parent: 'world' 
     }, { 
      id: 'EU', 
      name: 'Europe', 
      type: 'continent', 
      parent: 'world' 
     }, { 
      id: 'DE', 
      name: 'Germany', 
      type: 'country', 
      parent: 'EU' 
     }, { 
      id: 'FR', 
      name: 'France', 
      type: 'country', 
      parent: 'EU' 
     }, { 
      id: 'ES', 
      name: 'Spain', 
      type: 'country', 
      parent: 'EU' 
     }, { 
      id: 'IT', 
      name: 'Italy', 
      type: 'country', 
      parent: 'EU' 
     }, { 
      id: 'RU', 
      name: 'Russia', 
      type: 'country', 
      parent: 'EU' 
     }, { 
      id: 'NA', 
      name: 'North America', 
      type: 'continent', 
      parent: 'world' 
     }, { 
      id: 'SA', 
      name: 'South America', 
      type: 'continent', 
      parent: 'world' 
     }], 
     getChildren: function (object) { 
      return this.query({ 
       parent: object.id 
      }); 
     } 
    }); 

    // Create the model 
    var myModel = new ObjectStoreModel({ 
     store: myStore, 
     query: { 
      id: 'world' 
     } 
    }); 

    // Create the Tree. 
    var tree = new Tree({ 
     model: myModel, 
     getIconClass: function (item, opened) { 
      // console.log('tree getIconClass', item, opened); 
      // console.log('tree item type', item.type); 
     }, 


     onClick: function (item, node) { 
      node._iconClass = "dijitFolderClosed"; 
      node.iconNode.className = "dijitFolderClosed"; 
      console.log(node.domNode.id); 
      var id = node.domNode.id, 
       isNodeSelected = node.checkBox.get('checked'); 
      console.log(isNodeSelected); 
      checkTheChild(node, isNodeSelected); 

      /*dojo.query('#'+id+' .dijitCheckBox').forEach(function(node){ 
        console.log("node in checkbox :"+node); 
         dijit.getEnclosingWidget(node).set('checked',isNodeSelected); 
        });*/ 
     }, 
     _createTreeNode: function (args) { 
      var tnode = new dijit._TreeNode(args); 
      tnode.labelNode.innerHTML = args.label; 
      console.log(args); 
      var cb = new dijit.form.CheckBox(); 
      cb.placeAt(tnode.labelNode, "first"); 
      tnode.checkBox = cb; 
      return tnode; 
     } 
    }); 
    tree.placeAt(contentHere); 
    tree.startup(); 
    //tree.expandAll(); 
    var nodeMap = tree._itemNodesMap; 

}); 

function retrievInfo() { 

    dojo.query('.dijitChecked').forEach(function (node) { 
     dojo.query('#nodeContent')[0].innerHTML += node.parentNode.parentNode.textContent; 
     //dojo.query('#nodeContent')[0].innerHTML += node.label; 
     var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode); 
     console.log(node.parentNode.parentNode.textContent); 
     console.log(node.parentNode.parentNode.textContent); 
     var nodeMap = tree._itemNodesMap; 

    }); 
} 

function checkTheChild(node1, isNodeSelected1) { 
    console.log(node1); 
    console.log(isNodeSelected1); 
    var childTreeNode = node1.getChildren(); 
    var x; 
    if (childTreeNode.length > 0) { 
     //for(i=0;i<childTreeNode.length;i++){ 
     for (x in childTreeNode) { 
      //childTreeNode[i].checkBox.checked = true; 
      childTreeNode[x].checkBox.setAttribute('checked', isNodeSelected1); 
      //dijit.getEnclosingWidget(node1.domNode).set('checked',isNodeSelected1); 
      if (childTreeNode[x].getChildren().length > 0) { 
       checkTheChild(childTreeNode[x], isNodeSelected1); 
      } 
     } 

    } else { 
     return; 
    } 
} 

Answer 1

我們可以使用的getChildren遞歸函數讓所有的孩子（直到葉節點）。

onClick: function(item, node) { 
 
     this.getChildItems(item); 
 
    }, 
 

 
    getChildItems: function(item) { 
 

 
     dojo.forEach(this.model.store.getChildren(item), 
 
      function(node) { 
 
       console.log(node); 
 
       this.getChildItems(node); 
 
      }, this); 
 
    }

感謝 Srikant