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 ") pl;
. $ ( '# 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 ") pl;
. $ ( '# 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.
