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

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

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 === '&nbsp;' ? '' : text;
    }
});

我遇到的问题是，当我选择一行并检查编辑按钮时，它不会在radiovalue函数中触发设置。当选择一行时，它会在创建单选按钮时触发无线电值功能。任何帮助，以便我可以设置单选按钮的值？！

由于

Answer 1

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

如果使用了表单编辑且某个可修改列具有edittype: 'custom'，那么将在custom_element内调用第一个radioelem函数（在您的情况下为$.jgrid.createEl函数）。如果custom_value（不适用于添加表单），则会另外调用rowid !== "_empty"。有关详细信息，请参阅the lines of code。

问题是custom_element有value参数。因此，它可以在自定义控件中设置值并调用custom_element，并且实际上不需要使用custom_value调用"set"。

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

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

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

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

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

1 个答案: