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

本文通过editable插件实现单击将一个文本信息变为可编辑的表单，你可以对文本内容进行编辑，然后点击“确定”保存到数据库；当点击“取消”按钮，则页面恢复到初始状态。

这是一个用户信息的表格，从代码中可以发现响应的字段信息的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

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

猜你喜欢