Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Ajax-Daten-Grids mit CodeIgniter und jQuery zu bauen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Wilhelm Wolf (you can also view the original English article)

In dieser Lektion erstellen wir eine CodeIgniter-library, die es uns ermöglicht Daten generieren, die Netze automatisch für die Verwaltung von Datenbank-Tabelle. Ich erkläre jeden Schritt erforderlich, um diese Klasse erstellt haben; so werden Sie wahrscheinlich lernen, einige neue OOP-Techniken/Konzepte in den Prozess!

Als bonus, wir fahren weiter zu schreiben, jQuery-code, ermöglicht es einem Benutzer, die Daten zu aktualisieren raster Inhalt, ohne zu warten, für eine Aktualisierung der Seite.


 Bitte Beachten Sie,...

Dieses tutorial setzt Voraus, dass Sie ein bescheidenes Verständnis von der CodeIgniter-und jQuery-frameworks.

Was ist ein Datenblatt?

 Ein datagrid ist eine Tabelle, die zeigt den Inhalt einer Datenbank oder Tabelle zusammen mit der Sortierung steuert.

Ein datagrid ist eine Tabelle, die zeigt den Inhalt einer Datenbank oder Tabelle zusammen mit der Sortierung steuert.  In diesem tutorial werden wir die Aufgabe mit der Bereitstellung dieser Funktionalität, aber auch die Einsparung der Benutzer darauf warten, bis die Seite zu aktualisieren, jedes mal, wenn eine operation durchgeführt wird.  Dank jQuery, wird dies eine ziemlich einfache Aufgabe!

Was ist mit den Usern, die kein Javascript aktiviert haben?  Keine Sorge, wir werden das kompensieren!


Schritt 1: Erstellen einer Daten-Grid-Generator-Klasse

 Wir wollen ein tool bauen, dass wird es uns ermöglichen, erstellen Datenblätter dynamisch für jede Datenbank-Tabelle, die wir haben.  Dies bedeutet der code ist nicht gebunden an irgendeine spezifische Struktur der Tabelle, und damit unabhängig von den Daten selbst.  Alle coder (Entwickler, wer nutzt unsere Klasse) muss wissen, ist der name der Tabelle, die verwandelt sich in ein Gitter, und der Primärschlüssel für diese Tabelle. Hier ist das Vorwort der Klasse, dass wir die Entwicklung für den größten Teil von diesem tutorial:

 Die Datagrid-Klasse könnte auch Hinzugefügt werden, um die Anwendung/Ordner "library", aber wir werden es hinzufügen, wie der Helfer für das CodeIgniter-framework.  Warum?  Weil das laden von Bibliotheken, die nicht zulässt, dass uns die Argumente an die Klasse' Konstruktor, so laden Sie es als Helfer das problem zu lösen. Dieser Punkt macht mehr Sinn für Sie, wenn wir fertig sind schreiben der Konstruktor.

Die Klasse' Konstruktor-Methode

