jqgrid редактировать и добавлять строки с помощью клавиши «Tab»

Question

Я новичок в jqgrid, и я пытаюсь перемещаться по сетке с помощью клавиши "tab".Я хочу иметь возможность редактировать строку, и когда я редактирую последнюю ячейку в этой строке, если я нажму клавишу табуляции, она сохранит текущие изменения строки (на стороне клиента, а не нажав кнопку ввода) и установитсфокусируйтесь на следующей строке и отредактируйте ее ячейки, а когда я доберусь до последней строки и ячейки, щелчок вкладки добавит новую строку и перейдет в режим редактирования.

Я пытался с редактированием строки, а затем с редактированием ячейки, но всегда застревал ... как это можно сделать?

Заранее спасибо.

Answer 1

Я не знаю, что у вас в данный момент, но я проверил это, и это работает.Поскольку вы не упомянули, как изначально начали редактировать сетку, я сделал это вручную в событии ready, вам просто нужно отслеживать, какая строка редактируется в данный момент, используя selIRow var.

var selIRow = 1; //keep track of currently edited row
                 //initialized to 1 for testing purposes

    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            datatype: 'local',
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [
                { name: 'id', index: 'id', width: 60, editable: true },
                { name: 'invdate', index: 'invdate', width: 90, editable: true },
                { name: 'name', index: 'name', width: 100, editable: true },
                { name: 'amount', index: 'amount', width: 80, editable: true },
                { name: 'tax', index: 'tax', width: 80, editable: true },
                { name: 'total', index: 'total', width: 80, editable: true },
                { name: 'note', index: 'note', width: 150, editable: true,
                    //Place this code in the col options of the last column in your grid
                    // it listens for the tab button being pressed
                    editoptions: {
                        dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
                        dataEvents: [
                            {
                                type: 'keydown',
                                fn: function (e) {
                                    var key = e.charCode || e.keyCode;
                                    if (key == 9)//tab
                                    {
                                        var grid = $('#jqGrid');
                                        //Save editing for current row
                                        grid.jqGrid('saveRow', selIRow, false, 'clientArray');
                                        //If at bottom of grid, create new row
                                        if (selIRow++ == grid.getDataIDs().length) {
                                            grid.addRowData(selIRow, {});
                                        }
                                        //Enter edit row for next row in grid
                                        grid.jqGrid('editRow', selIRow, false, 'clientArray');
                                    }
                                }
                            }
                        ]
                    }
                }
            ],
        });
    });

Некоторая заслуга в ответе Каджо из здесь для события табуляции.