dijit 树复选框 select 父级单击时的所有子级

Question

我使用 _createTreeNode 创建了与树的每个节点相邻的复选框。下面给出的fiddlelink：

现在我的要求如下： 1.点击"try it"按钮时获取所有树节点名称。我正在尝试使用发布和订阅。选中和未选中时将 javascript 数组中的树节点名称推送，遍历数组并从数组中拼接。有没有其他更好的方法来抓取选中的节点？[=14=]

另外一个要求是，在检查父节点的同时，也检查所有的子节点。我观察到参数 "checkbox" 包含子元素，所以我有 list child node name ，但我无法选中这些子节点复选框。请帮我解决这个问题。

请找Jsfiddlelink代码：

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/domReady!"
], function(win, Memory, ObjectStoreModel, Tree){

    // 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 : " +node);

            },
        _createTreeNode: function(args) {
            var tnode = new dijit._TreeNode(args);
            tnode.labelNode.innerHTML = args.label;

            var cb = new dijit.form.CheckBox();
            cb.placeAt(tnode.labelNode, "first");

            dojo.connect(cb, "onChange", function() {
                var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
                checkBoxClicked(treeNode.item);
                dojo.publish("/checkbox/clicked", [{
                    "checkbox": this,
                    "item": treeNode.item}]);
            });

            return tnode;
        }
    });
    tree.placeAt(contentHere);
    tree.startup();
    dojo.subscribe("/checkbox/clicked", function(message){
                console.log("you clicked:", store.getLabel(message.item));   
            });


});

Answer 1

我已经更改了您的代码的几个地方，请看一下。我们可以通过多种方式使用 dojo.query，例如查找元素、修改它们等

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(args);
            var cb = new dijit.form.CheckBox();
            cb.placeAt(tnode.labelNode, "first");
   tnode.checkBox = cb;
            

            return tnode;
        }
    });
    tree.placeAt(contentHere);
    tree.startup();
    tree.expandAll();
    
    
});
  
  function retrievInfo(){
  
   dojo.query('.dijitChecked').forEach(function(node){
  dojo.query('#nodeContent')[0].innerHTML += node.parentNode.parentNode.innerText;
   });
}

 <div id="contentHere">
</div>
<div id="contentButton">
    <button onclick="retrievInfo()">Try it</button>
 
</div>
<div id="nodeContent"> </div>

谢谢斯里坎特

dijit 树复选框 select 父级单击时的所有子级

dijit tree checkbox select all the child when parent clicked

checkbox

tree

dojo