Wir haben viel schon Los; aber keine Sorge, ich werde alles erklären, für Sie im nächsten Absatz.

 Der Konstruktor benötigt zwei Argumente: das erste ist der name der Tabelle in der Datenbank, die Sie anzeigen möchten, wie ein datagrid an den Benutzer; der zweite Parameter ist der name der Spalte, die als Primärschlüssel für die Tabelle (dazu später mehr).  Innerhalb des Konstruktors Körper, instanzieren wir die CodeIgniter-Objekt, die Objekt Datenbank und die HTML-Tabelle der Klasse/Bibliothek.  All dies wird erforderlich sein, während eine Datagrid-Objekts Lebensdauer und sind bereits gebaut, in das CI-framework. Beachten Sie, dass wir auch überprüfen, ob der Primärschlüssel existiert wirklich in der gegebenen Tabelle, und, falls nicht, werfen wir eine exception, die den Fehler meldet. Nun die $this->tbl_fields member-variable verfügbar sein wird für die spätere Verwendung, so dass wir nicht haben, Holen Sie die Datenbank erneut.

 "Wir können mit dem Befehl, $CI->db->list_fields($tbl_name) zum abrufen der Namen aller Felder einer Tabelle hat. Jedoch, für eine bessere Leistung, ich empfehle das Zwischenspeichern der Ergebnisse."

 Methode für die Customizing-Tabelle, die die Überschriften

 Dies ermöglicht Ihnen, passen Sie die überschriften Ihrer Daten-raster-Tabelle - , ist, mit es, können Sie überschreiben die original-Spalten-Namen für bestimmte Felder der Tabelle.  Es nimmt ein assoziatives array wie dieses: regdate => "Datum der Registrierung".  Anstatt nur von der technischen, "Regdate" wie die überschrift der Spalte für die Art der Daten, haben wir eine lesbare Titel in seinen Platz. Der code, der verantwortlich für die Anwendung der Rubriken zeigte kurz.

 Methode zum Ignorieren/Ausblenden von Felder der Tabelle

 ignoreFields erhält ein array mit den Felder ignoriert werden, wenn das abrufen von Daten aus der Datenbank.  Dies ist nützlich, wenn wir Tabellen mit vielen Feldern, aber wir wollen nur verstecken, ein paar von Ihnen.  Diese Methode ist intelligent genug, um zu verfolgen, Versuch zu ignorieren das primäre Schlüsselfeld und dann überspringen. Dies ist so, weil die primary key kann nicht ignoriert werden, aus technischen Gründen (Sie werden sehen, warum kurz).  Trotzdem, wenn Sie sich verstecken wollen, die primary key-Spalte erscheint in der Benutzeroberfläche verwenden, können Sie die hidePkCol Methode:

 Diese Methode erhält einen booleschen Wert, um anzugeben, wenn wir uns verstecken wollen, die Primärschlüssel-Spalte, damit es nicht zeigen, bis in das Daten-grid.  Manchmal, es ist eine hässliche Idee, um die Anzeige der pkey-Daten, die in der Regel ein numerischer code ohne Bedeutung für den Benutzer.

 Nächste Instanz-Methode:

 Hier haben wir eine helper-Methode; deshalb hat es der "private" - Modifizierer vorangestellt ist ein underline-Zeichen (code convention).  Es wird von der generate () - Methode - erklärt kurz, um die entsprechenden Felder der Tabelle ausgewählt und auch die entsprechenden Rubriken eingestellt die Tabelle (generator) Objekt.  Beachten Sie die folgende Zeile:

 Dies ist, wo wir die benutzerdefinierte Kopfzeilen oder greifen auf die Standard diejenigen, wenn keins angegeben ist. Wenn die pk-Spalte soll ausgeblendet werden, dann ist es die überschrift, werden übersprungen.  Beachten Sie auch die folgende Zeile:

Der obige Befehl weist das Programm voranstellen eines "Master" - Kästchen, wie die erste überschrift der Tabelle.  Das Markierungsfeld unterscheidet sich von anderen Checkboxen im Netz, die es einem Benutzer ermöglicht, aktivieren bzw. deaktivieren Sie alle Checkboxen in nur einem Arbeitsgang.  Dieses Umschalten wird die Funktionalität implementiert werden, die in wenigen Augenblicken mit einem einfachen jQuery-code-snippet.

Methode zum Generieren/Rendern des Datagrid

Jetzt kommt die Sache, dass macht die eigentliche Arbeit für uns:

 Die Methode generieren, wie der name schon sagt, ist zuständig für die Generierung der Daten raster selbst.  Rufen Sie diese Methode nur, wenn Sie so konfiguriert haben, dass das Objekt nach Ihren Bedürfnissen.  Das erste, was es tut, ist Anruf die $this->_selectFields () - Methode, um die Aktionen auszuführen, die wir bereits erwähnt. Jetzt hat es zum abrufen aller Zeilen aus der Datenbank und dann die Schleife durch Sie, hinzufügen von Checkboxen am Anfang jeder Zeile:

Innerhalb der foreach-Schleife in der Methode erstellen, wenn die $this->hide_pk_col flag auf true gesetzt ist, dann müssen wir entfernt den Eintrag primary key in der $row-array, damit es nicht zu zeigen, wie eine Spalte, wenn der $this->CI->Tabelle-Objekt verarbeitet alle Zeilen und erstellt den endgültigen html-output.  An diesem Punkt, es ist okay, entfernen Sie den Primärschlüssel, wenn notwendig, da wir Sie nicht mehr benötigen diese Informationen. Ein

 Aber was macht der Benutzer mit der ausgewählten/checked Zeilen?  Für diese Antwort habe ich bereit ein paar weitere Methoden. Die erste ermöglicht es uns, zu schaffen "action buttons", ohne zu wissen, alle technischen details darüber, wie das grid-system arbeitet intern:

