Ajax-Daten-Grids mit CodeIgniter und jQuery zu bauen

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:

<?php
class Datagrid{
  private $hide_pk_col = true;
	private $hide_cols = array();
	private $tbl_name = '';
	private $pk_col	= '';
	private $headings = array();
	private $tbl_fields = array();
}
?>

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

public function __construct($tbl_name, $pk_col = 'id'){
	$this->CI =& get_instance();
	$this->CI->load->database();
	$this->tbl_fields = $this->CI->db->list_fields($tbl_name);
	if(!in_array($pk_col,$this->tbl_fields)){
		throw new Exception("Primary key column '$pk_col' not found in table '$tbl_name'");
	}
	$this->tbl_name = $tbl_name;
	$this->pk_col = $pk_col;
	$this->CI->load->library('table');
	
}

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

1	public function setHeadings(array $headings){
2	$this->headings = array_merge($this->headings, $headings);
3	}

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

public function ignoreFields(array $fields){
	foreach($fields as $f){
		if($f!=$this->pk_col)
			$this->hide_cols[] = $f;
	}
}

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:

1	public function hidePkCol($bool){
2	$this->hide_pk_col = (bool)$bool;
3	}

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:

private function _selectFields(){
	foreach($this->tbl_fields as $field){
		if(!in_array($field,$this->hide_cols)){
			$this->CI->db->select($field);
			// hide pk column heading?
			if($field==$this->pk_col && $this->hide_pk_col) continue;
				$headings[]= isset($this->headings[$field]) ? $this->headings[$field] : ucfirst($field);
		}
	}
	if(!empty($headings)){
		// prepend a checkbox for toggling 
		array_unshift($headings,"<input type='checkbox' class='check_toggler'>");
		$this->CI->table->set_heading($headings);
	}
	
}

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:

1	$headings[]= isset($this->headings[$field]) ? $this->headings[$field] : ucfirst($field);

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:

1	array_unshift($headings,"<input type='checkbox' class='dg_check_toggler'>");

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:

public function generate(){
	$this->_selectFields();
	$rows = $this->CI->db
			->from($this->tbl_name)
			->get()
			->result_array();
	foreach($rows as &$row){
		$id = $row[$this->pk_col];
		
		// prepend a checkbox to enable selection of items/rows
		array_unshift($row, "<input class='dg_check_item' type='checkbox' name='dg_item[]' value='$id' />");
		
		// hide pk column cell?
		if($this->hide_pk_col){
			unset($row[$this->pk_col]);
		}
	}
	
	return $this->CI->table->generate($rows);
}

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:

1	// prepend a checkbox to enable selection of items/rows
2	array_unshift($row, "<input class='dg_check_item' type='checkbox' name='dg_item[]' value='$id' />");

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

1	public static function createButton($action_name, $label){
2	return "<input type='submit' class='$action_name' name='dg_action[$action_name]' value='$label' />";
3	}

Ü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:

public static function getPostAction(){
// get name of submitted action (if any)
	if(isset($_POST['dg_action'])){
		return key($_POST['dg_action']);
	}
}

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...

public static function getPostItems(){
	if(!empty($_POST['dg_item'])){
		return $_POST['dg_item'];
	}
	return array();
}

... 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:

public function deletePostSelection(){
// remove selected items from the db
	if(!empty($_POST['dg_item']))
		return $this->CI->db
			->from($this->tbl_name)
			->where_in($this->pk_col,$_POST['dg_item'])
			->delete();
}

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'):

1	DELETE FROM my_table WHERE id IN (1,5,7,3,etc...)

..., 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:

class Datagrid{
	
	private $hide_pk_col = true;
	private $hide_cols = array();
	private $tbl_name = '';
	private $pk_col	= '';
	private $headings = array();
	private $tbl_fields = array();
	
	function __construct($tbl_name, $pk_col = 'id'){
		$this->CI =& get_instance();
		$this->CI->load->database();
		$this->tbl_fields = $this->CI->db->list_fields($tbl_name);
		if(!in_array($pk_col,$this->tbl_fields)){
			throw new Exception("Primary key column '$pk_col' not found in table '$tbl_name'");
		}
		$this->tbl_name = $tbl_name;
		$this->pk_col = $pk_col;
		$this->CI->load->library('table');
		
	}
	
	public function setHeadings(array $headings){
		$this->headings = array_merge($this->headings, $headings);
	}
	
	public function hidePkCol($bool){
		$this->hide_pk_col = (bool)$bool;
	}
	
	public function ignoreFields(array $fields){
		foreach($fields as $f){
			if($f!=$this->pk_col)
				$this->hide_cols[] = $f;
		}
	}
	
	private function _selectFields(){
		foreach($this->tbl_fields as $field){
			if(!in_array($field,$this->hide_cols)){
				$this->CI->db->select($field);
				// hide pk column heading?
				if($field==$this->pk_col && $this->hide_pk_col) continue;
				$headings[]= isset($this->headings[$field]) ? $this->headings[$field] : ucfirst($field);
			}
		}
		if(!empty($headings)){
			// prepend a checkbox for toggling 
			array_unshift($headings,"<input type='checkbox' class='dg_check_toggler'>");
			$this->CI->table->set_heading($headings);
		}
		
	}
	
	public function generate(){
		$this->_selectFields();
		$rows = $this->CI->db
				->from($this->tbl_name)
				->get()
				->result_array();
		foreach($rows as &$row){
			$id = $row[$this->pk_col];
			
			// prepend a checkbox to enable selection of items
			array_unshift($row, "<input class='dg_check_item' type='checkbox' name='dg_item[]' value='$id' />");
			
			// hide pk column?
			if($this->hide_pk_col){
				unset($row[$this->pk_col]);
			}
		}
		
		return $this->CI->table->generate($rows);
	}
	
