0
모든 노드가 확인란 인 dijit.Tree 객체를 만들었습니다. 부모 노드를 선택/선택 취소하면 자식 노드가 선택/선택 해제됩니다. 자식 중 하나가 선택 취소되면 부모는 선택 취소됩니다. 모든 자녀를 선택하면 부모가 선택됩니다. 완벽하게 잘 작동합니다.
그러나 키보드 액세스가 필요합니다. 트리 노드로 이동하여 스페이스 바 또는 Enter를 누르면 아무 일도 일어나지 않습니다.체크 박스가있는 Dojo dijit 트리에 키보드로 액세스 할 수 없습니다.
tabindex 및 aria-role을 (프로그래밍 방식으로) 확인란에 추가하려고 시도했지만 작동하지 않았습니다. 에 관해서는 http://jsfiddle.net/pdabade/pyz9Lcpv/65/
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: 'allDocuments',
name: 'All Documents'
}, {
id: 'inboxDocuments',
name: 'Inbox Documents',
parent: 'allDocuments'
}, {
id: 'outboxDocuments',
name: 'Outbox Documents',
parent: 'allDocuments'
}, {
id: 'draftDocuments',
name: 'Draft Documents',
parent: 'allDocuments'
}, {
id: 'finalDocuments',
name: 'Final Documents',
parent: 'allDocuments'
}],
getChildren: function(object) {
return this.query({
parent: object.id
});
}
});
// Create the model
var myModel = new ObjectStoreModel({
store: myStore,
query: {
id: 'allDocuments'
}
});
// Create the Tree.
var tree = new Tree({
model: myModel,
autoExpand: true,
getIconClass: function(item, opened) {
// console.log('tree getIconClass', item, opened);
// console.log('tree item type', item.id);
},
onClick: function(item, node, event) {
//node._iconClass= "dijitFolderClosed";
//node.iconNode.className = "dijitFolderClosed";
var _this = this;
console.log(item.id);
var id = node.domNode.id,
isNodeSelected = node.checkBox.get('checked');
dojo.query('#' + id + ' .dijitCheckBox').forEach(function(node) {
dijit.getEnclosingWidget(node).set('checked', isNodeSelected);
});
if (item.id != 'allComments') {
if (!isNodeSelected) {
var parent = node.tree.rootNode; // parent node id
//console.log(node);
parent.checkBox.set('checked', false);
} else {
var parent = node.tree.rootNode;
var selected = true;
var i = 0;
dojo.query('#' + parent.id + '.dijitCheckBox').forEach(function(node) {
if (i > 0) {
var isSet = dijit.getEnclosingWidget(node).get('checked');
console.log(isSet);
if (isSet == false) {
selected = false;
}
}
i++;
});
if (selected) {
parent.checkBox.set('checked', true);
}
}
}
//console.log(node.id);
},
_createTreeNode: function(args) {
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
console.log(args);
var cb = new dijit.form.CheckBox({
"aria-checked": "false",
"aria-describedby": args.label
});
cb.placeAt(tnode.labelNode, "first");
tnode.checkBox = cb;
return tnode;
}
});
tree.placeAt(contentHere);
tree.startup();
tree.checkedItems();
//tree.expandAll();
});
}
모든 아이디어는 어떻게 키보드 액세스 할 수 있도록 - 여기
는 바이올린입니까?감사합니다!
정확하게 필요한 것! 정말 고맙습니다. – pdabade
dijit/Tree 소스에 대한 링크를 제공 할 수 있습니까? – pdabade
https://github.com/dojo/dijit/blob/master/Tree.js http://download.dojotoolkit.org/에서 전체 소스를 다운로드 할 수도 있습니다. – pgianna