Question

我有一个jqGrid，它从服务中获取json数据。在编辑模式下，我必须向列中添加单选按钮。这必须是内联编辑。我需要批量更新记录。我创建了一个自定义元素和自定义值来显示jqGrid中selectRow上的单选按钮。我遇到的问题是我无法获得所选单选按钮的值。相反，它总是返回第一个单选按钮的值。可以找到代码link

以下是创建自定义元素的代码

function radioelem(value, options) {
    var receivedradio = '<input type="radio" name="receivednaradio" value="R"';
    var breakline = '/>Received<br>';
    var naradio = '<input type="radio" name="receivednaradio" value="N"';
    var endnaradio = '/>NA<br>';
    if (value == 'Received') {
        var radiohtml = receivedradio + ' checked="checked"' + breakline + naradio + endnaradio;
        return radiohtml;
    }
    else if (value == 'NA') {
        var radiohtml = receivedradio + breakline + naradio + ' checked="checked"' + endnaradio;
        return radiohtml;
    }
    else {
        return receivedradio + breakline + naradio + endnaradio;
    }
};

function radiovalue(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).val();
    } else if (operation === 'set') {
        if ($(elem).is(':checked') === false) {
            $(elem).filter('[value=' + value + ']').attr('checked', true);
        }
    }
};

Answer 1

代码中的主要问题是custom_element（函数radioelem）的实现会返回HTML片段，不是一个元素。 radioelem返回

<input type="radio" ... value="R"/><input type="radio" ... value="R"/>

作为字符串。它由两个输入元素组成。因此，自定义控制失败了。如果您检查jqGrid如何使用它的代码，您将能够理解该问题。查看jqGrid代码的the lines，我将以简化形式重写，如下所示

var celm = options.custom_element.call($t,vl,options);
if(celm) {
    celm = $(celm).addClass("customelement").attr({id:options.id,name:options.name});
    $(elem).empty().append(celm);
}

jqGrid使用$(celm)，其中celm是从custom_element函数返回的字符串。在您的情况下，$(celm)将是两个 <input>元素的jQuery包装器。我的意思是$(celm) === 2。因此，代码$(celm).addClass("customelement")不会在一个自定义元素上设置类“customelement”，而是将类“customelement”添加到两个 <input>元素。下一个调用（attr的调用）会在 id元素上设置相同的 <input>。你怎么知道id是唯一的，但代码确实产生了id重复。

准确地说，custom_element（函数radioelem）的实现会返回更复杂的HTML片段

<input type="radio" ... value="R"/><br/><input type="radio" ... value="R"/><br/>

如果检查从HTML片段末尾生成jqGrid的代码，您将看到非常有趣且非常错误的HTML片段，如下所示

<input name="NA" class="customelement" id="2_NA" type="radio" value="R">
Received
<br class="customelement" id="2_NA" name="NA">
<input name="NA" class="customelement" id="2_NA" type="radio" value="N">
NA
<br class="customelement" id="2_NA" name="NA">

可能你从未见过这么奇怪的<br/>元素。您可以看到代码片段包含4个具有相同id="2_NA"的元素。之后，您应该不会怀疑自定义控件的工作方式与预期不符。

要解决此问题，您只需将之前返回的代码放在<span>...</span>内或<div>...</div> 内：

function radioelem(value, options) {
    var receivedradio = '<input type="radio" name="receivednaradio" value="R"',
        breakline = '/>Received<br>',
        naradio = '<input type="radio" name="receivednaradio" value="N"',
        endnaradio = '/>NA<br>';

    if (value === 'Received') {
        return "<span>" + receivedradio + ' checked="checked"' + breakline + naradio + endnaradio + "</span>";
    }
    if (value === 'NA') {
        return "<span>" + receivedradio + breakline + naradio + ' checked="checked"' + endnaradio + "</span>";
    }
    return "<span>" + receivedradio + breakline + naradio + endnaradio + "</span>";
}

在saveRow上编辑后，jqGrid自定义元素单选按钮列未返回选定值

1 个答案: