我使用_createTreeNode创建了树的每个节点旁边的复选框。下面给出的小提琴链接:
http://jsfiddle.net/pyz9Lcpv/8/
现在我的要求如下: 1.获取所有treenode名称"尝试它"点击按钮。我正在尝试使用发布和订阅。在检查时和未选中时在javascript数组中推送treenode名称,循环遍历数组并将其从数组中拼接出来。有没有其他更好的方法来捕获已检查的节点?
请找到Jsfiddle链接代码:
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));
});
});
答案 0 :(得分: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;
});
}
&#13;
<div id="contentHere">
</div>
<div id="contentButton">
<button onclick="retrievInfo()">Try it</button>
</div>
<div id="nodeContent"> </div>
&#13;
由于 Srikant