DataGrid in EasyUi zeigt Daten in Tabellenformular an und bietet eine umfassende funktionale Unterstützung für die Auswahl, Sortierung, Gruppierung und Bearbeitung von Daten. DataGrid wurde entwickelt, um die Entwicklungszeit zu verkürzen und Entwickler daran zu hindern, spezifische Kenntnisse zu haben. Es ist leicht und reichen. Zellverschmelzung, Multi-Säulen-Titel, gefrorene Säulen und Fußzeile sind nur einige der Funktionen.
1. Überprüfen Sie den Inhalt von Abschnitt 4
In Abschnitt 4 haben wir Easyui verwendet, um die Menüleiste links zu erstellen, und die entsprechende Registerkarte wird rechts angezeigt, indem Sie auf die Menüoption klicken. In diesem Abschnitt verwenden wir DataGrid, um den Registerkarte rechts zu vervollständigen. Schauen wir uns zunächst die letzte aIndex.jsp -Datei in Abschnitt 4 an (siehe auch den Inhalt in Abschnitt 4):
2. verschiedene Möglichkeiten zum Erstellen von DataGrid -Steuerelementen
DataGrid -Anzeigedaten sind im JSON -Format, sodass wir zuerst die vom Hintergrund erhaltenen Daten in das Jason -Format verpacken und an die Rezeption weitergeben, um die DataGrid anzeigen zu lassen. In diesem Abschnitt erhalten wir keine Daten aus dem Hintergrund. Erstellen Sie zuerst eine .json -Datei, die Daten im selben Format enthält. Dann lassen wir DataGird anzeigen, die Anzeigefunktion zuerst gut erstellen und dann die Hintergrunddaten anfordern.
Schauen wir uns zunächst das Format der DataGrid -Anzeige aus dem Referenzdokument von EasyUi an, wie in der folgenden Abbildung gezeigt:
Wir schauen über das Referenzdokument hinunter und stellen fest, dass der DataGrid -Speicherplatz über <table> erstellt wird, und es gibt drei Möglichkeiten, ihn zu erstellen:
Das erste: Erstellen Sie ein DataGrid aus einem vorhandenen Tabellenelement, definieren Sie Spalten, Zeilen und Daten in HTML.
Der zweite Typ: Erstellen Sie eine DataGrid -Steuerung über das <table> -Tag. Verwenden Sie das <Th> -Tag, um die Spalten innerhalb der Tabelle zu definieren.
Der dritte Typ: Verwenden Sie JavaScript, um eine DataGrid -Steuerung zu erstellen.
Wir übernehmen den dritten Typ und verwenden JS zum Erstellen von DataGrid Control. Zunächst müssen wir eine Datei vorbereiten, in der JSON -Formatdaten gespeichert sind. Es gibt mehrere JSON-Dateien unter Webroot/jQuery-Easyui-1.3.5/Demo/DataGrid/. Wir wählen einen DataGrid_Data1.json aus, kopieren Sie sie in das Webroot -Verzeichnis, ändern die Parameter und werden die Daten in dieser JSON -Datei später anzeigen. wie folgt:
{"Total": 10, "Zeilen": [{"Code": "Fi-SW-01", "ProductName": "Koi", "Preis": 10.00}, {"Code": "K9-DL-01", "ProductName": "Dalmation", "Preis": 12.00}, "ProductName": "Price", "Price": 12.00},, "ProductName": "Price", "Price": 12.00},, "ProductName": "Price", "Price": 12.00},, "productName": "preis": 12.00}, "productName": "preis", "preis": 12.00}, "productname": "preis": 12.00}, "productname": "preis": 12.00}, "productname": "preis": 12.00}, {"Code": "RP-SN-01", "ProductName": "Rattlesnake", "Preis": 12.00}, {"Code": "Rp-li-02", "ProductName": "Iguana", "Preis {"code":"FL-DSH-01","productname":"Manx","price":12.00}, {"code":"FL-DLH-02","productname":"Persian","price":12.00}, {"code":"FL-DLH-02","productname":"Persian","price":12.00}, {"Code": "AV-CB-01", "ProductName": "Amazon Parrot", "Preis": 92.00}, {"Code": "AV-CB-03", "ProductName": "Amazon Parrot", "Preis": 92.00}]} Wir können sehen, dass das JSON -Datenformat: "Key1": value1, "key2": value2 lautet. Jeder Wert kann ein Array sein und neue Jason -Daten werden im Array gespeichert.
Mit der JSON -Datei können wir als nächstes die DataGrid -Steuerung entwerfen. Das gesamte DataGrid ist in query.jsp konzipiert, da der zu angezeigte Inhalt der Inhalt in query.jsp ist. Schauen wir uns die Seite query.jsp an:
<%@ page Language = "java" import = "java.util. $ (function () {$ ('#dg'). datagrid ({// Die URL -Adresse der Anforderungsdaten wird geändert, um unsere eigene URL -URL anzufordern: 'datagrid_data.json', loadmsg: 'laden ...', ', Queryparams: {Typ:' '}, // Parameter //. Setzen Sie keinen horizontalen Scroll -Balken. + index + "," + row) if (index % 2 == 0) {return 'Hintergrund-Color: #ffff;'; Wenn die Breite größer als 250 ist, wird die Bildlaufleiste angezeigt, aber die Spalte gefroren ist nicht in den Scroll -Balken -Frozecolumns: [{Feld: 'Kontrollkästchen', Kontrollkästchen: True}, {Feld: 'Code', Titel: 'Nummer', Breite: 200}], // Konfigurieren Sie das Kolumnenfeld: Das Kolumnen -Feld: Der Name der Spalte //. Titel, der für Personen angezeigt wird, um Spalten zu sehen: [[{Feld: 'ProductName', Titel: 'Kategorie Name', Breite: 100, // Verwenden Sie, um den Wert der aktuellen Spalte zu formatieren, die Rückgabe ist die endgültige Datenformaterin: Funktion (Wert, Zeile, Index) {return "<span>" + Wert + "</span>"; }}, {field: 'price', title: 'price', width: 100, styler: function (value, index) {// den Stil der aktuellen Zelle festlegen, und die zurückgegebene Zeichenfolge ist direkt an das Style -Attribut // console.info ("val:" + value + "," + Row + "," Index: " + Index). }}}]}); }); </script> </head> <body> <table id = "dg"> </table> </body> </html>3. Eigenschaften der DataGrid -Steuerung
Wir können sehen, dass Sie, wenn Sie JS zum Erstellen einer DataGrid -Steuerung verwenden, nur ein <table> -Tag benötigen, das hauptsächlich in JS durchgeführt wird. Die Steuerelemente von DataGrid sind sehr leistungsfähig. Hier machen wir hauptsächlich grundlegende Displays. Weitere weitere Funktionen finden Sie unter EasyUi -Entwicklungsdokumenten. Wir führen jetzt eine Analyse der obigen Abfrage.jsp -Datei durch:
Zunächst hat die DataGrid -Steuerung zwei Eigenschaften: eine ist die DataGrid -Eigenschaft und die andere ist die Spalteneigenschaft . Wie der Name schon sagt, ist die DataGrid -Eigenschaft ein Attribut, das der gesamten DataGrid -Steuerung hinzugefügt wurde, und die Spalteneigenschaft ist für eine bestimmte Spalte. In jedem gibt es viele Attribute, und hier werden nur einige grundlegende und häufig verwendete Attribute erstellt.
Das Wichtigste in der DataGrid -Eigenschaft ist die Spalteneigenschaft, die ein Array ist, das mehrere Spalten erstellen kann. Siehe den Screenshot unten:
Schauen wir uns die Details im Attribut der Spalten an:
Im Spaltenattribut repräsentiert das Feld den Feldnamen, der dem Schlüssel der JSON -Daten entspricht, und dann ist der Titel der Titel, der für den Benutzer angezeigt wird. Siehe die Datei query.jsp. Es gibt einige andere grundlegende Attribute, die auf das EasyUi -Dokument verwiesen werden können. Die beiden wichtigeren und häufig verwendeten Eigenschaften in Säuleneigenschaften sind Formatierer und Styler, die verwendet werden, um den Wert der aktuellen Spalte zu formatieren und Zellstile zu setzen. Schauen wir uns diese beiden Eigenschaften hauptsächlich an:
Lassen Sie uns ausführlich analysieren, wie diese beiden Spalteneigenschaften in dem Attribut der Spalten in query.jsp oben verwendet werden:
{Feld: 'ProductName', Titel: 'Kategorie Name', Breite: 100, // Verwenden Sie, um den Wert der aktuellen Spalte zu formatieren. Funktion (Wert, Zeile, Index) {// Setzen Sie den Stil der aktuellen Zelle, und die zurückgegebene Zeichenfolge ist direkt an das Style -Attribut // console.info ("val:" + Wert + ", Zeile:" + row + ", Index:" + index) if (Wert <20) {// Wenn der Wert weniger als 20 Rückgabe ist. Color: Red; '; // Zeigen Sie den Wert in rot}}}Schauen wir uns dann einige Eigenschaften der Datagrid -Steuerung an:
Die URL stellt die zu angezeigte Datenquelle dar. Setzen Sie als DataGrid_Data.json hier, bedeutet, dass die Datenquelle diese JSON -Datei ist und im Webroot -Verzeichnis platziert ist.
LoadMSG repräsentiert die Informationen, die beim Laden von Daten angezeigt werden.
Queryparams bedeutet die Parameter, die an den Hintergrund übergeben wurden, und können hier nicht verwendet werden, da wir noch nicht mit dem Hintergrund verbunden sind, sondern nur eine JSON -Datei anzeigen, die später verwendet wird.
Nachdem Fitcolums auf True eingestellt sind, bedeutet dies, dass die horizontale Erweiterung automatisch horizontal erweitert wird und die Breite des adaptiven Netzes angepasst wird. Auf diese Weise gibt es in horizontaler Richtung keine Scrollstangen, und es besteht keine Notwendigkeit, die Breite einzustellen.
Breite ist die Breite. Wenn die Daten zu lang sind und nicht angezeigt werden können, wird in horizontaler Richtung eine Bildlaufleiste angezeigt.
Nachdem Striped auf wahr ist, bedeutet dies, dass die Zebrafabra -Kreuzung angezeigt wird. Dies ist ein Displaystil. Probieren Sie es einfach aus;
Wenn Nowrap auf True eingestellt ist, bedeutet dies, dass bei zu vielen Daten nicht in Zeilen eingewickelt wird. Andernfalls ist es hässlich, wenn zu viele Daten in einer bestimmten Zeile vorhanden sind.
Wenn die Paginierung auf wahr eingestellt ist, bedeutet dies, dass die Paging -Funktion aktiviert ist.
Wenn SingleSelect auf wahr eingestellt ist, dürfen nur einzelne Zeilen überprüft werden. Die Auswahl aller Funktionen ist ungültig und wird hauptsächlich für die Kontrollkästchen in der vorderen Spalte verwendet.
FrozeColums sollen gefrorene Spalten einstellen, und die in Frezencolums eingestellten Spalten ändern die Größe nicht. Wenn {Feld: 'Kontrollkästchen', CheckBox: True} festgelegt ist, bedeutet dies, dass dies eine Kontrollkästchenspalte ist, die für den Benutzer ausgewählt ist. Wenn die obige SingleSelect festgelegt ist, kann nur einer ausgewählt werden, nicht alle von ihnen;
Rowstyler ist der Stil aller Reihen. Die beiden Parameter sind Zeilenindex und Zeile. Das obige ist festgelegt, dass sogar Zeilen weiß und ungerade Zeilen gelb sind.
Warten Sie ... Es gibt andere Eigenschaften von DataGrid -Steuerelementen, Sie können sich auf die technische Dokumentation von Easyui beziehen, und ich werde sie hier nacheinander nicht erklären.
4. Effekt der DataGrid -Datenanzeige
Okay, nach Abschluss von query.jsp starten wir Tomcat neu, geben dann den Hintergrund ein, klicken auf die Kategorieverwaltung in der Menüleiste links, und rechts wird eine Registerkarte Kategorieverwaltung angezeigt, und dann werden die von uns angegebenen JSON -Daten angezeigt. Diese Jason -Daten werden selbst in das Webroot -Verzeichnis aufgenommen. Später werden wir JSON und Struts integrieren, um die aus dem Hintergrund übertragenen JSON -Daten dynamisch zu erhalten.
(HINWEIS: Am Ende werde ich den Quellcode -Download des gesamten Projekts angeben! Jeder kann gerne sammeln oder teilen.)
Originaladresse: http://blog.csdn.net/eson_15/article/details/51322262
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.