1. Home
  2. Aplikacja jQuery EasyUI - tworzenie siatki danych CRUD

Najlepszy samouczek Aplikacja jQuery EasyUI - tworzenie siatki danych CRUD W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

Aplikacja jQuery EasyUI - tworzenie siatki danych CRUD

W poprzedniej części, używamy dialogowych (okna) składniki do tworzenia aplikacji CRUD, aby utworzyć i edytować informacje użytkownika. Ten poradnik pokaże Ci, jak stworzyć siatkę danych CRUD (DataGrid). Użyjemy do edycji siatki danych (DataGrid) plug-in do zakończenia tych działań operacji CRUD.

Krok 1: Zdefiniuj siatkę danych tag HTML (DataGrid) 

<Table id = "DG" title = "Moi Użytkownicy" style = "width: 550px; height: 250px"
		toolbar = "# toolbar" idField = "id"
		rownumbers = "true" fitColumns = "true" singleSelect = "true">
	<THEAD>
		<Tr>
			<Th pole = "Imię" width = "50" editor = "{type:" validatebox ', opcje: {wymagane: true}} "> Imię </ th>
			<Th pole = "Nazwisko" width = "50" editor = "{type:" validatebox ', opcje: {wymagane: true}} "> Nazwisko </ th>
			<Th pole = "phone" width = "50" editor = "text"> Telefon </ th>
			<Th pole = "email" width = "50" editor = "{type:" validatebox ', opcje: {VALIDTYPE:' e-mail '}} "> e-mail </ th>
		</ Tr>
	</ THEAD>
</ Table>
<Div id = "toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')"> New </ a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')"> Destroy </ a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')"> Zapisz </ a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')"> Anuluj </ a>
</ Div>

Krok 2: Użyj do edycji siatki danych (DataGrid) 

$ ( '# Dg "). Edatagrid ({
	url: 'get_users.php "
	saveUrl: "save_user.php '
	updateURL: "update_user.php"
	destroyUrl: "destroy_user.php '
});

Powinniśmy zaoferować 'url', '', 'saveUrl updateURL "i atrybutu" destroyUrl' do edycji siatki danych (DataGrid):

  • url: pobieranie danych użytkownika z serwera.
  • saveUrl: zapisz nowe dane użytkownika.
  • updateURL: zaktualizować istniejące dane użytkownika.
  • destroyUrl: Aby usunąć istniejące dane użytkownika.

Krok 3: Wpisz kod przetwarzania serwera

Zapisz nowego użytkownika (save_user.php): 

$ Imię = $ _REQUEST [ 'Imię'];
$ Nazwisko = $ _REQUEST [ 'Nazwisko'];
$ Phone = $ _REQUEST [ 'telefon'];
$ Email = $ _REQUEST [ 'email'];

to "conn.php ';

$ Sql ​​= "insert into użytkowników (imię, nazwisko, telefon, e-mail) wartości (" $ Imię "," Nazwisko $ ',' $ telefonów ',' $ email ') ";
@mysql_query ($ sql);
echo json_encode (array (
	'Id' => mysql_insert_id ()
	'Imię' => $ imię,
	'Nazwisko' => $ Nazwisko,
	'Telefon' => $ telefon,
	'E-mail' => $ email
));

Aktualizacja użytkownik już istnieje (update_user.php): 

$ Id = intval ($ _ REQUEST [ 'id']);
$ Imię = $ _REQUEST [ 'Imię'];
$ Nazwisko = $ _REQUEST [ 'Nazwisko'];
$ Phone = $ _REQUEST [ 'telefon'];
$ Email = $ _REQUEST [ 'email'];

to "conn.php ';

$ Sql ​​= "użytkownicy aktualizacji ustawić FIRSTNAME = '$', Book Nazwa Nazwisko = '$' Nazwisko, telefon komórkowy = '$', e = '$ email" gdzie id = $ id ";
@mysql_query ($ sql);
echo json_encode (array (
	'Id' => $ id,
	'Imię' => $ imię,
	'Nazwisko' => $ Nazwisko,
	'Telefon' => $ telefon,
	'E-mail' => $ email
));

Aby usunąć użytkownik już istnieje (destroy_user.php): 

$ Id = intval ($ _ REQUEST [ 'id']);

to "conn.php ';

$ Sql ​​= "usunąć z użytkownikami gdzie id = $ id";
@mysql_query ($ sql);
echo json_encode (array ( 'sukces' => true));

Pobierz przykłady jQuery EasyUI

jeasyui-app-crud2.zip

Hot Tutorials

Contact US

Aplikacja jQuery EasyUI - tworzenie siatki danych CRUD
10/30