2010-11-26 18 views
1

Ich bin ziemlich neu zu jquery und jqgrid. Ich verwende ASP.NET WebForms. Ich bin in der Lage, einige Daten Prom Server zu bekommen und es im Raster zu zeigen. Ich verwende PageMethods, um Daten vom Server zu erhalten. Normalerweise ist mein CodejqGrid - Daten bearbeiten

function CreateGrid(){ 
    $("#sestGrid").jqGrid({ 
     datatype: GetData, 
     //toolbar: [true, "top"], 
     colNames: ['Name', 'Age'], 
     colModel: [ 
      { name: 'Name', index: 'Name', width: 170, align: 'left', 
       sortable: false, key: true }, 
      { name: 'Age', index: 'Age', width: 40, align: 'center', 
       sortable: false, editable: true }, 
     ], 
     ondblClickRow: function() { 
      var row_id = $("#sestGrid").getGridParam('selrow'); 
      $('#sestGrid').editRow(row_id, true); 
     } 
    }); 
} 

function GetData() { 
    PageMethods.GetSestevalniStevecData(GotData); 
} 

function GotData (data) { 
    $("#sestGrid").clearGridData(false); 
    for (var j = 0; j <= data.length; j++) 
     $("#sestGrid").jqGrid('addRowData', j + 1, data[j]); 
} 

So, jetzt möchte ich einige Daten bearbeiten und es auf Server veröffentlichen. Wie kann ich das mit PageMethods tun? Sollte ich einen anderen Ansatz verwenden?

Und noch etwas. Ich habe die Demos überprüft http://trirand.com/blog/jqgrid/jqgrid.html und in allen Bearbeitungsbeispielen können Sie nur eine Zeile bearbeiten und dann müssen Sie Änderungen speichern ... Ist es möglich, mehr als eine Zeile zu bearbeiten und alle Änderungen in einem Schritt zu speichern?

Vielen Dank.

Antwort

1

jqGrid ist für die Verwendung mit Ajax-Diensten konzipiert. Wenn der Benutzer also die Daten einer Zeile ändert, werden die Änderungen an den Server gesendet: an die URL, die Sie über den Parameter jqGrid editurl konfigurieren. Der einfachste Weg zur Implementierung der Zeilenbearbeitung besteht also darin, einen ASMX-Webservice oder einen WCF-Service in Ihre Website aufzunehmen. Es ist nicht wichtig, ob Sie ASP.NET-WebForms, ASP.NET MVC oder nur reines HTML für Ihre Seiten verwenden. Wählen Sie einfach die Technologie, die Sie bevorzugen, und fügen Sie die entsprechende Seite Ihrer Website hinzu.

Die ASMX oder WCF sollte eine Methode mit der Signatur wie

public string MyDataEdit (string Age, string oper, string id) 

(für weitere Informationen siehe this alte Antwort) hat. Die Methode sollte die ID des neuen hinzugefügten Objekts (die Name in Ihrem Fall) im Falle der Operation Hinzufügen zurückgeben.

Noch eine kleine Bemerkung. Sie können die Definition der Funktion ondblClickRow von function() zu function(row_id) ändern und die verwendete Leitung getGridParam('selrow') entfernen.

+0

Oleg, vielen Dank für Ihre Antwort! Ihr Beitrag hat mir geholfen, mein jqgrid-Wissen zu verbessern. Also, wenn ich dich richtig mache, wird jede Zeile nach der Bearbeitung auf dem Server veröffentlicht. Ist es möglich, nur wenige Zeilen zu bearbeiten und sie alle per Mausklick auf den Server zu stellen? – user521379

+0

@ user521379: Um genauer zu sein, unterstützt jqGrid drei Haupttypen der Bearbeitung: Formularbearbeitung, Inline-Bearbeitung und Zellbearbeitung. Inline-Bearbeitung und Bearbeitung von Zellenbearbeitung ** lokale Bearbeitung **. So können die Daten lokal in jqGrid bearbeitet werden. Nur Formularbearbeitung unterstützt das Löschen und Einfügen von Zeilen. Sie können beispielsweise die lokale Inline-Bearbeitung implementieren und die geänderten Zeilen gleichzeitig veröffentlichen. Das Problem ist, dass Sie im Falle der Buchung vieler modifizierter Zeilen sich selbst manuell implementieren müssen. Außerdem ist es im Falle einer Mehrbenutzerumgebung viel komplizierter, eine Fehlerbehandlung zu implementieren. Ich werde empfehlen, eine Zeile zu posten. – Oleg

+0

Gibt es eine einfachere Option, um geänderte Daten aus dem Grid zu erhalten? Jetzt speichere ich es in benutzerdefinierten Array, die so primitive und nicht so zuverlässige Lösung ist. Hat Grid irgendeine Methode wie GetChangedRows() ?? Gibt es eine bessere Lösung zum Speichern geänderter Zeilen als meine? Vielen Dank! – user521379

0

ich dein Beispiel verwendet und verändert es ein wenig:

ondblClickRow: function (rowid) { 
if (rowid && rowid != lastsel) { 
    changedRows.push(rowid); //keep row id 
    jQuery('#jqgrid').editRow(rowid, true); 
} 
} 

Unter der Schaltfläche Click-Ereignis speichern:

$.each(changedRows, function() { 
    var row = $("#jqgrid").getRowData(this); 
    var Id = row['ID']; 
    var price = $(row['Price']).val(); //this is an input type 
}); 

HTH jemand :)