自定义单选按钮jqgrid编辑表单

Question

我有一个 jqgrid，其中填充了 json 数据，列 "gender" 取值 0 或 1，因此在编辑记录时，在 jqgrid 的编辑形式中我添加了两个单选按钮对象编辑值，问题是当您按下提交按钮时，值始终为 0。如何获取 selected 单选按钮的值？例如：当您 select 时，单选按钮 "Male" 必须发送值 0，而当您 select 时，单选按钮 "Female" 必须发送值 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

乍一看，获取单选按钮值不正确。您可以将 GenderValue 函数更改为

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

或类似的。这没有经过测试，但我认为您知道如何操作单选按钮值。

Answer 2

您的代码至少有两个错误。

第一个问题出在GenderRadio函数中（用作custom_element的值）。它应该 return 一个 HTML 元素，但是 GenderRadio return HTML 片段由两个 <input> 元素和附加文本节点。您可以通过将 returned 值包装在 <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);
    }
}

自定义单选按钮jqgrid编辑表单

Custom radio button jqgrid edit form

jquery

jsp

jqgrid