带有提交错误值的单选按钮的 Dijit.tree 扩展

Posted 2023-02-26

【中文标题】带有提交错误值的单选按钮的 Dijit.tree 扩展

【英文标题】：Dijit.tree extension with radio buttons submitting the wrong value

【发布时间】：2013-01-25 16:57:48

【问题描述】：

我编写了一个扩展 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);
        
    );
);

但即使这样仍然存在相同的问题 - 用户首先单击的单选按钮将提交的值，无论随后单击其他按钮。

【参考方案1】：

我通过连接单选按钮的 onchange 事件设法解决了这个问题。该钩子在未选中的单选按钮上明确将选中的设置为 false，这似乎可以解决问题。不过我不确定为什么需要这样做。

【参考方案2】：

我也有同样的问题。它曾经在较旧的道场中工作。具体来说，在onClicked 函数期间，所有单选按钮在"dijit.byId("whatever").checked" 上都错误地返回true。在 onClicked 函数完成使用 FireBug 控制台后手动检查时，上述属性返回正确的值。我认为这是一个错误，我只是通过为每个按钮设置不同的 onClicked 函数来解决它，如下所示：

<form id="locateForm">
<label for="locate">Locate:</label><br />
<input type="radio" dojoType="dijit.form.RadioButton" name="locate" id="locateAddress" value="Address" checked="checked" onClick="enableLocate1();" />
<label for="locateAddress">Address</label>
<input type="radio" dojoType="dijit.form.RadioButton" name="locate" id="locatePlace" value="Place" onClick="enableLocate2();" />
<label for="locatePlace">Place</label>
</form>