jQuery EasyUI Aplikacje - Tworzenie aplikacji CRUD

Zbieranie danych i właściwe zarządzanie danymi jest częstym aplikacja sieciowa konieczne. CRUD pozwala nam wygenerować listę stron i edytować rekordy bazy danych. Ten poradnik pokazuje, jak używać jQuery EasyUI ramy do wdrożenia CRUD DataGrid.

Będziemy używać następujących wtyczek:

• DataGrid: Wyświetla listę danych do użytkownika.
• dialogowe Tworzenie lub edytowanie pojedynczej informacji o użytkowniku.
• formularz: Formularz zgłaszania danych.
• messager: pokazuje informacje operacyjne.

Krok 1: Przygotowanie bazy danych

Będziemy korzystać z bazy danych MySQL do przechowywania informacji o użytkownikach. Tworzenie bazy danych i tabeli "użytkownicy".

Krok 2: Tworzenie DataGrid, aby wyświetlić informacje o użytkowniku

Utworzono bez kodu JavaScript DataGrid.

<Table id = "DG" title = "Moi Użytkownicy" class = "easyui-DataGrid" style = "width: 550px; height: 250px"
		url = "get_users.php"
		toolbar = "# toolbar"
		rownumbers = "true" fitColumns = "true" singleSelect = "true">
	<THEAD>
		<Tr>
			<Th pole = "Imię" width = "50"> Imię </ th>
			<Pole Th = "Nazwisko" width = "50"> Nazwisko </ th>
			<Pole Th = "phone" width = "50"> Telefon </ th>
			<Th pole = "email" width = "50"> e-mail </ th>
		</ Tr>
	</ THEAD>
</ Table>
<Div id = "toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()"> Nowy </a> użytkownika
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()"> </a> Edit User
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()"> Usuń </a> użytkownika
</ Div>

Nie trzeba pisać żadnego kodu JavaScript, który może być wyświetlany na liście użytkowników, jak pokazano poniżej:

DataGrid za pomocą właściwości "URL" i przypisany 'get_users.php', używany do pobierania danych z serwera.

Plik z kodem get_users.php

$ R = mysql_query ( "select * from użytkowników ');
$ Result = array ();
while ($ row = mysql_fetch_object ($ rs)) {
	array_push ($ wynik, $ row);
}

echo json_encode ($ result);

Krok 3: Tworzenie okna dialogowego Form

Używamy tego samego okna dialogowego, aby utworzyć lub edytować użytkownika.

<Div id = "DLG" class = "easyui-dialog" style = "width: 400px; height: 280px; padding: 10px 20px"
		Zamknięte = "true" przyciski = "# DLG przyciski">
	<Div class = "ftitle"> Informacje o użytkowniku </ div>
	<Form id = "fm" method = "post">
		<Div class = "fitem">
			<Label> Imię: </ label>
			<Nazwa Wejście = "Imię" class = "easyui-validatebox" wymagane = "true">
		</ Div>
		<Div class = "fitem">
			<Label> Nazwisko: </ label>
			<Nazwa Wejście = "Nazwisko" class = "easyui-validatebox" wymagane = "true">
		</ Div>
		<Div class = "fitem">
			<Label> Telefon: </ label>
			<Nazwa Wejście = "phone">
		</ Div>
		<Div class = "fitem">
			<Label> E-mail: </ label>
			<Nazwa Wejście = "email" class = "easyui-validatebox" VALIDTYPE = "email">
		</ Div>
	</ Form>
</ Div>
<div id = "DLG przyciski">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()"> Zapisz </a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> Anuluj </a>
</ Div>

Dialog ten został utworzony, ani żaden kod javascript:

Krok 4: Tworzenie i edycja użytkownikowi osiągnięcie

Podczas tworzenia użytkownik otwiera okno dialogowe i usunąć dane formularza.

funkcjonować newuser () {
	$ ( '# Dlg') dialogowe ( "open") okno ( 'setTitle "," Nowy użytkownik ") ..;
	. $ ( '# Fm') Forma ( "clear");
	url = 'save_user.php';
}

Podczas edycji użytkownika, okno otwiera się i wczytuje dane formularza z wybranego w DataGrid rzędu.

var row = $ ( '# DG ") DataGrid (" getSelected ") .;
if (row) {
	$ ( '# Dlg') dialogowe ( "open") okno ( 'setTitle "," Edycja użytkownika ") ..;
	. $ ( '# Fm') forma ( "obciążenie", wiersz);
	url = 'update_user.php id =? + row.id;
}

Formularz zwrotny 'url' jest przechowywana, gdy dane użytkownika są zapisywane adres URL.

Krok 5: Zapisz dane użytkownika

Używamy poniższy kod, aby zapisać dane użytkownika:

Funkcja saveUser () {
	$ ( '# Fm'). Postać ( 'submit', {
		url: adres URL,
		onSubmit: function () {
			return $ (this) .form ( "validate");
		}
		success: function (result) {
			var result = eval ( '(' + skutkować + ')');
			if (result.errorMsg) {
				$ .messager.show ({
					Tytuł: "Error"
					MSG: result.errorMsg
				});
			} Else {
				$ ( '# Dlg') dialogowe ( "Zamknij") ;. // Zamknij okno
				$ ( '# Dg ") DataGrid (" reload ") ;. // Odśwież dane użytkownika
			}
		}
	});
}

Przed złożeniem formularza, funkcja "onSubmit 'nazywa, funkcja służy do weryfikacji wartości pól formularza. Gdy wartości pól formularza przesłany pomyślnie, należy zamknąć okno i przeładować dane DataGrid.

Krok 6: Usuwanie użytkownika

Używamy poniższy kod, aby usunąć użytkownika:

Funkcja destroyUser () {
	var row = $ ( '# DG ") DataGrid (" getSelected ") .;
	if (row) {
		$ .messager.confirm ( "Potwierdzenie", "Czy na pewno chcesz usunąć tego użytkownika?", Funkcja (r) {
			if (R) {
				$ .post ( 'Destroy_user.php', {id: row.id}, function (result) {
					if (result.success) {
						$ ( '# Dg ") DataGrid (" reload ") ;. // Odśwież dane użytkownika
					} Else {
						$ .messager.show (// Pokaż komunikat o błędzie {
							Tytuł: "Error"
							MSG: result.errorMsg
						});
					}
				} 'Json');
			}
		});
	}
}

Przed wyjęciem z rzędu, będziemy wyświetlać okno dialogowe z potwierdzeniem, które pozwala użytkownikowi zdecydować, czy rzeczywiście do usuwania wierszy danych. Po dane zostały pomyślnie usunięty, zadzwoń do "przeładowania" metodę, aby odświeżyć dane DataGrid.

Krok 7: Uruchom kod

Otwarty MySQL uruchomić kod w przeglądarce.

Pobierz przykłady jQuery EasyUI

jeasyui-app-crud1.zip