Najlepszy samouczek Aplikacje jQuery EasyUI - Tworzenie połączenia wdrażania szczegółowo CRUD formularz edycji aplikacji W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

Aplikacje jQuery EasyUI - Tworzenie połączenia wdrażania szczegółowo CRUD formularz edycji aplikacji

Podczas przełączania widoku siatki danych (DataGrid widzenia) "detailview", użytkownik może rozszerzyć linię, aby wyświetlić szczegóły niektóre wiersze w poniższym wierszu. Funkcja ta pozwala na zapobieganie panel linii podziału (panel) w formie edycji (formularz), aby zapewnić pewien odpowiedni układ (Układ). W tym tutorialu użyjemy siatki danych (DataGrid) Komponenty do zmniejszenia formularz edycji (formularz) z przestrzeni zajmowanej.

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

<Table id = "DG" title = "Moi Użytkownicy" style = "width: 550px; height: 250px"
		url = "get_users.php"
		toolbar = "# toolbar"
		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="newItem()"> Nowy </a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()"> Destroy </a>
</ Div>

Krok 2: Dane siatki (DataGrid) Aplikacje Widok szczegółowy

$ ( '# Dg "). DataGrid ({
	Widok: detailview,
	detailFormatter: function (indeksowe, wiersz) {
		Zwrot '<div class = "DDV"> </ div>';
	}
	onExpandRow: function (indeksowe, wiersz) {
		var DDV = $ (this) .datagrid ( "getRowDetail ', index) .find (" div.ddv');
		ddv.panel ({
			border: fałszywe,
			cache: prawda,
			href: 'index show_form.php =' + indeks,
			onLoad: function () {
				$ ( '# Dg ") DataGrid (" fixDetailRowHeight', index) .;
				$ ( '# Dg ") DataGrid (" selectRow', index) .;
				$ ( '# Dg ") DataGrid (" getRowDetail', index) .find ( "Formularz") forma ( "obciążenie", wiersz) pl;
			}
		});
		$ ( '# Dg ") DataGrid (" fixDetailRowHeight', index) .;
	}
});

Aby siatki danych dane (DataGrid) Zastosowanie zobaczyć w nagłówku strony HTML wprowadzonego pliki 'DataGrid-detailview.js.

Używamy funkcji 'detailFormatter' do generowania szczegółowo treść wiersza. W tym przypadku, wracamy do miejsca, do edycji formularza (formularz) Pusty <div>. Gdy użytkownik kliknie przycisk rozwijania linii ( '+'), zdarzenie "onExpandRow 'zostanie uruchomiony, będziemy załadować formularz edycji AJAX (formularz). Wywołać metodę 'getRowDetail', aby uzyskać szczegóły linia kontenerowa, więc możemy znaleźć panel linii szczegółowości (panel). Szczegóły rzędu stworzonego panelu (panel), załaduj formularz edycji (formularz) z 'show_form.php "powrotu.

Krok 3: Tworzenie formularza edycji (formularz)

Formularz Edit (formularz) jest ładowany z serwera.

<Form method = "post">
	<Table class = "dv-table" style = "width: 100%; background: #fafafa; padding: 5px; margin-top: 5px;">
		<Tr>
			<Td> Imię </ td>
			<Td> <input name = class "Imię" = "easyui-validatebox" wymagane = "true"> </ input> </ td>
			<Td> Nazwisko </ td>
			<Td> <input name = "Nazwisko" class = "easyui-validatebox" wymagane = "true"> </ input> </ td>
		</ Tr>
		<Tr>
			<Td> Telefon </ td>
			<Td> <input name = "phone"> </ input> </ td>
			<Td> e-mail </ td>
			<Td> <input name = klasa "e" = "easyui-validatebox" VALIDTYPE = "email"> </ input> </ td>
		</ Tr>
	</ Table>
	<Div style = "padding: 5px 0; text-align: right; padding-right: 30px">
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(&lt;?php echo $_REQUEST['index'];?&gt;)"> Zapisz </a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(&lt;?php echo $_REQUEST['index'];?&gt;)"> Anuluj </a>
	</ Div>
</ Form>

Krok 4: Zapisz lub Anuluj zmienił

Wywołanie funkcji 'saveItem' aby zapisać użytkownika lub wywołania funkcji 'cancelItem', aby anulować edycję.

Funkcja saveItem (index) {
	var row = $ ( '# DG ") DataGrid (" GetRows ") [indeks] .;
	var url = row.isNewRecord 'save_user.php': 'update_user.php id =? + row.id ;?
	$ ( '# Dg "). DataGrid (" getRowDetail', index) .find ( "Formularz"). Postać ( 'submit', {
		url: adres URL,
		onSubmit: function () {
			return $ (this) .form ( "validate");
		}
		success: function (data) {
			Dane = eval ( '(' + DATA + ')');
			data.isNewRecord = false;
			$ ( '# Dg ") DataGrid (" collapseRow', index) .;
			$ ( '# Dg "). DataGrid (" updateRow', {
				index: indeks,
				ROW: Dane
			});
		}
	});
}

Który postanowił powrócić URL, a następnie szukać (Formularz) obiektu i nazywają 'submit' metodę przesłać formularz (formularz) danych. Gdy dane zostały zapisane, składany i aktualizacji wierszy danych.

Funkcja cancelItem (index) {
	var row = $ ( '# DG ") DataGrid (" GetRows ") [indeks] .;
	if (row.isNewRecord) {
		. $ ( '# Dg ") DataGrid (" deleteRow', index);
	} Else {
		$ ( '# Dg ") DataGrid (" collapseRow', index) .;
	}
}

Po anulowaniu działania edycji, jeśli linia jest nowa linia i nie zostały zapisane, usunąć wiersz, w przeciwnym razie linię zgięcia.

Pobierz przykłady jQuery EasyUI

jeasyui-app-crud3.zip