Добавление Excel как функциональность в jqgrid уже редактируемых ячеек

Question

У меня есть jqGrid только с определенными столбцами, которые можно редактировать, и я хотел бы иметь возможность реализовать функциональность, аналогичную Excel, когда вы нажимаете Tab и вводите. Эти столбцы доступны для редактирования с самого начала, потому что я вызываю editRow для каждой строки в loadComplete, чтобы пользователь мог щелкнуть любую из ячеек в этих столбцах и изменить информацию. Я бы хотел, чтобы при нажатии клавиши tab курсор перемещался к следующей редактируемой ячейке в текущей строке, пока не достигнет конца, а после повторного нажатия клавиши tab перейдет к первой редактируемой ячейке следующей строки; и по нажатию Enter переходит к первой редактируемой ячейке следующего ряда, независимо от того, в какой ячейке вы оказались в предыдущем ряду. Каждый раз, когда фокус ячейки изменяется, данные сохраняются на сервере.

Я провел немало исследований, но ни одно из них не сработало. У меня есть функциональность для каждого нажатия клавиши в colModel в editoptions и dataEvents как событие нажатия клавиши, которое проверяет, какая кнопка была нажата, а затем выполняет соответствующий код. Первое, что я попробовал, использовал метод editCell jqGrid, в котором я передал ему строку и столбец следующей ячейки, в которую я хотел бы переместить курсор, но это не сработало, и я думаю, что это потому, что я уже вызвал editRow. на каждом ряду. Я также попытался изменить фокус на ячейку, к которой пытаюсь перейти, используя $ .click () или $ .focus (), но это тоже не сработало.

Что еще нужно отметить, это то, что когда эти столбцы размыты, я пересчитываю итоговые значения столбцов на стороне клиента. Я попытался поместить разные вещи, которые пытался изменить фокус, в setTimeout, но это тоже не сработало.

Я хотел бы сохранить его там, где все ячейки в столбцах, которые я хочу редактировать, доступны для редактирования в любое время, и пользователь может либо щелкнуть по этой конкретной ячейке, либо перейти на нее / перейти к ней, чтобы отредактировать ее. Вот как это выглядит для уточнения:

http://cl.ly/2W3E1U3i1k3K0W2Y0r0n

Спасибо за помощь!

Answer 1

Я смог понять это, и я не уверен, почему мне потребовалось так много времени, чтобы понять это.Ничто из того, что предоставил jqgrid, не сработало, и я попробовал много разных вещей из jQuery, и, наконец, нашел что-то, что работает:

{
    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();
        }
    }
}

Это делает так, что вкладка переносит вас в следующий столбец, и ввод всегда приводит вас кпервый столбец следующей строки, сохраняя при этом, что все ячейки всегда доступны для редактирования, и вы можете щелкнуть любую редактируемую ячейку в любое время.