Unterstützt mehrere Arten von Datensätzen, um als Datenquellen zusammenzuarbeiten
JQGrid kann drei Datenarten binden: XML, JSON und Arrays. Die Verwendung verschiedener Datentypen soll das Datentyp -Attribut hauptsächlich festlegen, seine Werte sind "XML", "JSON", "Local" (Array).
$ ("#Grid1"). JqGrid (........ DataType: "xml", .......);Im Folgenden werden die Formate verschiedener Datentypen aufgeführt
XML -Format:
<rows> <page> </page> <totas> </total> <datensätze> </records> <row id = "rowID"> <cell> value1 </cell> ......... <cell> Valuen </cell> </row> </rows>
JSON -Format
{"Seite": "Seitennummer", "Zeilen": [{name1: 'value1', name2: 'value2', .... namen: 'valuen'}, .... {..}], "Total": Record Count, "Records": Total Record Count}
Array -Format
var datas = [{name1: 'value1', name2: 'value2', ...... namen: 'valuen'}, .... {....}]; // Daten zu jqGrid für (var i = 0; i <= mydata.Length; i ++) {jquery ("#grid1).Oder legen Sie das Datenattribut fest
$ ("#Grid1").Die Funktion statistischer Operationen
Setzen Sie die Footerrow auf das echte und binden GridComplete -Ereignis.
$ ("#grid1"). sum_total = $ ("#grid1"). getCol ('Total', false, 'sum');Verwenden Sie bei Statistik die GetCol -Methode. Der erste Parameter ist der Namenswert von Colmode, und der zweite Parameter wird auf False eingestellt. Andernfalls wird ein Array anstelle von Daten zurückgegeben. Die dritte besteht darin, die Statistikmethode einschließlich "Summe", "AVG" und "Count" festzulegen.
Sortieren
Klicken Sie einfach auf den Titel der Spalte und sortieren Sie die Spalte in aufsteigender oder absteigender Reihenfolge. Stellen Sie fest, ob die Spalte sortieren kann, sortierbar in den Spalteneigenschaften. Gleichzeitig muss für verschiedene Datentypen der entsprechende SortType festgelegt werden, einschließlich Int/Integer Integer, Float/Nummer/Währung Schwimmpunkttyp, Datumsdatum, Text und Funktion definieren Funktionen, um benutzerdefinierte Sortierregeln zu implementieren.
$ ("#grid1").Gruppierung
var mydata = [{id: "1", Invdate: "2010-05-24", Name: "Test", Hinweis: "Hinweis", Steuer: "10.00", Gesamt: "2111.00"} , {id: "2", Invdate: "2010-05-25", Name: "test2", Hinweis: "Note2", Steuer: "20.00", Gesamt: "320.00"}, {id: "3", Invdate: "2007-09-01", Name: "Test3", Note: "Tax:", "30.00", insgesamt ", insgesamt:" "430.00"},{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00" . "10.00",total:"210.00"},{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},{id:"9",invdate:"2007-09-01",name: "Test3", Hinweis: "Note3", Betrag: "400.00", Steuer: "30.00", Gesamt: "430.00"}, {ID: "11", Invdate: "2007-10-01", Name: "Test", Hinweis: "Anmerkung", Betrag: "200.00", Steuer: "10.00", Total: "210 .00 "}, {id:" 12 ", Invdate:" 2007-10-02 ", Name:" Test2 ", Hinweis:" Note2 ", Betrag:" 300.00 ", Steuer:" 20.00 ", Gesamt:" 320.00 "}, {id:" 13 ", InvDate: 2007-09-01, Name:" TE3 ", Betrag:" 400.00 ", Steuer:" 30.00 ", insgesamt:" 430.00 "}, {id:" 14 ", Invde:" 2007-10-04 ", Name:" Test ", Hinweis:" Anmerkung ", Betrag:" 200.00 ", Steuer:" 10.00 ", insgesamt: 210.00"}, {id: "15" NVDATE: "2007-10-05", Name: "Test2", Hinweis: "Note2", Betrag: "300.00", Steuer: "20.00", Gesamt: "320.00"}, {id: "16", Invdate: "2007-09-06", Name: "test3", "Note3", "Note3", "Betrag:" 400 ", 400 .00 ", steuern:" 30.00 ", insgesamt:" 430.00 "}, {id:" 17 ", Invdate:" 2007-10-04 ", Name:" Test ", Hinweis:" Anmerkung ", Betrag:" 200.00 ", Steuer:" 10.00 ", insgesamt:" 210.00 "}, {id:" 18 "," 18 "," Invdate: "2007-10-" 2007-10- 03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00" . , Hinweis: "Note2", Betrag: "300.00", Steuer: "20.00", Gesamt: "320.00"}, {ID: "23", Invde: "2007-09-01", Name: "Test3", Hinweis: "Note3", Betrag: "400.00", Tax: "30.00", Total: "430.00"} "}", "430.00"} , {id: "24", Invdate: "2007-10-04", Name: "Test", Hinweis: "Hinweis", Betrag: "200.00", Steuer: "10.00", insgesamt: "210.00"}, {id: "25", Invdeate: "2007-10-05", Name: "test2", "Note2", "Note2", AM OUT: "300.00", Steuer: "20.00", insgesamt: "320.00"}, {id: "26", Invdate: "2007-09-06", Name: "test3", Hinweis: "Note3", Betrag: "400.00", Steuer: "30.00", insgesamt: 430.00 "}, {id: {id:", {id: {id: ", {id: {id:", {id: {id: ", {id: {id:", {id: ", {id:" E: "2007-10-04", Name: "Test", Hinweis: "Anmerkung", Betrag: "200.00", Steuer: "10.00", Gesamt: "210.00"}, {ID: "28", Invdate: "2007-10-03", Name: "Test2", Hinweis: "Note2", Betrag: "300.00", Ta x: "20.00", insgesamt: "320.00"}, {id: "29", Invdate: "2007-09-01", Name: "test3", Hinweis: "Note3", Betrag: "400.00", Tax: "30.00", Total: "430.00"}; "Lokal", Höhe: 'Auto', Rownum: 30, RowList: [10,20,30], Colnames: ['inv no', 'Datum', 'Client', 'Betrag', 'Steuer', 'Total', 'Notes'], Colmodel: [{Name: 'Id', Index: 'Id', Breite: 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, sortType: "int"}, {name: 'invdate', index: 'invdate', width: 90, sortType: "date", formatter: "date"}, {name: 'name' formatter:"number", editable:true},{name:'tax',index:'tax', width:80, align:"right", sorttype:"float", editable:true}, {name:'total',index:'total',width:80, align:"right", sorttype:"float"}, {name:'note',index:'note',width:150, sortierbar: false}], pager: "#plist48", viewrecords: true, sortName: 'name', grupping: true, gruppingView: {gruppenfield: ['name']}, caption: "grupping array data"});Es gibt auch kompliziertere Sortierungen, also schauen wir uns die JQGrid -Demos an!
Filter
Die JQGrid -Filterung filtert keinen Inhalt in Grid, sondern filtert die Daten in der Datenbank.
HTML:
<table id = "s2list"> </table> <div id = "s2pager"> </div>
JavaScript:
JQuery ("#S3List"). JqGrid ('navgrid', '#s3pager', {bearbeiten: false, add: false, del: false, suche: false, aktualisiert: false}); JQuery ("#S3List"). }}). JQuery ("#S3List"). JqGrid ('filterToolbar');Fügen Sie die Symbolleiste hinzu, löschen, ändern und überprüfen Sie die Paginierungsleiste
JQGrid verfügt über eine Paging -Leiste, in der Sie Tasten hinzufügen, ändern, löschen und abfragen können.
Fügen Sie HTML eine weitere Ebene hinzu, und diese Ebene speichert die Paging -Leiste:
<div id = "pager"> </div> $ ("#grid1"). Durch Festlegen des booleschen Werts bestimmt, ob JQuery ("#Grid1"). JqGrid ('navgrid', '#Pager', {bearbeiten: true, add: true, del: true, true: true, refresh: true}); // oder verwenden diese Form Jquery ("#Grid1". 280, ReloadAftersubmit: False}, // Optionen bearbeiten {Höhe: 280, ReloadAftersubmit: False}, // Optionen hinzufügen {ReloadAfterMit: False}, // del Optionen {} // Suchoptionen);Denken Sie daran, vor der Bearbeitung den editablen Wert für editable Spalten in Colmodel zuzuweisen.
Daten auf Seiten lesen
Da die oben erwähnte Pagination eine weitere Paginierungsmethode einführt, die die Seiten durch Scrollbalken dreht. In dieser Paginierungsmethode werden alle Daten in der Datenbank nicht sofort vorgelesen und in das Raster ausgefüllt. Sie werden jedoch verwendet, um die Datenseite zu erhalten, die Sie derzeit durch die Bildlaufleiste stöbern, und dann wird dieser Teil der Daten aus der Datenbank gelesen.
$ ("#grid1").Das folgende Beispiel verwendet nur lokale Daten, die auch den Effekt von Scrollen und Drehen von Seiten erzielen.
JQuery ("#scrolling"). }, {Name: 'Hinweis', Index: 'Hinweis', Breite: 100}], Rownum: 5, GridView: true, pager: '#pscrolling', sortName: 'item_id', viewrecords: true, sortder: "asc", caption: "daten laden während scrolling"});Vater und Sohn Tisch
Untertische können in den folgenden Einstellungen verwendet werden
$ ("#Grid1").Die Einstellungen von Untertabellen sind hier nur die grundlegendsten. Weitere Informationen zu Attributen finden Sie unter http://www.trirand.com/jqgridwiki/doku.php?id=wiki:Subgrid
Zellwert erhalten/setzen
Um den Wert einer bestimmten Zelle zu erhalten, wird GetCell (Rowid, ICOL) aufgerufen. ICOL kann entweder der Positionsindex sein, der derzeit im Colmodel aufgeführt ist, oder im Namenswert. Hinweis: Diese Methode kann bei Bearbeiten von Zeilen oder Zellen nicht verwendet werden. Zu diesem Zeitpunkt ist der zurückgegebene Wert nicht der geänderte Wert, sondern der ursprüngliche Wert.
Festlegen des Wertes einer bestimmten Zellaufrufe setCell (RowID, Colname, Daten, Klasse, Eigenschaften). RowID: aktuelle Zeilen -ID; Colname: Spaltenname oder Spaltenpositionsindex ab 0; Daten: Ändern Sie den Inhalt der Zelle, und wenn sie leer ist, wird er nicht aktualisiert. Klasse: Wenn es sich um eine Zeichenfolge handelt, wird es mit der AddClass -Methode zu den CSS der Zelle hinzugefügt. Wenn es sich um ein Array handelt, wird es direkt zur Style -Eigenschaft hinzugefügt. Eigenschaften: Stellen Sie das Colmodel der Zelleigenschaft ein.
Natürlich können Sie auch Zeilen oder Spalten abrufen/festlegen. Hier können Sie weitere Methoden finden Sie Get/Set/Hinzufügen http://www.trirand.com/jqgridwiki/doku.php?
ID = Wiki: Methoden
Datenüberprüfung
Durch Einstellen der Eigenschaft von Colmodel der Editrules können Sie die Eingabedaten überprüfen
jQuery ("#Grid_id").Im Folgenden finden Sie die verfügbaren Überprüfungsoptionen
Streifte Spalten einstellen
JQuery ("#ghcs"). }Editor
Die Vorlagenspalte von JQGrid verfügt über einige sehr einfache Redakteure, darunter: "Text" einzeilen-Textfeld "TextArea" Multi-Line-Textfeld "Dropdown", "Kontrollkästchen" Kontrollkästchen "Kennwort" Kennwort, Schaltfläche "Bild" Bild "Bild", Datei-Datei-Datei Upload-Datei und "benutzerdefinierte" benutzerdefinierte Editor.
Setzen Sie den EditType in Colmodel
jQuery ("#Grid_id").Die Bearbeitung ist einige Einstellungen für den Editor, und das Textfeld kann die Größe, MaxLength usw. festlegen. Das Kontrollkästchen kann den Wert festlegen.
Ditptionen: {Wert: "Ja: Nein"}
Das Dropdown-Box befindet sich in dieser Form
Bearbeiten: {Wert: "Val1: text1; Val2: text2; val3: text3"}
Weitere Informationen finden Sie unter http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_RULES#EDITTYPE
Die Spalte der Vorlage ruft andere Redakteure auf
Der oben eingeführte Editor verwendet nur die Formularelemente von HTML, und die unten eingeführte Form wird das Plug-In aufgerufen.
<script src = "js/my97datepicker/wdatepicker.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> Funktion initdatepicker (cl) {$ (Cl) .Click (function () {Wdatepicker ();});} .... jQuery ("#grid_id").Hier wird das My97DatePicker -Plugin als Kalenderredakteur bezeichnet.
Wenn Sie mehrere Steuerelemente in einer Template -Spalte platzieren möchten, können Sie die folgenden Methoden verwenden
JQuery ("#Grid_id"). JqGrid ({... AfterInsertrow: function (rowId, adata) {var controlls = ""; // Control in der Vorlage platziert ...... $ ("#grid_id").Dies wird tatsächlich erreicht, indem der HTML in der Netzzelle bearbeitet wird.
Bewegen Sie die Zellauswahl imitation Excel
Nachdem Sie den Zellbearbeitungsmodus eingestellt haben, können Sie in die Zelle springen, die Sie über die Tasten nach oben, unten, links und rechts bearbeiten müssen. Drücken Sie die Eingabetaste, um die Bearbeitungsstatus einzugeben, drücken
JQuery ("#grid_id").Die oben genannte ist eine Zusammenfassung der Verwendung von JQGrid, die Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!