中文示例下载：
点此下载英文demo：http://demo.tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/demo.php
一、前言：
有用过DZ或phpwind的朋友应该有留意到，其中的菜单项编辑非常的方便和人性化，这篇教程，主要就是讲解如何创建即时编辑删除保存的菜单控制。
在你看这边教程时，最好掌握或了解以下技术：
- jquery（示例使用1.42）
- jqueryUI（示例中有用到二个jqueryUI插件：拖拉和弹出窗）
- php（最好掌握类的写法）
- ajax（掌握或理解ajax的机制）
- 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;
}
$(‘
‘).val(container.text()).appendTo(container.empty());// 添加保存和取消按钮:
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/
