使用easyui的DataGrid实现即时编辑(CRUD)

首先来个users.sql

/*
MySQL Data Transfer
Source Host: localhost
Source Database: mydb
Target Host: localhost
Target Database: mydb
Date: 2011/6/3 13:59:12
*/


SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for users
-- ----------------------------
CREATE TABLE `users` (
  `id` int(11) NOT NULL auto_increment,
  `firstname` varchar(50) default NULL,
  `lastname` varchar(50) default NULL,
  `phone` varchar(200) default NULL,
  `email` varchar(200) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


-- ----------------------------
-- Records 
-- ----------------------------
INSERT INTO `users` VALUES ('3', 'fname1', 'lname1', '(000)000-0000', '[email protected]');
INSERT INTO `users` VALUES ('4', 'fname2', 'lname2', '(000)000-0000', '[email protected]');
INSERT INTO `users` VALUES ('5', 'fname3', 'lname3', '(000)000-0000', '[email protected]');
INSERT INTO `users` VALUES ('7', 'fname4', 'lname4', '(000)000-0000', '[email protected]');
INSERT INTO `users` VALUES ('8', 'fname5', 'lname5', '(000)000-0000', '[email protected]');
INSERT INTO `users` VALUES ('9', 'fname6', 'lname6', '(000)000-0000', '[email protected]');
INSERT INTO `users` VALUES ('10', 'fname7', 'lname7', '(000)000-0000', '[email protected]');
INSERT INTO `users` VALUES ('11', 'fname8', 'lname8', '(000)000-0000', '[email protected]');
INSERT INTO `users` VALUES ('12', 'fname9', 'lname9', '(000)000-0000', '[email protected]');
INSERT INTO `users` VALUES ('13', 'fname10', 'lname10', '(000)000-0000', '[email protected]');

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>Build CRUD DataGrid with jQuery EasyUI - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#dg').edatagrid({
				autoSave:true,
				url: 'get_users.php',
				saveUrl: 'save_user.php',
				updateUrl: 'update_user.php',
				destroyUrl: 'destroy_user.php'
			});
		});
	</script>
</head>
<body>
	<h2>CRUD DataGrid</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"> </div>
		<div>Double click the row to begin editing.</div>
	</div>
	
	<table id="dg" title="My Users" style="width:700px;height:450px"
			toolbar="#toolbar" pagination="true" idField="id"
			rownumbers="false" 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>
	
</body>
</html>

conn.php

<?php


$conn = @mysql_connect('127.0.0.1','root','123456');
if (!$conn) {
	die('Could not connect: ' . mysql_error());
}
mysql_select_db('mydb', $conn);


?>

get_users.php

<?php
	$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
	$offset = ($page-1)*$rows;
	
	$result = array();

 
include 'conn.php';
	

	$rs = mysql_query("select count(*) from users");
	$row = mysql_fetch_row($rs);
	$result["total"] = $row[0];
	
	$rs = mysql_query("select * from users limit $offset,$rows");
	
	$rows = array();
	while($row = mysql_fetch_object($rs)){
		array_push($rows, $row);
	}
	$result["rows"] = $rows;
	
	echo json_encode($result);
?>

save_user.php

<?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
));

?>

update_user.php

<?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
));
?>

destroy_user.php

<?php

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

include 'conn.php';

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

摘自原文Build CRUD DataGrid with jQuery EasyUI - jQuery EasyUI.htm

原文的get_users.php 没有实现分页。本篇将他实现了分页。

一个比较完善的即时表格编辑器就完成了。

使用easyui的DataGrid实现即时编辑(CRUD)

猜你喜欢