カスタムラジオボタンjqgrid編集フォーム

Question

jsonデータでいっぱいのjqgridがあります。「gender」カラムには0または1の値があります。レコードを編集するときは、jqgridの編集フォームに2つのラジオボタンオブジェクトを使用して値を編集する場合、送信ボタンを押すと値は常に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

コードには少なくとも2つのエラーがあります。

最初の問題はGenderRadio関数（custom_elementの値として使用）にあります。 HTML要素を返しますが、GenderRadio要素を2つの<input>要素と追加のテキストノードで構成するHTMLフラグメントを返します。戻り値を<span>... </span>の中にラップすることで問題を解決できます。

第2の問題：GenderValueのコード（custom_valueの値として使用）は修正する必要があります。あなたは奇妙な構文を使用して値を設定します：$('GenderValue', elem)。 "GenderValue"とは何ですか？そして、それは確かにいくつかの要素のの名前ではないです。ラジオボタンで使用されるname属性（RadioGender）の値を意味するとします。この場合は、$("input[name=RadioGender]", elem)またはそれ以上の文字を$(elem).find("input[name=RadioGender]")として使用してください。さらに、最初の（男性）の.is(":checked")または2番目の（女性）ラジオボタンを使用して、チェックされているかどうかをテストする必要があります。対応する固定コードは次のようになります。

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

などに変更することができます。これはテストされていませんが、ラジオボタンの値を操作する方法を知っていると思います。