1

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

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

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');，但看到了相同的结果。这很好，可以在短期内工作，但如果可能的话，我仍然想要内联添加的功能。

4

1 回答 1

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

在此代码中，我没有在选择行时进行编辑，但是您可以看到，如果该行处于编辑模式并且您单击其他行，则您需要恢复先前选择的行。

尝试这个。

于 2012-08-01T03:23:19.930 回答