Methode für das Hinzufügen von Schaltflächen zu einem Daten-Grid-Form

 Übergeben Sie einfach den Namen der Aktion als erstes argument und ein zweites argument geben Sie die Beschriftung für die generierte Schaltfläche.  Ein class-Attribut wird automatisch generiert, Taste, so können wir spielen, um mit es sich leichter, wenn wir es in unserem JavaScript. Aber, wie wir wissen, wenn eine bestimmte Aktion aus-Taste wurde gedrückt, indem der Benutzer? Die Antwort finden Sie in der nächsten Methode:

 Yep! Eine weitere statische Methode, die uns hilft, wenn wir den Umgang mit Formularen.  Wenn alle Daten raster vorgelegt worden ist, diese Methode den Namen der Aktion ("operation"), verbunden mit dem submit-Ereignis.  Außerdem noch ein praktisches Werkzeug für die Verarbeitung unserer datagrid-Formen ist...

 ... das gibt ein array mit den ausgewählten ids, so können Sie verfolgen, welche Zeilen ausgewählt wurden, auf das Netz und führen Sie anschließend eine Aktion mit Ihnen.  Als ein Beispiel von, was getan werden kann mit einer Auswahl von Datensatz-ids, die ich vorbereitet habe eine andere Methode - es wird eine Instanz-Methode, und nicht eine statische, denn Sie macht die Nutzung der Instanz des Objekts Ressourcen, um seine Wirtschaft:

 Wenn mindestens eine checkbox aktiviert wurde, die deletePostSelection () - Methode erzeugen und ausführen einer SQL-Anweisung wie folgt aus (angenommen $tbl_name='meine_tabelle' und $pk_col='id'):

 ..., die effektiv entfernt die ausgewählten Zeilen aus der Persistenzschicht. Es könnte sein, mehr Operationen, die Sie hinzufügen können, um eine Daten-grid, aber das hängt von den Besonderheiten Ihres Projektes.  Als Tipp, man könnte diese Klasse erweitern, um, sagen wir, InboxDatagrid, so, jenseits der deletePostSelection Methode, es könnte auch zusätzliche Operationen, wie moveSelectedMessagesTo($Ort), etc...

Putting alles zusammen

 Nun, wenn Sie haben, folgte diesem tutorial Schritt für Schritt, Sie sollten am Ende mit etwas, das ähnlich der folgenden:

 Hinweis: vergessen Sie nicht, speichern Sie diese Datei als datagrid_helper.php und setzen Sie es in "application/helpers/"


Schritt 2: Testen der Datagrid-Helper-Klasse mit CodeIgniter Controller

 Wir werden nun das erstellen einer einfachen test-controller und laden Sie die Datagrid-Klasse als Helfer in seinem Konstruktor.  Aber vorher sollten wir definieren eine dummy-Datenbank-Tabelle und füllen es mit einigen Beispieldaten.

 Führen Sie die folgende SQL erstellen die Datenbank und der Benutzer-Tabelle:

Als Nächstes fügen Sie einige Benutzer hinzu:

 Jetzt speichern Sie den folgenden code als "test.php," und fügen Sie Sie der "application/controllers" - Ordner:

 Eine Instanz dieser Klasse erstellt und übergeben eine Referenz auf die $this->Datagrid-Mitglied.  Beachten Sie, dass wir das abrufen von Daten aus einer Tabelle namens "users", deren Primärschlüssel ist die Spalte "id"; klicken Sie dann auf die index-Methode wir nehmen die folgenden Schritte aus: konfigurieren Sie die Datagrid-Objekt, machen Sie Sie in einem Formular mit einem löschen-button Hinzugefügt, um es und sehen, ob alles wie erwartet funktioniert:

Frage: Was passiert, wenn das Formular gesendet wird?

 Antwort: Das "Test::proc ()" - Methode kümmert sich um die Bearbeitung der form und die Wahl der richtigen operation gegen die ids, die ausgewählt wurden, die von der form den Absender.  Es kümmert sich auch um die AJAX-Anfragen, so wird es echo ein JSON-Objekt an den client zurück.  Diese AJAX-aware-Funktion in handliches kommen, wenn jQuery kommt in Aktion, die ist jetzt!

 "Es ist immer eine gute Idee, um das erstellen von web-Anwendungen, die kompensiert wird, wenn JavaScript/AJAX nicht verfügbar ist.  Dieser Weg, einige Benutzer eine reichere und schnellere Erfahrung, während diejenigen, die ohne aktiviertes JavaScript wird immer noch in der Lage sein, um die Anwendung zu verwenden in der Regel."


Schritt 3: Implementieren von Ajax (jQuery ist die Rettung!)

 Wenn der Benutzer auf die Schaltfläche klickt (oder eine beliebige andere Aktion-button), wir möchten Sie vielleicht, um zu verhindern, dass die Seite Neuladen und das generieren sich alles wieder ein; dadurch könnte der Benutzer unserer Anwendung einschlafen!  Zur Umgehung dieses Problems wird nicht eine schwierige Aufgabe, wenn man sich auf die jQuery-Bibliothek.  Da dies nicht ein "Einsteiger" tutorial, ich werde nicht gehen durch alle Einzelheiten, wie man die Bibliothek, wie es auf der Seite, etc. Sie erwartet, dass Sie diese Schritte auf Ihrem eigenen.

 Erstellen Sie einen Ordner namens "js", fügen Sie die jQuery-Bibliothek, und erstellen Sie eine view-Datei mit dem Namen users.php.  Öffnen Sie diese neue Datei, und fügen Sie hinzu:

