jqGrid自定义edittype（单选按钮列）自定义元素在编辑时不触发设置事件

Question

我有一个 jqGrid，它在编辑时需要在一行的一列中有单选按钮。 以下是我的代码：

function BindPreclosingDocs(response) {
    var previouslyselectedRow;
    var preclosingtable = $('#preclosing');
    preclosingtable.jqGrid({
        datatype: 'jsonstring',
        datastr: JSON.stringify(response.ServiceModel),
        colNames: ['', 'Documents Received', 'Comments', 'SubDocument', 'NA'],
        colModel: [
        { name: 'Documents', index: 'Documents', align: 'left', sortable: false, editable: false, width: 240 },
        { name: 'DocsReceived', index: 'DocsReceived', align: 'center', sortable: false, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 140 },
        { name: 'Comments', index: 'Comments', align: 'center', sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "3", cols: "16" }, width: 180 },
        { name: 'SubDocument', index: 'SubDocument', editable: false, width: 1 },
        { name: 'NA', index: 'NA', editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue} }
        ],
        rowNum: response.ServiceModel.PreClosing.length,
        pager: '#preclosingpagerdiv',
        viewrecords: true,
        sortorder: "asc",
        sortname: 'Documents',
        jsonReader: {
            root: "PreClosing",
            repeatitems: false,
            id: 'ConfigId'
        },
        shrinkToFit: false,
        height: 'auto',
        grouping: true,
        groupingView: {
            groupField: ['SubDocument'],
            groupColumnShow: [false],
            plusicon: 'ui-icon-circle-triangle-s',
            minusicon: 'ui-icon-circle-triangle-n'
        },
        loadComplete: function () {
            HideGroupHeaders(this);                
        },
        onSelectRow: function (id) {
            preclosingtable.jqGrid('saveRow', previouslyselectedRow, false, 'clientArray');
            previouslyselectedRow = SetJQGridRowEdit(id, previouslyselectedRow, preclosingtable);
        }
    });
    preclosingtable.setGridWidth('710');
};


//RowSelect 
function SetJQGridRowEdit(id, previousid, grid) {
    if (id && id !== previousid) {
        grid.jqGrid('restoreRow', previousid);
        grid.jqGrid('editRow', id, true);
        previousid = id;
        return previousid;
    }
};

//Build radio button
function radioelem(value, options) {
    var receivedradio = '<input type="radio" name="receivednaradio" value="R"';
    var breakline = '/>Received<br>';
    var naradio = '<input type="radio" name="receivednaradio" value="N"';
    var endnaradio = '/>NA<br>';
    if (value == 'Received') {
        var radiohtml = receivedradio + ' checked="checked"' + breakline + naradio + endnaradio;
        return radiohtml;
    }
    else if (value == 'NA') {
        var radiohtml = receivedradio + breakline + naradio + ' checked="checked"' + endnaradio;
        return radiohtml;
    }
    else {
        return receivedradio + breakline + naradio + endnaradio;
    }
};

function radiovalue(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).val();
    } else if (operation === 'set') {
        if ($(elem).is(':checked') === false) {
            $(elem).filter('[value=' + value + ']').attr('checked', true);
        }
    }
};

我的格式化程序和取消格式化程序代码如下

dynamicText: function (cellvalue, options, rowObject) {
        if (cellvalue == 'R') {
            return 'Received';
        }
        else if (cellvalue == 'N') {
            return 'NA';
        }
        else {
            return '';
        }
    }

$.extend($.fn.fmatter.dynamicText, {
    unformat: function (cellValue, options, elem) {
        debugger;
        var text = $(elem).text();
        return text === ' ' ? '' : text;
    }
});

我遇到的问题是，当我选择一行并检查一个编辑按钮时，它不会触发 radiovalue 函数中的设置。 It fires get in radiovalue function while creating radio button when a row is selected.有什么帮助可以让我为单选按钮设置一个值吗？！

谢谢

Answer 1

我认为你是对的。不同编辑模式下custom_value回调的用法有所不同。

如果使用表单编辑并且某些可编辑列具有edittype: 'custom'，则首先将在$.jgrid.createEl 内部调用custom_element 函数（在您的情况下为radioelem 函数）。然后custom_value 将在rowid !== "_empty" 的情况下被额外调用（不适用于添加表单）。详情请见the lines of code。

问题是custom_element 有value 参数。所以它可以在自定义控件中设置值并调用custom_element，并且不需要额外调用custom_value和"set"。

另一种编辑模式（内联编辑和单元格编辑）只是创建自定义控件。永远不会使用"set" 参数调用回调custom_value。

我确认the documentation 关于自定义控件太短了。我想您可以删除代码radiovalue 的部分'set'。我认为以下代码也可以很好地工作（即使在表单编辑的情况下）：

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

备注：如果您要尝试使用自定义控件，请不要忘记使用recreateForm: true 选项。作为在内联编辑、表单编辑和搜索中使用自定义控件的示例，您将找到here。您可以在the answer 中找到对演示的引用。