我编写了一个扩展 dijit.Tree 的类,在每个节点旁边包含一个单选按钮。我在表单中使用它来显示文件夹树,用户可以从中选择一个文件夹。这是代码:
define("my/Tree/RadioButton",
['dojo/_base/declare', 'dijit/Tree', 'dijit/form/RadioButton', 'dojo/dom-construct', 'dojo/_base/connect', 'dojo/on', 'dojo/_base/lang'],
function (declare, Tree, RadioButton, domConstruct, connect, on, lang){
var TreeNode = declare(Tree._TreeNode, {
_radiobutton: null,
postCreate: function(){
this._createRadioButton();
this.inherited(arguments);
},
_createRadioButton: function(){
this._radiobutton = new RadioButton({
name: this.tree.name,
value: this.tree.model.store.getIdentity(this.item) + '',
checked: false
});
domConstruct.place(this._radiobutton.domNode, this.iconNode, 'before');
if (this.tree.model.store.hasAttribute(this.item, 'checked')) {
var attrValue = this.tree.model.store.getValue(this.item, 'checked');
if (attrValue === true) {
this._radiobutton.set('checked', true);
}
}
connect.connect(this._radiobutton, 'onClick', this, function(){
// set any checked items as unchecked in the store
this.tree.model.store.fetch({
query: {checked: true},
onItem: lang.hitch(this.tree.model.store, function(item){
console.log('found checked item ' + this.getValue(item, 'name'));
this.setValue(item, 'checked', false);
})
});
// check the one that was clicked on
var radioValue = this._radiobutton.get('value');
this.tree.model.store.setValue(this.item, 'checked', true);
});
}
});
return declare(Tree, {
_createTreeNode: function(/*Object*/ args){
return new TreeNode(args);
}
});
});
问题在于,当提交表单时,提交的值始终是选中的第一个单选按钮的值,即使随后单击了其他单选按钮也是如此。
通过检查 dom,我可以看到选中的单选按钮的 value 属性具有正确的值。但提交的始终是最初选择的值。
我有一个类似的类,它使用复选框小部件代替,并且工作正常。
编辑 根据一些反馈,我创建了一个更简单的此类版本,它不使用商店中的属性跟踪选中状态:
define("my/Tree/RadioButton",
['dojo/_base/declare', 'dijit/Tree', 'dijit/form/RadioButton', 'dojo/dom-construct'],
function (declare, Tree, RadioButton, domConstruct){
var TreeNode = declare(Tree._TreeNode, {
_radiobutton: null,
postCreate: function(){
this._createRadioButton();
this.inherited(arguments);
},
_createRadioButton: function(){
this._radiobutton = new RadioButton({
name: this.tree.name,
value: this.tree.model.store.getIdentity(this.item) + '',
checked: false
});
domConstruct.place(this._radiobutton.domNode, this.iconNode, 'before');
}
});
return declare(Tree, {
_createTreeNode: function(/*Object*/ args){
return new TreeNode(args);
}
});
});
但即使这样仍然存在相同的问题 - 用户首先点击哪个单选按钮是将要提交的值,而不管随后点击的是什么其他按钮。
最佳答案
我设法通过连接到单选按钮的 onchange 事件来解决这个问题。 Hook 在未选中的单选按钮上明确将选中设置为 false,这似乎解决了问题。我不确定为什么需要这样做。
关于dojo - 带有单选按钮的 Dijit.tree 扩展提交了错误的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14526636/