jqGrid: возможно ли зафиксировать изменение ячейки при нажатии табуляции вместо нажатия Enter?

Question

У меня есть простое встроенное редактирование в моей сетке, и я хочу зафиксировать изменение, когда пользователь выходит из текстового поля. Поведение jqGrid по умолчанию заставляет пользователя нажимать «Enter», чтобы зафиксировать изменение, но это не интуитивно понятно для наших пользователей.

альтернативный текст http://i32.tinypic.com/e62iqh.jpg

    onSelectRow: function(id) {
         $(gridCoreGroups).editRow(id, true, undefined, function(response) 
         {
              alert("hello world");
         }
    }

Я прошел через предоставленные события, но все они происходят в результате нажатия пользователем «Enter», которого я хочу избежать. Могу ли я подключить что-нибудь, что могло бы вызвать действие, когда пользователь отключил эту ячейку?

Answer 1

Для редактирования в строке вы можете сделать это несколькими способами. Чтобы привязать событие onblur к полю ввода с помощью триггера onSelectRow, устраняя необходимость в кнопках редактирования и сохранения, выполните что-то вроде этого:

  $('#gridId').setGridParam({onSelectRow: function(id){
    //Edit row on select
    $('#gridid').editRow(id, true); 

    //Modify event handler to save on blur.
    var fieldName = "Name of the field which will trigger save on blur.";
    //Note, this solution only makes sense when applied to the last field in a row.
    $("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
      $('#gridId').saveRow(id);
    });
  }});

Чтобы применить обработчик живого события jQuery ко всем входам, которые могут появиться в строке (jqGrid помечает все входы как rowId_fieldName), создайте в цикле число строк в вашей сетке и сделайте что-то подобное:

var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){ 
  fieldName = "field_which_will_trigger_on_blur";
  $("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
    $('#gridId').jqGrid('saveRow',ids[i]);
  });
}

Примечание: Чтобы использовать размытие с .live (), как описано выше, вам понадобится jQuery 1.4 или патч, расположенный по адресу: Имитация "фокуса" и "размытия" в методе jQuery .live ()

Будьте осторожны с rowIds. Когда вы приступите к сортировке, добавлению и удалению строк, вы можете написать какой-нибудь хитрый jQuery для преобразования идентификаторов строк в iRow или номера строк.

Если вы похожи на меня и у вас есть индивидуальное редактирование ячейки, вам нужно изменить триггер afterEditCell следующим образом:

  $('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
    //Modify event handler to save on blur.
    $("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
      $('#gridId').saveCell(iRow,iCol);
    });
  }});

Надеюсь, это поможет ..

Answer 2

Это довольно ужасно, но это мое решение этой проблемы, и, вероятно, оно немного проще и более общее - оно нажимает программно ввод, когда элемент теряет фокус:)

       afterEditCell: function() {
            //This code saves the state of the box when focus is lost in a pretty horrible
            //way, may be they will add support for this in the future

            //set up horrible hack for pressing enter when leaving cell
            e = jQuery.Event("keydown");
            e.keyCode = $.ui.keyCode.ENTER;
            //get the edited thing
            edit = $(".edit-cell > *");
            edit.blur(function() {
                edit.trigger(e);
            });
        },

Добавьте этот код в код установки jqgrid.

Предполагается, что последний отредактированный элемент - это единственное, что .edit-cell является родительским td.

Answer 3

Моим решением было использовать базовые селекторы jQuery и события независимо от сетки для обнаружения этого события. Я использую события live и blur на текстовых полях в сетке, чтобы зафиксировать событие. Два события не поддерживаются в сочетании друг с другом, поэтому этот взлом оказался решением:

Имитация «фокуса» и «размытия» в методе jQuery .live ()

Answer 4

Вместо использования selectRow используйте CellSelect .

onCellSelect: function (row, col, content, event) {
    if (row != lastsel) {
            grid.jqGrid('saveRow', lastsel);
            lastsel = row;
        }           
        var cm = grid.jqGrid("getGridParam", "colModel");
        //keep it false bcoz i am calling an event on the enter keypress
        grid.jqGrid('editRow', row, false);

        var fieldName = cm[col].name;
        //If input tag becomes blur then function called.
          $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
        });

       //Enter key press event.
       $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){
            var code = (e.keyCode ? e.keyCode : e.which);
            //If enter key pressed then save particular row and validate.
            if( code == 13 ){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
            }
        });
    }

// saveDataFromTable () - это функция, которая проверяет мои данные.

Answer 5

У меня возникла та же проблема, и я попробовал ответы выше. В итоге я выбрал решение, которое вставляет нажатие клавиши «Ввод», когда пользователь покидает вкладку.

// Call this function to save and unfinished edit
// - If an input exists with the "edit-call" class then the edit has
//   not been finished.  Complete the edit by injecting an "Enter" key press
function saveEdits() {
    var $input = $("#grid").find(".edit-cell input");
    if ($input.length == 1) {
        var e = $.Event("keydown");
        e.which = 13;
        e.keyCode = 13;
        $input.trigger(e);
    }
}

Answer 6

Я знаю, что этот вопрос старый, но ответ устарел.

Должна быть создана глобальная переменная с именем lastsel, а в код jqGrid добавлена ​​следующая строка

 onSelectRow: function (id) {
            if (!status)//deselected
            {
                if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode
                    jQuery('#list1').jqGrid('saveRow', lastsel);
            }
            if (id && id !== lastsel) {
                jQuery('#list1').jqGrid('restoreRow', lastsel);
                jQuery('#list1').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },