사용자 정의 라디오 버튼 jqgrid 편집 양식

Question

json 데이터로 채워진 jqgrid가 있고 "gender"열의 값이 0 또는 1이므로 jqgrid의 편집 양식에서 두 개의 라디오 버튼 객체를 사용하여 값을 편집하는 경우 제출 버튼을 누르면 값은 항상 0입니다. 선택한 라디오 버튼의 값은 어떻게 얻습니까? 예를 들어 : 당신이 라디오 버튼 "남성"을 선택하면 0의 값을 전송해야합니다 당신의 가치를 보내야합니다 라디오 버튼 "여성"을 선택하면

1 내있는 jqGrid 코드 :

function GenderRadio(value, options) { 
    var male = '<input type="radio" name="RadioGender" value="0"'; 
    var breakline = '/>Male'; 
    var female = '&nbsp;<input type="radio" name="RadioGender" value="1"'; 
    var end = '/>Female<br>'; 
    var radiohtml; 
    if (value == 0) { 
     radiohtml = male + ' checked="checked"' + breakline + female + end; 
     return radiohtml; 
    } else if (value == 1) { 
     radiohtml = male + breakline + female + ' checked="checked"' + end; 
     return radiohtml; 
    } else { 
     return male + breakline + female + end; 
    } 
} 

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

function filljqGridCustomers() { 
$.mask.definitions['9'] = '[0-9]'; 
$("#list").jqGrid({ 
    url: 'PopulateCustomersTable', 
    postData: { 
     parameter: function() { 
      return $("#parameter").val(); 
     }, 
     username: function() { 
      return $("#txtusrID").val(); 
     }, 
     option: function() { 
      return $("input[name='srch']:checked").val(); //$('[name="srch"]').val(); 
     } 
    }, 
    datatype: "json", 
    mtype: 'POST', 
    colNames: ['Id', 'First Name', 'Last Name', 'Gender'], 
    colModel: [{ 
      name: 'IdMstCustomers', 
      index: 'IdMstCustomers', 
      width: 50, 
      fixed: true, 
      align: 'center', 
      editable: true, 
      editoptions: { 
       hidden: true 
      } 
     }, { 
      name: 'FirstName', 
      index: 'FirstName', 
      width: 100, 
      fixed: true, 
      align: 'center', 
      editable: true 
     }, { 
      name: 'LastName', 
      index: 'LastName', 
      width: 100, 
      fixed: true, 
      align: 'center', 
      editable: true 
     }, { 
      name: 'Gender', 
      index: 'Gender', 
      width: 100, 
      fixed: true, 
      align: 'center', 
      editable: true, 
      formatter: function (cellvalue) { 
       if (cellvalue == 0) { 
        return 0; 
       } else if (cellvalue == 1) { 
        return 1; 
       } else { 
        return ''; 
       } 
      }, 
      edittype: 'custom', 
      editoptions: { 
       custom_element: GenderRadio, 
       custom_value: GenderValue 
      } 
     }], 
    pager: '#pager', 
    rowNum: 10, 
    rowList: [10, 20, 30], 
    sortname: 'FirstName', 
    sortorder: 'desc', 
    viewrecords: true, 
    gridview: true, 
    caption: 'Customers', 
    jsonReader: { 
     repeatitems: false 
    }, 
    editurl: "CustomersServlet", 
    hidegrid: false 
}); 

jQuery("#list").jqGrid('navGrid', '#pager', { 
     edit: true, 
     add: false, 
     del: false, 
     search: true 
    }, {beforeShowForm: function (form) { 
      var dlgDiv = $("#editmod" + $('#list')[0].id); 
      dlgDiv[0].style.top = 430 + "px"; 
      dlgDiv[0].style.left = 700 + "px"; 
     }, 
     editCaption: 'Edit customer info', 
     autosize: true, 
     recreateForm: true, 
     closeAfterEdit: true, 
     resize: false 
    }); 
} 

The edit form looks like this

Answer 1

코드에 두 가지 이상의 오류가 있습니다.

첫 번째 문제는 함수 (custom_element 값으로 사용)에 있습니다. 하나의 HTML 요소를 반환해야하지만, GenderRadio은 두 개의 <input> 요소와 추가 텍스트 노드로 구성된 HTML 조각을 반환합니다. <span>... </span> 안에 반환 된 값을 래핑하여 문제를 해결할 수 있습니다.

두 번째 문제는 GenderValue (custom_value의 값으로 사용) 코드를 수정해야합니다. 이상한 구문을 사용하여 값을 설정하십시오 : $('GenderValue', elem). "GenderValue"은 무엇입니까? 그리고 그것은 확실히 어떤 요소의 이름이 이 아닙니다. 라디오 버튼으로 사용되는 name 속성 (RadioGender)의 값을 의미한다고 가정합니다. 이 경우 $("input[name=RadioGender]", elem) 또는 $(elem).find("input[name=RadioGender]")을 사용해야합니다. 또한 첫 번째 (남성) 또는 두 번째 (여성) 라디오 버튼 .is(":checked")을 사용하여 선택 여부를 테스트해야합니다. 해당 고정 코드는 다음과 같을 수 있습니다.

function GenderRadio(value, options) { 
    var male = '<span><input type="radio" name="RadioGender" value="0"'; 
    var breakline = '/>Male'; 
    var female = '&nbsp;<input type="radio" name="RadioGender" value="1"'; 
    var end = '/>Female</span>'; 
    var radiohtml; 
    if (value == 0) { 
     radiohtml = male + ' checked="checked"' + breakline + female + end; 
     return radiohtml; 
    } else if (value == 1) { 
     radiohtml = male + breakline + female + ' checked="checked"' + end; 
     return radiohtml; 
    } else { 
     return male + breakline + female + end; 
    } 
} 

function GenderValue(elem, operation, value) { 
    var $elems = $(elem).find("input[name=RadioGender]"); 
    if (operation === "get") { 
     return $elems.first().is(":checked") ? 0 : 1; 
    } else if (operation === "set") { 
     $elems.val(value); 
    } 
} 

Answer 2

처음에는 라디오 버튼 값이 올바르지 않습니다. GenderValue 기능을

function GenderValue(elem, operation, value) { 
    if (operation === 'get') { 
     return $(elem).find("input:radio:checked").val(); 
    } else if (operation === 'set') { 
     $('GenderValue', elem).val(value); 
    } 
} 

또는 이와 유사한 것으로 변경할 수 있습니다. 이것은 테스트되지 않았지만 라디오 버튼 값을 조작하는 방법을 알고 있다고 생각합니다.