Najlepszy samouczek jQuery EasyUI Aplikacje - Tworzenie aplikacji CRUD W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,
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:
Będziemy korzystać z bazy danych MySQL do przechowywania informacji o użytkownikach. Tworzenie bazy danych i tabeli "użytkownicy".
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);
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:
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.
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.
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.
Otwarty MySQL uruchomić kod w przeglądarce.