jqGrid自定義元素單選按鈕列在saveRow上編輯後不返回選定的值

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

as string。它由兩個輸入元素組成。所以在這種情況下自定義控制失敗。如果您檢查代碼如何使用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)將是jQuery包裝兩個<input>元素。我的意思是$(celm) === 2。因此，代替一個定製元素代碼$(celm).addClass("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>"; 
}