Завершение редактирования в jqgrid

Question

Я с большим успехом использую jqgrid следующим образом:

1. Данные загружаются с сервера как JSON
2. Пользователь выполняет встроенное редактирование

3. При нажатии кнопки сохранения все данные сериализуются с использованием:

   var data = $ ("# mygrid"). GetRowData ();

   var datajson = JSON.stringify (data);

Проблема с этим подходом заключается в том, что я получу входные элементы в моих json-данных, если пользователь не нажал return или не удалился из отредактированной ячейки.Есть ли способ завершить режим редактирования в jqgrid?

Answer 1

Вы можете использовать saveRow для сохранения данных.

Чтобы использовать saveRow , вам необходимо знать идентификатор строки текущей редактируемой строки.Например, вы можете сохранить идентификатор строки текущего редактирования в переменной (перед вызовом editRow ) и использовать значение для вызова метода saveRow.

UPDATED: см. демо .Сначала выберите строку, измените значения, а затем нажмите кнопку «Сохранить текущую строку редактирования».Вы увидите, что изменения будут сохранены.

Answer 2

Я использую удаленную отправку для каждой ячейки, и поскольку я использовал "contenteditable" div для редактора ячеек (для многострочного текста), я хотел закончить редактирование ячейки с помощью ctrl-enter.

(на основании ответа Олега и Как закрыть редактор ячейки? и http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing)

$(document).ready(function() {
    var grid,currentCell;
    $(".jqGrid_wrapper").on("keydown","div[contenteditable]",function (e) { 
        if (e.ctrlKey && e.keyCode == 13) 
        { 
            grid.jqGrid("saveCell",currentCell.iRow,currentCell.iCol);
            return false; 
        }

        return true; 
    });
    grid=$("#table_list_2");
    grid.jqGrid({
        url: ...
        cellEdit: true,
        cellsubmit: 'remote',
        cellurl: '..',    

        beforeEditCell: function(rowid, cellname, value, iRow, iCol) {
            currentCell={
                   rowid:rowid, cellname:cellname, value:value, iRow:iRow, iCol:iCol
            }
        }               
    });
});

Answer 3

Я решил это, вызвав событие «keydown» для элемента:

editoptions: {
                    dataInit: function(elem) {
                        $(elem).datetimepicker({
                            dateFormat: "yy-mm-dd",
                            onClose: function(datetimeText, datepickerInstance) {
                                $(elem).trigger($.Event( "keydown", { keyCode: $.ui.keyCode.ENTER } ))
                            }
                        });
                    }
                }