PHP+Ajax+Mysql+jeditable无刷新编辑表格

spell

本文通过editable插件实现单击将一个文本信息变为可编辑的表单，你可以对文本内容进行编辑，然后点击“确定”保存到数据库；当点击“取消”按钮，则页面恢复到初始状态。
http://www.sucaihuo.com/jquery/demo/120/images/demo.jpg
这是一个用户信息的表格，从代码中可以发现响应的字段信息的td都给了一个class和id属性，并赋值。值得一提的是表格中的td对应的id的值是和数据库中的字段名称一一对应的，这样做就是为了在编辑时让后台获取相应的字段信息，后面的PHP代码中会讲到。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr class="table_title">
<td colspan="4"><span class="open"></span>客户信息</td>
</tr>
</thead>
<tbody>
<tr>
<td width="20%" class="table_label">姓名</td>
<td width="30%" class="edit" id="username"><?php echo $username; ?></td>
<td width="20%" class="table_label">办公电话</td>
<td width="30%" class="edit" id="phone"><?php echo $phone; ?></td>
</tr>
<tr>
<td class="table_label">称谓</td>
<td class="edit" id="solutation"><?php echo $solutation; ?></td>
<td class="table_label">手机</td>
<td class="edit" id="mobile"><?php echo $mobile; ?></td>
</tr>
<tr>
<td class="table_label">公司名称</td>
<td class="edit" id="company"><?php echo $company; ?></td>
<td class="table_label">电子邮箱</td>
<td class="edit" id="email"><?php echo $email; ?></td>
</tr>
<tr>
<td class="table_label">潜在客户来源</td>
<td class="edit_select" id="source"><?php echo $source; ?></td>
<td class="table_label">有限期</td>
<td class="datepicker" id="sdate"><?php echo $sdate; ?></td>
</tr>
<tr>
<td class="table_label">职位</td>
<td class="edit" id="job"><?php echo $job; ?></td>
<td class="table_label">网站</td>
<td class="edit" id="web"><?php echo $web; ?></td>
</tr>
<tr>
<td class="table_label">创建时间</td>
<td><?php echo $createtime; ?></td>
<td class="table_label">修改时间</td>
<td id="modifiedtime"><?php echo $modifiedtime; ?></td>
</tr>
<tr>
<td class="table_label">备注</td>
<td class="textarea" id="note" colspan="3"><?php echo $note; ?></td>
</tr>
</tbody>
</table>

调用jeditable插件：
$('.edit').editable('ajax.php', {
width: 120,
height: 18,
//onblur    : "ignore",
cancel: '取消',
submit: '确定',
indicator: '<img src="css/loader.gif">',
tooltip: '单击可以编辑...',
callback: function(value, settings) {
$("#modifiedtime").html("刚刚");
}
});

编辑好的字段信息会发送到后台程序save.php程序处理。save.php需要完成的工作是：接收前端提交过来的字段信息数据，并进行必要的过滤和验证，然后更新数据表中相应的字段内容，并返回结果。
include_once("connect.php"); //连接数据库  
$field=$_POST['id'];  //获取前端提交的字段名  
$val=$_POST['value']; //获取前端提交的字段对应的内容  
$val = htmlspecialchars($val, ENT_QUOTES); //过滤处理内容  
$time=date("Y-m-d H:i:s"); //获取系统当前时间  
if(empty($val)){  
echo "不能为空";  
}else{  
//更新字段信息  
$query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1");  
if($query){  
echo $val;  
}else{  
echo "数据出错";      
}  
}

无刷新编辑表格演示：http://www.sucaihuo.com/php/120.html