	public static function createButton($action_name, $label){
		return "<input type='submit' class='$action_name' name='dg_action[$action_name]' value='$label' />";
	}
	
	public static function getPostAction(){
	// get name of submitted action (if any)
		if(isset($_POST['dg_action'])){
			return key($_POST['dg_action']);
		}
	}
	
	public static function getPostItems(){
		if(!empty($_POST['dg_item'])){
			return $_POST['dg_item'];
		}
		return array();
	}
	
	public function deletePostSelection(){
	// remove selected items from the db
		if(!empty($_POST['dg_item']))
			return $this->CI->db
				->from($this->tbl_name)
				->where_in($this->pk_col,$_POST['dg_item'])
				->delete();
	}

}

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:

CREATE DATABASE `dg_test`;
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `password` varchar(32) NOT NULL,
  `email` varchar(255) NOT NULL,
  UNIQUE KEY `id` (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

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

INSERT INTO `users` (`id`, `username`, `password`, `email`) VALUES
(1, 'david', '12345', 'david@domain.com'),
(2, 'maria', '464y3y', 'maria@domain.com'),
(3, 'alejandro', 'a42352fawet', 'alejandro@domain.com'),
(4, 'emma', 'f22a3455b2', 'emma@domain.com');

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

<?php
class Test extends CI_Controller{

	function __construct(){
		parent::__construct();
		$this->load->helper(array('datagrid','url'));
		$this->Datagrid = new Datagrid('users','id');
	}
	
	function index(){
		$this->load->helper('form');
		$this->load->library('session');

		$this->Datagrid->hidePkCol(true);
		$this->Datagrid->setHeadings(array('email'=>'E-mail'));
		$this->Datagrid->ignoreFields(array('password'));
		
		if($error = $this->session->flashdata('form_error')){
			echo "<font color=red>$error</font>";
		}
		echo form_open('test/proc');
		echo $this->Datagrid->generate();
		echo Datagrid::createButton('delete','Delete');
		echo form_close();
	}
	
	function proc($request_type = ''){
		$this->load->helper('url');
		if($action = Datagrid::getPostAction()){
			$error = "";
			switch($action){
				case 'delete' :
					if(!$this->Datagrid->deletePostSelection()){
						$error = 'Items could not be deleted';
					}
				break;
			}
			if($request_type!='ajax'){
				$this->load->library('session');
				$this->session->set_flashdata('form_error',$error);
				redirect('test/index');
			} else {
				echo json_encode(array('error' => $error));
			}
		} else {
			die("Bad Request");
		}
	}

}
?>

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:

<html>
<head>
	<title>Users Management</title>
	<script src="<?php echo base_url(); ?>js/jquery-1.6.3.min.js"></script>
	<script src="<?php echo base_url(); ?>js/datagrid.js"></script>
</head>
<body>
<?php
		$this->Datagrid->hidePkCol(true);
		if($error = $this->session->flashdata('form_error')){
			echo "<font color=red>$error</font>";
		}
		echo form_open('test/proc',array('class'=>'dg_form'));
		echo $this->Datagrid->generate();
		echo Datagrid::createButton('delete','Delete');
		echo form_close();
?>
</body>
</html>

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:

function index(){
	$this->load->helper('form');
	$this->load->library('session');
	$this->load->view('users');
}

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):

	.dg_form table{
		border:1px solid silver;
	}
	
	.dg_form th{
		background-color:gray;
		font-family:"Courier New", Courier, mono;
		font-size:12px;
	}
	
	.dg_form td{
		background-color:gainsboro;
		font-size:12px;
	}
	
	.dg_form input[type=submit]{
		margin-top:2px;
	}

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

1	$(function(){
2	// cool stuff here...
3	})

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.

 	$('.dg_form :submit').click(function(e){
		e.preventDefault();
		var $form = $(this).parents('form');
		var action_name = $(this).attr('class').replace("dg_action_","");
		var action_control = $('<input type="hidden" name="dg_action['+action_name+']" value=1 />');
		
		$form.append(action_control);
		
		var post_data = $form.serialize();
		action_control.remove();
		
		var script = $form.attr('action')+'/ajax';
		$.post(script, post_data, function(resp){
			if(resp.error){
				alert(resp.error);
			} else {
				switch(action_name){
					case 'delete' :
						// remove deleted rows from the grid
						$form.find('.dg_check_item:checked').parents('tr').remove();
					break;
					case 'anotherAction' :
						// do something else...
					break;
				}
			}
		}, 'json')
	})

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:

1	// finds the form
2	var $form = $(this).parents('form');
3	// extracts the name of the action
4	var action_name = $(this).attr('class').replace("dg_action_","");

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

1	// create the hidden input
2	var action_control = $('<input type="hidden" name="dg_action['+action_name+']" value=1 />');
3	// add to the form
4	$form.append(action_control);

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.

1	action_control.remove();

"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:

...
	var script = $form.attr('action')+'/ajax';
	$.post(script, post_data, function(resp){
		if(resp.error){
			alert(resp.error);
		} else {
			switch(action_name){
				case 'delete' :
					// remove deleted rows from the grid
					$form.find('.dg_check_item:checked').parents('tr').remove();
				break;
				case 'anotherAction' :
					// do something else...
				break;
			}
		}
	},'json')

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:

	$('.dg_check_toggler').click(function(){
		var checkboxes = $(this).parents('table').find('.dg_check_item');
		if($(this).is(':checked')){
			checkboxes.attr('checked','true');
		} else {
			checkboxes.removeAttr('checked');
		}
	})

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!