1

データのインライン編集/追加を可能にするjqGridがあります。ユーザーが行をダブルクリックすると、インライン編集が開始されます。ユーザーがEnterキーを押すか、別の行をクリックしたときに、変更を保存したいと思います。ただし、何らかの理由で、saveRow関数が呼び出される前に行が復元され、編集内容が保存されません（AJAX呼び出しは発生しません）。

私のコードを以下に示します。Enterキーを押すと、変更が保存されてサーバーに送信されます。別の行をクリックすると、変更がサーバーに送信されず（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');みましたが、同じ結果になりました。これは素晴らしく、短期的には機能する可能性がありますが、可能であればインライン追加の機能が必要です。

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 に答える