dijit 树无法从崩溃树中获取 child

Question

我的道场树很大。我需要一次扩展一个节点以提高性能。我的树有复选框。当检查 parent 节点时，我需要知道 parent 的所有 child ，还有子 child 直到树的叶子。由于树未展开，我无法使用以下代码获得 child。

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

在这种情况下，如何获取 child 和子 child 详细信息。

下面的 fiddle link 包含树。

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);
    }

谢谢斯里坎特

dijit 树无法从崩溃树中获取 child

dijit tree not able to get child from collapase tree

tree

dojo

children