1

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

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

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);
        }
    }
};
4

1 回答 1

0

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

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

as string. It consists from two input elements. So custom control failed in the case. You will be able to understand the problem if you examine the code how jqGrid use it. Look at the lines of jqGrid code which I rewrite in simplified form as following

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)wherecelm是custom_element函数返回的字符串。在您的情况下$(celm)，将是两个 <input>元素的 jQuery 包装器。我的意思是$(celm) === 2。因此，代码不会在一个自定义元素上设置类“customelement”，而是将类“customelement”$(celm).addClass("customelement")添加到两个 <input>元素。下一次调用（调用）在两个元素上attr设置相同。 您如何知道 id 必须是唯一的，但代码确实会产生重复。id <input>id

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

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

If you examine the code which produce jqGrid at the end from the HTML fragment you will see very funny and very wrong HTML fragment like below

<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">

Probably you didn't seen ever before so strange <br/> elements. You can see that the code fragment contains 4 elements with the same id="2_NA". After that you should be not wonder that the custom control works not as expected.

To fix the problem you need just place the code which you returned before inside of <span>...</span> or inside of <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>";
}
于 2013-03-30T20:16:47.207 回答