带复选框的 Dojo 树

Question

我用复选框制作了道场树。

但是当我检查父节点时，没有自动选择子节点。（未展开子节点）

只有展开一次树，之后点击父复选框才能选中子节点。

这是代码。

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: '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);

                dojo.query('#'+id+' .dijitCheckBox').forEach(function(node){ 
                    dijit.getEnclosingWidget(node).set('checked',isNodeSelected);
                });


        },
    _createTreeNode: function(args) {
        var tnode = new dijit._TreeNode(args);
        tnode.labelNode.innerHTML = args.label;
        console.log('Tree created', args);
        var cb = new dijit.form.CheckBox({id: args.item.id});
        cb.placeAt(tnode.labelNode, "first");
        tnode.checkBox = cb;


        return tnode;
    }
});
tree.placeAt(contentHere);
tree.startup();
//tree.expandAll();


});

http://jsfiddle.net/pyz9Lcpv/9/

Answer 1

发生这种情况是因为在树中打开节点之前，它的内容尚不存在。它们在树中打开节点后加载。您可以做的是插入树的 onOpen 事件，然后在那里决定是否应该选中刚刚创建的所有节点的复选框。

带复选框的 Dojo 树

Dojo Tree with checkbox

javascript

checkbox

dojo