Wussten Sie, dass wir umgezogen haben den code Weg von Test::der index und die in der neuen view-Skript?  Das heißt, wir müssen ändern Sie den Test::index () - Methode entsprechend:

Das ist besser.  Wenn Sie wollen, fügen Sie einige styling an das Netz, können Sie die folgenden CSS (oder ein besseres layout auf Ihrem eigenen):

Nun, erstellen Sie bitte ein "datagrid.js"  Datei, legte es auf die "js" - Verzeichnis, und starten Sie mit diesem code:

Innerhalb dieser Zeit werden wir code schreiben, der beauftragt werden, mit der Kontrolle bestimmter Ereignisse übermitteln, sobald die Seite vollständig geladen wurde.  Das erste, was wir tun müssen, ist zu verfolgen, wenn ein Benutzer klickt auf eine Schaltfläche "senden" auf das Datenblatt-Formular, und senden die Daten werden auf dem server verarbeitet.

 Alternativ könnten wir begonnen haben, mit so etwas wie: $('.dg_form').submit(function(e){...}).  Aber da ich möchte, um zu verfolgen, welche Taste gedrückt wurde, und extrahieren Sie die Namen der gewählten Aktion basiert auf Sie, ich bevorzuge die Bindung eines Ereignis-handler auf den submit-button selbst und gehe dann meinen Weg in der Hierarchie der Knoten, um die form zu finden, die der gedrückten Taste gehört:

 Als Nächstes fügen wir ein hidden-input-element in das Formular ein element, um anzugeben, welche Aktion gesendet wird:

 Dies ist notwendig, da die Funktion nicht prüfen, die Schaltfläche Absenden, um eine gültige Eingabe. So müssen wir das hack, die beim serialisieren der Formulardaten.

 "Vergessen Sie nicht: die Funktion ignoriert die senden-Schaltfläche, indem es Sie als nur ein weiteres Stück von markup-Müll!"

Senden von Formulardaten an den Server

 Weiter gehen wir zu Holen Sie sich die action-Attribut im form-element und fügen Sie die Zeichenfolge "/ajax", die url, also die Methode wird wissen, dass dies in der Tat ein AJAX-request. Danach verwenden wir jQuery.post-Funktion zum senden der Daten, die verarbeitet werden, indem der entsprechende controller, server-Seite, und dann fangt die Antwort-Veranstaltung mit einer registrierten callback - /Schließung:

Beachten Sie, dass wir Fragen, die Antwort kodiert werden als "json", da wir auf der Durchreise sind, die string als viertes argument des $.post-Funktion.  Die Inhalte der Rückruf, Umgang mit der server-Antwort sollte ziemlich einfach zu begreifen; es bestimmt, ob ein Fehler aufgetreten ist, und, wenn ja, alarmiert.  Ansonsten wird es zeigen, dass die Aktion wurde erfolgreich verarbeitet (in diesem Fall, wenn es sich um eine " Aktion, wir löschen die Zeilen, die Bezug auf die ids, die der Benutzer ausgewählt hat).


Schritt 4: Überprüfen, ob Alle oder Nichts!

 Das einzige, was jetzt noch fehlt, ist der toggle-Funktionalität, die ich früher versprochen.  Wir müssen registrieren einer callback-Funktion, wenn die "Master" - Kästchen mit einem class-Attribut auf "dg_check_toggler" - geklickt wird. Fügen Sie den folgenden code-snippet nach dem vorhergehenden:

Wenn die "toggler" checkbox angeklickt ist, wenn geht es um einen Zustand "geprüft", dann werden alle Zeilen aus der zugehörigen Daten-grid wird gleichzeitig geprüft werden; ansonsten wird alles deaktiviert.


 Abschließende Gedanken

 Wir haben nicht erreicht die Spitze des Eisbergs, wenn es um die Daten-grids für komplexe content-management-Systeme.  Andere Merkmale, die beweisen könnte, nützlich zu sein, sind:

  •  Sortierung der Daten raster von Spaltennamen
  • Paginierung links für das surfen im Daten-grid
  • Bearbeiten/Ändern von links für die Aktualisierung einer einzelnen Zeile die Daten
  •  Suche Mechanismus um Ergebnisse zu filtern

Vielen Dank für das Lesen. Wenn Sie möchten, eine follow-up-tutorial, lasst mich in den Kommentaren wissen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.