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

Posted 2021-04-19

我有一个充满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

答案

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

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

另一答案

初看起来我看到获取单选按钮值不正确。您可以将GenderValue函数更改为

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

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