jqGrid Benutzerdefinierte Editierdialog

Question

Ich arbeite an einer Anwendung, die jqGrid verwendet. Das Problem besteht darin, dass der Bearbeitungsdialog, der bei der Zeilenbearbeitung angezeigt werden soll, ein bestimmtes Layout haben muss. Also würde ich es lieber über Ajax laden und dann die Daten manuell an jqGrid zurücksenden. Ich habe viel in den Foren gesucht, aber ich konnte kein Beispiel dafür finden.

Also brauche ich nur jqGrid, um das Popup-Fenster für den Bearbeitungsdialog mit benutzerdefiniertem Inhalt aus einem PHP-Skript zu füllen.

UPDATE: Die Idee ist, dass ich einen Formulargenerator habe, wo der Benutzer die Position/Breite/Höhe/Sichtbarkeit der Bearbeitungsfelder einstellt ... und dies muss im Bearbeitungsdialog verwendet werden.

Answer 1

Sie können editfunc oder addfunc Option navGrid verwenden. Wenn zum Beispiel editfunc definiert sind, dann wird jqGrid anstelle von editGridRoweditfunc mit der ID der ausgewählten Zeile als Parameter genannt.

Alternativ können Sie custom button verwenden (siehe this answer als Beispiel).

Um Daten in der Tabelle nach dem benutzerdefinierten Bearbeitungsdialog zu ändern, können Sie die setRowData Funktion verwenden.

AKTUALISIERT: Wenn Sie nur einige Änderungen am Layout des Bearbeitungsdialogs vornehmen müssen, können Sie beforeShowForm für diese Änderungen verwenden.

Answer 2

Sie können dies überprüfen Tutorial, die offizielle Demo-Website von jqGrid Plugin ist. Ich bin mir sicher, dass es in dieser Kategorie Beispiele für "Zeilenbearbeitung" gibt. Sie können auch viele andere Beispiele für jqGrid auf dieser Demo-Website sehen.
Sie können auch die Home page überprüfen.

Wenn Sie weitere Probleme haben, können Sie es hier fragen. Ich habe einige dieser Beispiele auf einer meiner (vertraulichen) Webseiten verwendet, so dass es leicht ist, sie nach Ihren Bedürfnissen zu manipulieren.

Ich hoffe, es hilft.

Answer 3

Mein Editierdialog hatte zu viele Felder und wurde so zu hoch, also musste ich die Felder nebeneinander in zwei Spalten setzen. Ich tat es wie folgt:

Ich versuchte verschiedene Möglichkeiten, mit wrap(), etc., aber festgestellt, dass die Werte nicht auf den Server gebucht werden, wenn Sie die ursprüngliche Tabellenstruktur ändern. Also habe ich einfach die Tr-Elemente geklont, sie in neue Tische gelegt und die alten versteckt. Ich habe die ganze Tabelle nicht versteckt, so dass die Validierung immer noch sichtbar ist. Ich habe eine Änderung an den geklonten Elementen vorgenommen, um die alten zu aktualisieren. Das funktioniert großartig. Parameter tableName ist Ihre jqgrid-Element-ID.

var splitFormatted = false; 
function SplitFormatForm(tableName, add) { 
    if (!splitFormatted) { 
    splitFormatted = true; 
    $("#FrmGrid_" + tableName).append('<table><tr><td><table id="TblGrid_' + tableName + '_A" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td><td><table id="TblGrid_' + tableName + '_B" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td></tr></table>'); 

    var cc = $("#TblGrid_" + tableName + "> tbody").children("tr").length; 
    var s = (cc/2) - 1; 

    var x = $("#TblGrid_" + tableName + "> tbody").children("tr"); 
    var i = 0; 
    x.each(function (index) { 
     var e = $(this).clone(); 
     var oldID = e.attr("id") + ""; 
     var newID = oldID; 
     if (oldID.substring(0, 3) === "tr_") { 
      newID = "clone_" + oldID; 
      $(this).css("display", "none"); 
      e.change(function() { $("#" + oldID + " > .DataTD > .FormElement").val($("#" + newID + " > .DataTD > .FormElement").val()); }); 
      e.attr("id", newID); 

      if (i++ < s) { 
       $("#TblGrid_" + tableName + "_A").append(e); 
      } 
      else { 
       $("#TblGrid_" + tableName + "_B").append(e); 
      } 
     } 
    }); 

    //This hack makes the popup work the first time too 
    $(".ui-icon-closethick").trigger('click'); 
    var sel_id = "'new'"; 
    if (!add) { 
     sel_id = jQuery('#'+tableName).jqGrid('getGridParam', 'selrow'); 
    } 
    jQuery('#'+tableName).jqGrid('editGridRow', sel_id, { closeAfterAdd: true, width: 800, afterSubmit: function (response, postdata) { return [response.responseText == 'OK', response.responseText]; } }); 
}} 

Rufen Sie diesen Code in Ihre EditOptions wie folgt:

afterShowForm: function() { SplitFormatForm("SiteAccountsGrid", false); }