Benutzerdefiniertes Optionsfeld jqgrid Bearbeitungsformular

Question

Ich habe ein jqgrid, das mit json Daten gefüllt ist, die Spalte "Geschlecht" nimmt die Werte entweder 0 oder 1, also beim Bearbeiten eines Datensatzes, in der Bearbeitungsform von jqgrid habe ich zwei Optionsfeld hinzugefügt Objekte, um den Wert zu bearbeiten, das Problem ist, dass, wenn Sie die Schaltfläche Senden drücken, der Wert immer 0. Wie bekomme ich den Wert des ausgewählten Optionsfelds? Zum Beispiel: Wenn Sie das Optionsfeld „Male“ wählen muss den Wert 0 senden und wenn Sie das Optionsfeld „Female“ Wert von 1

Mein jqGrid Code muss:

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

Ihr Code hat mindestens zwei Fehler. Das erste Problem ist in der GenderRadio-Funktion (als Wert custom_element verwendet). Es sollte ein HTML-Element zurückgeben, aber GenderRadio gibt HTML-Fragment zurück, das aus zwei <input> Elementen und zusätzlichen Textknoten besteht. Sie können das Problem beheben, indem Sie den zurückgegebenen Wert in <span>... </span> einschließen. Das zweite Problem: Der Code GenderValue (verwendet als Wert custom_value) muss behoben werden. Sie verwenden eine seltsame Syntax, um den Wert festzulegen: $('GenderValue', elem). Was ist "GenderValue"? Und es ist sicher nicht der Name eines Elements. Ich nehme an, dass Sie den Wert von name Attribut (RadioGender), verwendet von Radiobuttons bedeuten. In dem Fall sollten Sie $("input[name=RadioGender]", elem) oder besser $(elem).find("input[name=RadioGender]") verwenden. Zusätzlich sollten Sie .is(":checked") des ersten (Male) oder des zweiten (Female) Optionsfelds verwenden, um zu testen, ob es aktiviert ist oder nicht. Der entsprechende feste Code könnte der folgende sein:

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

Auf den ersten Blick sehe ich, dass die Radio-Button-Wert ist nicht korrekt. Sie können die GenderValue-Funktion in

oder ähnlich ändern. Dies ist nicht getestet, aber ich denke, Sie haben die Idee, Radio-Button-Werte zu manipulieren.