Finalizing editing in jqgrid

问题

I using jqgrid with great succes in the following way:

The data is loaded from the server as JSON
The user do inline editing
When a save-button is clicked all the data is serialized using:

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

var datajson = JSON.stringify(data);

The problem with this aproach is that I will get the input elements in my json-data if the user has not pressed return or moved away from the edited cell. Is there any way to end edit mode i jqgrid?

回答1:

You can use saveRow to save the data.

To use saveRow you have to know the row id of the current editable row. You can for example save the rowid of the current editing in a variable (before you call editRow) and use the value for calling of the saveRow method.

UPDATED: see the demo. First select some row, modify the values and then click on the "Save current editing row" button. You will see that the changes will be saves.

回答2:

I have solved it by triggering "keydown" ENTER event on element:

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

回答3:

I use remote submit for each cell, and as I used "contenteditable" div for cell editor (for multiline text), i wanted to finish cell editing with ctrl-enter.

( Based on Oleg's answer and How to close cell-editor? and 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
            }
        }               
    });
});

来源：https://stackoverflow.com/questions/4804835/finalizing-editing-in-jqgrid

标签

javascript

jquery

jqgrid