Question

我有一个允许内联编辑/添加数据的jqGrid。当用户双击该行时，将启动内联编辑。当用户按下Enter键或单击另一行时，我希望保存更改。但是，出于某种原因，在调用saveRow函数之前正在恢复行，并且不保存我的编辑（AJAX调用永远不会发生）。

我的代码如下所示。当我按下回车键时，我的更改将被保存并发送到服务器。当我点击另一行时，我的更改不会发送到服务器（没有AJAX调用），我在控制台中看到在saveEdit之前调用了afterrestorefunc。

var editParams = {
    afterSubmit: processResponse, 
    successfunc: function(response) {
        var processed = processResponse(response);
        if(processed[0] !== true) {
            $.jgrid.info_dialog($.jgrid.errors.errcap, processed[1], $.jgrid.edit.bClose);
        }
        return processed[0];
    }, 
    afterrestorefunc: function(id) {
        console.log('afterrestorefunc - ' + id);
    }, 
    bottominfo: 'Fields marked with an (*) are required', 
    keys: true
}, 
    zipEditParams = $.extend(true, {}, editParams, {url: 'editdata.php'});
/* Set global default options */
$.extend($.jgrid.defaults, {
    grouping: true, 
    shrinkToFit: false, 
    rowList: [10, 20, 30, 40, 50, 100], 
    rowNum: 20, 
    repeatitems: false, 
    ondblClickRow: inlineEdit, 
    onSelectRow: saveEdit
});
$('#zipcodes')
    .jqGrid({
        datatype: 'json', 
        colNames: ['Zip', 'City', 'State', 'Country'], 
        colModel: [
            {name: 'zip_zip', jsonmap: 'zip_zip', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}, 
            {name: 'zip_city', jsonmap: 'zip_city', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}, 
            {name: 'zip_state', jsonmap: 'zip_state', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}, 
            {name: 'zip_country', jsonmap: 'zip_country', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}
        ], 
        height: 200, 
        ignoreCase: true, 
        jsonReader: { repeatitems: false, id: 'zip_zip' }, 
        pager: '#zipcodes_pager', 
        url: 'data.php', 
        editurl: 'editdata.php'
    })
    .jqGrid('navGrid', '#zipcodes_pager', {add: false, edit: false, del: false, refresh: false, search: false})
    .jqGrid('inlineNav', '#zipcodes_pager', {edit: true, save: true, cancel: false, editParams: zipEditParams});

var lastSel;
/* Start editing the row */
function inlineEdit(id, iRow, iCol) {
    var editParams = this.id == 'zipcodes' ? zipEditParams : (this.id == 'labels' ? labelEditParams : (this.id == 'users' ? userEditParams : {}));
    $(this).jqGrid('editRow', id, editParams);
    focusRow(id, iCol, this);
}

function focusRow(id, iCol, table) {
    var ele = document.getElementById(id + '_' + table.p.colModel[iCol].name), 
        length = ele.value.length;
    ele.focus();
    if(ele.setSelectionRange) { //IE
        ele.setSelectionRange(length, length);
    }
    else if(ele.createTextRange) {
        var range = ele.createTextRange();
        range.collapse(true);
        range.moveEnd('character', length);
        range.moveStart('character', start);
        range.select();
    }
}

function saveEdit(id) {
    if(id && id != lastSel) {
        console.log('saveRow: ' + this.id + ' - ' + lastSel);
        /* Save the last selected row before changing it */
        var saveParams = zipEditParams;
        $(this).jqGrid('saveRow', lastSel, saveParams);
        lastSel = id;
    }
}

function processResponse(response) {
    console.log('processResponse');
    var obj = $.parseJSON(response.responseText), 
        retVal = true, 
        message = '', 
        new_id = '';
    if(obj.message) {
        if(obj.message == 'not logged in') {
            location.href = 'logout.php';
        }
        else if(obj.message != 'true') {
            message = obj.message;
            retVal = false;
        }
    }
    return [retVal, message, new_id];
}

非常感谢任何有关此问题的帮助。

更新似乎如果我注释掉.jqGrid('inlineNav', '#zipcodes_pager', {edit: true, save: true, cancel: false, editParams: zipEditParams});，那么一切都按预期工作。我也试过使用.jqGrid('inlineNav', '#zipcodes_pager');，但看到了相同的结果。这很好，可以在短期内工作，但我仍然希望尽可能使用内联添加功能。

Answer 1

我认为您需要为onSelectRow函数添加更多功能



onSelectRow: function (id) {
        if (id && id !== lastsel) {
        // cancel editing of the previous selected row if it was in editing state.
        // jqGrid hold intern savedRow array inside of jqGrid object,
        // so it is safe to call restoreRow method with any id parameter
        // if jqGrid not in editing state
        if (typeof lastsel !== "undefined") {
        jQuery("#grid").jqGrid('restoreRow', lastsel);
        }
    lastSel = id;
    }
    },

onSelectRow: function (id) { if (id && id !== lastsel) { // cancel editing of the previous selected row if it was in editing state. // jqGrid hold intern savedRow array inside of jqGrid object, // so it is safe to call restoreRow method with any id parameter // if jqGrid not in editing state if (typeof lastsel !== "undefined") { jQuery("#grid").jqGrid('restoreRow', lastsel); } lastSel = id; } },

在这段代码中，我没有在选择行时进行编辑，但是你可以看到你需要恢复上一个选定的行，如果该行处于编辑模式并且你点击了其他一行。

试试这个。

jqGrid - 在saveRow之前调用aftersavefunc

1 个答案: