php实现表格实时编辑器,使用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', 'name1@gmail.com');

INSERT INTO `users` VALUES ('4', 'fname2', 'lname2', '(000)000-0000', 'name2@gmail.com');

INSERT INTO `users` VALUES ('5', 'fname3', 'lname3', '(000)000-0000', 'name3@gmail.com');

INSERT INTO `users` VALUES ('7', 'fname4', 'lname4', '(000)000-0000', 'name4@gmail.com');

INSERT INTO `users` VALUES ('8', 'fname5', 'lname5', '(000)000-0000', 'name5@gmail.com');

INSERT INTO `users` VALUES ('9', 'fname6', 'lname6', '(000)000-0000', 'name6@gmail.com');

INSERT INTO `users` VALUES ('10', 'fname7', 'lname7', '(000)000-0000', 'name7@gmail.com');

INSERT INTO `users` VALUES ('11', 'fname8', 'lname8', '(000)000-0000', 'name8@gmail.com');

INSERT INTO `users` VALUES ('12', 'fname9', 'lname9', '(000)000-0000', 'name9@gmail.com');

INSERT INTO `users` VALUES ('13', 'fname10', 'lname10', '(000)000-0000', 'name10@gmail.com');

index.html

Build CRUD DataGrid with jQuery EasyUI - jQuery EasyUI Demo

$(function(){

$('#dg').edatagrid({

autoSave:true,

url: 'get_users.php',

saveUrl: 'save_user.php',

updateUrl: 'update_user.php',

destroyUrl: 'destroy_user.php'

});

});

CRUD DataGrid

Double click the row to begin editing.

toolbar="#toolbar" pagination="true" idField="id"

rownumbers="false" fitColumns="true" singleSelect="true">

First NameLast NamePhoneEmail

New

Destroy

Save

Cancel

conn.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

$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

$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

$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

$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 没有实现分页。本篇将他实现了分页。

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