Навигация в Excel и клавиша табуляции при редактировании ячейки

Question

один вопрос для всех продвинутых в jqgrid.

мне нужно закодировать этот вариант использования:

В jqGrid есть два редактируемых столбца. Я должен использовать редактирование ячейки. Пользователь нажимает на одну редактируемую ячейку, и когда он нажимает клавишу Enter , я выбираю следующую редактируемую ячейку ПОД фактической

В противном случае, когда он нажимает клавишу tab , я выбираю следующую редактируемую ячейку

• если фактическая ячейка является последней, я устанавливаю ближайшая редактируемая ячейка в следующем линия или
• если нет, я выбираю следующий редактируемая ячейка в фактической строке.

Подводя итог - мне нужно точное поведение, как в Excel.

Если бы у меня была лучшая репутация, я мог бы загрузить изображение, чтобы продемонстрировать желаемую ситуацию.

Большое спасибо.

Answer 1

Ваш ответ мне очень помогает и направляет меня к правильному решению, хотя я потратил больше 3 часов на написание правильного кода, но мне это удалось:)

Большое спасибо.

Подводя итог:

я определил 2 переменные:

var selICol; //iCol of selected cell
var selIRow; //iRow of selected cell

я установил их в beforeEditCell события:

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

, а затем в editoptions для обеих ячеек редактирования, которые я установил:

первая редактируемая ячейка в строке ( Inventúrny stav на картинке), поведение на вкладке для выбора следующей редактируемой ячейки по умолчанию

editoptions: {
    dataInit : function (elem) { $(elem).focus(function(){ this.select();}) },
    dataEvents: [
        { 
            type: 'keydown', 
            fn: function(e) { 
                var key = e.charCode || e.keyCode;
                if (key == 13)//enter
                {
                    setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100);
                }
            }
        } 
    ]
}

вторая редактируемая ячейка в ряду (Склад. Cena на картинке) - я вручную установил iCol для следующей редактируемой ячейки в следующей строке

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
                {
                    setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, 4, true);", 100);
                }
                else if (key == 13)//enter
                {
                    setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100);
                }
            }
        } 
    ]
}

Answer 2

Ahoj!

Чтобы связать редактируемую ячейку с вашим пользовательским обработчиком событий, в jqGrid есть общие настройки: dataEvents свойство editoptions . Абсолютно такие же настройки существуют для поиска в jqGrid. Вы можете найти несколько примеров кода здесь , здесь и здесь . Возможно, вам потребуется использовать методы редактирования ячейки внутри обработчика событий клавиатуры, чтобы иметь возможность завершить редактирование одной ячейки и начать редактирование другой.

Если у вас возникнут проблемы с реализацией, вы можете добавить свой вопрос с примером кода, а затем попытаться изменить его.

Answer 3

Я понимаю, что это старая тема, но недавно я боролся с этим и подумал, что поделюсь подходом, который мне помог:* editCell функция имеет дело с клавишами табуляции и ввода во время операции редактирования.Сначала должна сработать привязка клавиш jqGrid, а затем эта.Этот код просто говорит ему начать редактирование в следующей строке после обработки обработчика ENTER jqGrid.Он работает точно так же, как и сейчас, сохраняя элемент управления редактирования открытым.

Мне никогда не удавалось полностью расшифровать структуру editoptions: {dataEvents: ...} , поэтомулучший подход.Если это так, не стесняйтесь объяснить, как это лучше.

Answer 4

{
    type: 'keydown',
    fn: function(e) {
        var key = e.charCode || e.keyCode;
        //TAB
        if(key == jq.ui.keyCode.TAB) {
             setTimeout(function() { 
               jq('#' + currentRowId + '_nextColName').focus();
               jq('#' + currentRowId + '_nextColName').select(); 
             }, 500);
        }
        //ENTER
        else if (key == jq.ui.keyCode.ENTER) {
             var nextRow = parseInt(currentRowId) + 1;
             jq('#' + currentRowId + '_thisColName').blur();
             jq('#' + nextRow + '_firstColName').select();
        }
    }
}