jqGrid: Ist es möglich, einen commit für eine Zelle ändern, bei der Tab-off statt Enter drücken?

Ich habe eine einfache in-line-edit in mein raster, und ich möchte, um die änderung zu bestätigen, wenn der Benutzer mit der Tabulatortaste aus der textbox. Das Standard-Verhalten von jqGrid zwingt den Benutzer zum drücken von "Enter", um die änderung zu bestätigen, aber dies ist nicht intuitiv für unsere Nutzer.

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

Habe ich gearbeitet mein Weg durch die Veranstaltungen zur Verfügung gestellt, aber Sie alle passieren, als ein Ergebnis der Benutzer 'Enter', die ich vermeiden möchte. Gibt es etwas, was ich kann Draht, das wäre die eine Aktion auslösen, wenn der Benutzer mit der Tabulatortaste aus dieser Zelle?

InformationsquelleAutor The Matt | 2009-09-14

10

Für die in-line-Bearbeitung Sie erreichen dies mehrere Möglichkeiten. Zum binden von einem onblur-Ereignis in das input-Feld mit der onSelectRow Auslöser, wodurch die Notwendigkeit für Bearbeiten und speichern-Schaltflächen, etwas wie das hier tun:
```
  $('#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);
    });
  }});
```
Anwenden eine jQuery live-event-handler auf alle Eingaben, die angezeigt werden können innerhalb einer Zeile (jqGrid Etiketten alle Eingänge als rowId_fieldName ), loop-werfen Sie die Anzahl der Zeilen in Ihrem Netz und tun Sie etwas wie dieses:
```
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]);
  });
}
```
Hinweis: Verwendung Unschärfe mit .live() wie oben, müssen Sie jQuery 1.4 oder der patch liegt unter:
Simulation von "focus" und "blur" in jQuery .live () - Methode

Vorsichtig sein mit rowIds. Wenn Sie das Sortieren, hinzufügen und entfernen von Zeilen, können Sie sich finden, schreiben einige knifflige jQuery zu konvertieren, Datensatz-ids zu iRows oder Zeile von zahlen.

Wenn Sie wie ich sind, und Sie ging mit einzelne Zelle Bearbeiten, werden Sie wollen, ändern Sie die afterEditCell Auslöser mit etwas wie:
```
  $('#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);
    });
  }});
```
Hoffe, das hilft..
- Das Letzte Beispiel Jon zur Verfügung gestellt hat Super funktioniert. Danke!
- Schönes Beispiel, @Jon es hat noch Probleme, wenn die Zelle ein Datum mit einem datepicker und nicht gewählte Fach in der Farbauswahl und gibt einen Javascript-Fehler
- Im letzten Beispiel, '#uploadTable' sollte '#gridid etwa'?
- Richtig. Danke @morgar. Behoben.
- Es gibt noch ein weiteres '#uploadTable' in dem Beispiel 😉
InformationsquelleAutor Jon Weers

Dies ist ziemlich schrecklich, aber seine mein nehmen auf diesem problem, und das prob ist ein bisschen leichter und mehr Generika - es drückt die EINGABETASTE programmgesteuert, wenn das Element den Fokus verliert 🙂

       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);
            });
        },

Fügen Sie diesen code in Ihre jqgrid-setup-code.

Es wird davon ausgegangen, dass die zuletzt bearbeitete Element ist das einzige, was mit .Bearbeiten-Zelle als Elternteil td.

Es ist vielleicht nicht schön - aber es ist allgemein gehalten - und es funktioniert für text und Dropdown-Listen innerhalb der gleichen Zeile. Vielen Dank für die großzügige Bereitstellung Ihrer Antwort.

InformationsquelleAutor Nick Holden

2

Meine Lösung war, die grundlegenden jQuery-Selektoren und Ereignisse unabhängig von der Gitter zu erkennen, diese Veranstaltung. Ich benutze den live-und blur-events auf die Textfelder im grid zu erfassen, die Veranstaltung. Die beiden Ereignisse werden nicht unterstützt in Kombination mit jedem anderen, so dass dieser hack wurde die Lösung:

Simulation von "focus" und "blur" in jQuery .live () - Methode

InformationsquelleAutor The Matt

Ich weiß, diese Frage ist alt, aber die Antwort ist veraltet.

Einer globalen variable namens lastsel erstellt werden muss und die folgenden Hinzugefügt, um den jqGrid-code

 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;
            }
        },

InformationsquelleAutor Wize

Ich hatte das gleiche Problem und habe versucht, die oben genannten Antworten. Am Ende ging ich mit einer Lösung, fügt einen "Enter" - Taste drücken, wenn der Benutzer das verlassen der tab.

//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);
    }
}

InformationsquelleAutor 3beard

Anstatt selectRow verwenden 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() ist die Funktion, welche überprüft meine Daten.

InformationsquelleAutor Dharshan Kumar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.