jqGrid 사용자 정의 edittype (라디오 버튼 열) 편집시 사용자 정의 요소가 실행되지 않음

Question

편집하는 동안 행의 열에 라디오 버튼이 있어야하는 jqGrid가 있습니다. 다음 내 코드입니다 :

function BindPreclosingDocs(response) { 
    var previouslyselectedRow; 
    var preclosingtable = $('#preclosing'); 
    preclosingtable.jqGrid({ 
     datatype: 'jsonstring', 
     datastr: JSON.stringify(response.ServiceModel), 
     colNames: ['', 'Documents Received', 'Comments', 'SubDocument', 'NA'], 
     colModel: [ 
     { name: 'Documents', index: 'Documents', align: 'left', sortable: false, editable: false, width: 240 }, 
     { name: 'DocsReceived', index: 'DocsReceived', align: 'center', sortable: false, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 140 }, 
     { name: 'Comments', index: 'Comments', align: 'center', sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "3", cols: "16" }, width: 180 }, 
     { name: 'SubDocument', index: 'SubDocument', editable: false, width: 1 }, 
     { name: 'NA', index: 'NA', editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue} } 
     ], 
     rowNum: response.ServiceModel.PreClosing.length, 
     pager: '#preclosingpagerdiv', 
     viewrecords: true, 
     sortorder: "asc", 
     sortname: 'Documents', 
     jsonReader: { 
      root: "PreClosing", 
      repeatitems: false, 
      id: 'ConfigId' 
     }, 
     shrinkToFit: false, 
     height: 'auto', 
     grouping: true, 
     groupingView: { 
      groupField: ['SubDocument'], 
      groupColumnShow: [false], 
      plusicon: 'ui-icon-circle-triangle-s', 
      minusicon: 'ui-icon-circle-triangle-n' 
     }, 
     loadComplete: function() { 
      HideGroupHeaders(this);     
     }, 
     onSelectRow: function (id) { 
      preclosingtable.jqGrid('saveRow', previouslyselectedRow, false, 'clientArray'); 
      previouslyselectedRow = SetJQGridRowEdit(id, previouslyselectedRow, preclosingtable); 
     } 
    }); 
    preclosingtable.setGridWidth('710'); 
}; 


//RowSelect 
function SetJQGridRowEdit(id, previousid, grid) { 
    if (id && id !== previousid) { 
     grid.jqGrid('restoreRow', previousid); 
     grid.jqGrid('editRow', id, true); 
     previousid = id; 
     return previousid; 
    } 
}; 

//Build radio button 
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); 
     } 
    } 
}; 

내 포맷터 나는 데

dynamicText: function (cellvalue, options, rowObject) { 
     if (cellvalue == 'R') { 
      return 'Received'; 
     } 
     else if (cellvalue == 'N') { 
      return 'NA'; 
     } 
     else { 
      return ''; 
     } 
    } 

$.extend($.fn.fmatter.dynamicText, { 
    unformat: function (cellValue, options, elem) { 
     debugger; 
     var text = $(elem).text(); 
     return text === ' ' ? '' : text; 
    } 
}); 

문제는 다음과 같이 내가 행을 선택하고 설정 발생하지 않는 편집 버튼을 검사 할 때 언 포맷터 코드입니다 무선 값 기능. 행이 선택되면 라디오 버튼을 생성하면서 radiovalue 함수로 전달됩니다. 라디오 버튼에 값을 설정할 수 있도록 도와주세요!

덕분에

Answer 1

나는 당신이 옳다고 생각합니다. 다양한 편집 모드에서 custom_value 콜백의 사용법에는 차이가 있습니다.

형태로 편집을 사용하는 일부 편집 가능한 열이 $.jgrid.createEl의 내부에서 호출됩니다 (귀하의 경우는 radioelem 기능입니다) edittype: 'custom' 먼저 custom_element 기능이있는 경우. 그러면 rowid !== "_empty" (추가 양식 제외)의 경우에 custom_value이 추가로 호출됩니다. 자세한 내용은 the lines of code을 참조하십시오.

custom_element의 매개 변수는 value입니다. 따라서 사용자 정의 컨트롤에서 값을 설정할 수 있으며 custom_element을 호출하고 custom_value을 "set"과 함께 추가로 호출하는 것은 실제로 필요하지 않습니다.

다른 편집 모드 (인라인 편집 및 셀 편집)는 사용자 정의 컨트롤을 만듭니다. custom_value 콜백은 "set" 매개 변수로 호출되지 않습니다.

사용자 지정 컨트롤에 대한 the documentation이 너무 짧습니다. 나는 당신이 코드 radiovalue 부분을 'set'에 대해 제거 할 수 있다고 생각한다.

function radiovalue(elem, operation, value) { 
    if (operation === 'get') { 
     return $(elem).val(); 
    } 
} 

한 발언 : 사용자 정의 컨트롤의 사용을 시도 할 경우 recreateForm: true 옵션을 사용하는 것을 잊지 마세요해야 다음 코드가 너무 좋은 일 (심지어 형태로 편집의 경우) 것이라고 생각합니다. 인라인 편집, 양식 편집 및 검색에서 사용 맞춤 컨트롤의 예로는 here이 있습니다. 데모에 대한 참조는 the answer에 있습니다.