中文示例下载：

英文demo：http://demo.tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/demo.php

一、前言：

有用过DZ或phpwind的朋友应该有留意到，其中的菜单项编辑非常的方便和人性化，这篇教程，主要就是讲解如何创建即时编辑删除保存的菜单控制。

在你看这边教程时，最好掌握或了解以下技术：

1. jquery（示例使用1.42）
2. jqueryUI（示例中有用到二个jqueryUI插件：拖拉和弹出窗）
3. php（最好掌握类的写法）
4. ajax（掌握或理解ajax的机制）
5. mysql

如果你具备这些知识，想要了解综合这些技术，创建web2.0程序，那么这篇教程将对你非常有用处。

代码不一一讲解，这里只讲解前后台脚本的关键部分

二、javascript关键代码讲解

在初始化jquery拖拉UI中有个update回调函数，在拖拉后（数据改变）后触发：

update : function(){

var arr = $(“.todoList”).sortable(‘toArray’);

// 去掉菜单项的todo-前缀，只保留id
arr = $.map(arr,function(val,key){
return val.replace(‘todo-’,”);
});

// ajax保存修改
$.get(‘ajax.php’,{action:’rearrange’,positions:arr});
}

可以alert(arr)看看结果集，就会明白这里为什么要去掉，数组值中的’todo-’前缀，最后将这个数组传递给后台（包含所有的菜单项，而不只是有交换位置的2个菜单项。）

配置弹出窗

//配置删除窗体
$(“#dialog-confirm”).dialog({
resizable: false,
height:130,
modal: true,
autoOpen:false,
buttons: {
“删除”: function() {
$.get(“ajax.php”,{“action”:”delete”,”id”:currentTODO.data(‘id’)},function(msg){
currentTODO.fadeOut(‘fast’);
})

$(this).dialog(‘close’);
},
“取消”: function() {
$(this).dialog(‘close’);
}
}
});

删除弹出提示框的提示文字在#dialog-confirm容器内。
currentTODO就是当前操作的菜单项。这个值是在什么情况下赋予的呢，来看下面代码：

$(‘.todo a’).live(‘click’,function(e){

currentTODO = $(this).closest(‘.todo’);
currentTODO.data(‘id’,currentTODO.attr(‘id’).replace(‘todo-’,”));

e.preventDefault();
});

当你单击所有的菜单项下的链接的时候都会给currentTODO赋值（也就是点击保存、删除或取消按钮时）。
留意这里使用live()来给菜单项绑定事件，因为菜单项有可能随着你的操作，对象发生改变，所以使用live动态绑定事件。

来看点击编辑按钮后触发的方法。

//给编辑按钮监听单击事件

$(‘.todo a.edit’).live(‘click’,function(){

var container = currentTODO.find(‘.text’);

if(!currentTODO.data(‘origText’))
{
currentTODO.data(‘origText’,container.text());
}
else
{
return false;
}

$(‘

// 添加保存和取消按钮:
container.append(
‘

‘
);

});

将该菜单项的文字写入缓存，并生成一个输入框，写入这个值。
同时生成保存和取消按钮。

三、php后台脚本关键部分讲解

todo.class.php是是一个自定义的php类。

我们来看这个类的关键部分。

public function __toString(){
return ‘

‘;
}

__toString是个魔法方法，当你输出类时，会自动触发这个方法。比如：

public static function createNew($text){

$text = self::esc($text);
if(!$text) throw new Exception(“输入框文字不合法！”);

$posResult = mysql_query(“SELECT MAX(position)+1 FROM tz_todo”);

if(mysql_num_rows($posResult))
list($position) = mysql_fetch_array($posResult);

if(!$position) $position = 1;

mysql_query(“INSERT INTO tz_todo SET text=’”.$text.”‘, position = “.$position);

if(mysql_affected_rows($GLOBALS['link'])!=1)
throw new Exception(“无法添加新的菜单项”);

// 创建个新的ToDo对象，并输出

echo (new ToDo(array(
‘id’ => mysql_insert_id($GLOBALS['link']),
‘text’ => $text
)));

exit;
}

createNew这个静态方法用于创建一个新的菜单项。留意函数内的echo()

public static function rearrange($key_value){

$updateVals = array();
foreach($key_value as $k=>$v)
{
$strVals[] = ‘WHEN ‘.(int)$v.’ THEN ‘.((int)$k+1).PHP_EOL;
}

if(!$strVals) throw new Exception(“No data!”);

mysql_query(” UPDATE tz_todo SET position = CASE id
“.join($strVals).”
ELSE position
END”);

if(mysql_error($GLOBALS['link']))
throw new Exception(“无法编辑菜单项位置”);
}

这是这个类中最复杂的代码，来重点说明下。rearrange这个静态方法用于在你拖拉菜单项结束后，根据位置值，来调整菜单项的位置。
接受的参数是包含二个菜单项位置值的数组。

上面是前台传递的参数情况。
关于mysql中case,when,then的使用，大家可以百度下，数据库不是我的专长，以免误人子弟。
对这段代码能比较好解读的童鞋，可以给在本页留言，谢谢。

connect.php：数据库连接配置

请将示例包内的.sql批处理文件导入数据库，并根据你机子的数据库情况，进行重新配置。

css部分

该示例有用到了css3，所以在IE下有部分效果看不到，比如圆角、阴影、发光效果，请使用其他支持css3的浏览器查看。

ul.todoList li{
background-color:#F9F9F9;
border:1px solid #EEEEEE;
list-style:none;
margin:6px;
padding:6px 9px;
position:relative;
cursor:n-resize;

/* CSS3 圆角和阴影样式 */

text-shadow:1px 1px 0 white;

-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
ul.todoList li:hover{
border-color:#9be0f9;

/* CSS3 发光 效果: */
-moz-box-shadow:0 0 5px #A6E5FD;
-webkit-box-shadow:0 0 5px #A6E5FD;
box-shadow:0 0 5px #A6E5FD;
}

更多的细节就留给各位朋友们琢磨，有不明白的，可以给明河留言，或加入RIA之家群进行讨论，谢谢。

原文请看：http://tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/

• 点此下载

来看构建过程

首先先建立如下菜单html结构

说明下：.loading为预加载动画容器，而#content为装返回的页面html的容器。

构建css样式

（实例包里面的css中有个错误，不是#loading 而是.loading，使用时请留意。）

来看Javascript代码

我已经换成中文注释，这里就不再解释。