jEasyUI mencipta grid data CRUD

Dalam bab sebelumnya, kami mencipta aplikasi CRUD menggunakan komponen dialog untuk mencipta dan mengedit maklumat pengguna. Dalam tutorial ini kami akan memberitahu anda cara membuat grid data CRUD (DataGrid). Kami akan menggunakan pemalam grid data boleh diedit (DataGrid) untuk melengkapkan operasi CRUD ini.

Langkah 1: Tentukan grid data (DataGrid) dalam tag HTML

<table id="dg" title="My Users" style="width:550px;height:250px"
		toolbar="#toolbar" idField="id"
		rownumbers="true" fitColumns="true" singleSelect="true">
	<thead>
		<tr>
			<th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
			<th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
			<th field="phone" width="50" editor="text">Phone</th>
			<th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</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')">Save</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>

Langkah 2: Gunakan grid data boleh edit (DataGrid)

$('#dg').edatagrid({
	url: 'get_users.php',
	saveUrl: 'save_user.php',
	updateUrl: 'update_user.php',
	destroyUrl: 'destroy_user.php'
});

Kami harus menyediakan sifat 'url', 'saveUrl', 'updateUrl' dan 'destroyUrl' untuk mengedit DataGrid:

• url: dari pelayan Dapatkan data pengguna pada klien .

• saveUrl: Simpan data pengguna baharu.

• updateUrl: Kemas kini data pengguna sedia ada.

• destroyUrl: Padamkan data pengguna sedia ada.

Langkah 3: Tulis kod pemprosesan pelayan

Simpan pengguna baharu (save_user.php):

$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];

include 'conn.php';

$sql = "insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')";
@mysql_query($sql);
echo json_encode(array(
	'id' => mysql_insert_id(),
	'firstname' => $firstname,
	'lastname' => $lastname,
	'phone' => $phone,
	'email' => $email
));

Kemas kini pengguna sedia ada (update_user .php ):

$id = intval($_REQUEST['id']);
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];

include 'conn.php';

$sql="update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id";
@mysql_query($sql);
echo json_encode(array(
	'id' => $id,
	'firstname' => $firstname,
	'lastname' => $lastname,
	'phone' => $phone,
	'email' => $email
));

Padam pengguna sedia ada (destroy_user.php):

$id = intval($_REQUEST['id']);

include 'conn.php';

$sql = "delete from users where id=$id";
@mysql_query($sql);
echo json_encode(array('success'=>true));

Muat turun contoh jQuery EasyUI

jeasyui-app-crud2.zip