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

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

2016-08-24 3424 49 7
软件描述

jeditable优势:

  • 实时编辑,后台实时响应,并即时完成局部刷新。
  • 可自定义输入表单类型,目前jeditable提供text,select,textarea类型。
  • 响应键盘的回车和ESC键。
  • 插件机制,本例提供与jquery ui的datepicker日历控件的整合。

接着我们用PHP举个示例表单:

这是一个用户信息的表格,从代码中可以发现响应的字段信息的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("刚刚"); 
    } 
});

jeditable还提供了select,textarea类型的编辑,并提供插件api接口。

$('.edit_select').editable('ajax.php', {   
    loadurl   : 'json.php',  
    type      : "select",  
});

type指定的是select类型,select里加载的数据来自json.php,json.php提供了下拉框所需的数据源。

$array['网站模板'] =  '网站模板';  
$array['网页特效'] =  '网页特效';  
$array['网站源码'] =  '网站源码';  
$array['精品网站'] =  '精品网站';  
$array['网页图标'] =  '网页图标';  
print json_encode($array);

json数据示例:

$('.edit_select').editable('save.php', {   
    data : " {'网站模板':'网站模板','网页特效':'网页特效','网站源码':'网站源码', '精品网站':'精品网站'}",  
    type : "select",  
});

textarea类型就不再多数,将type类型改为textarea就可以了。PS:默认类型为text。

当处理日期类型时,我接入了一个jquery ui的datepicker日历插件,当然别忘了要引入juqery ui插件和样式:

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />  
<script type="text/javascript" src="js/jquery-ui.js"></script>

引入jquery ui的datepicker日期时间插件

$.editable.addInputType('datepicker', {  
    element : function(settings, original) {  
        var input = $('<input class="input" />');  
        input.attr("readonly","readonly");  
        $(this).append(input);  
        return(input);  
    },  
    plugin : function(settings, original) {  
        var form = this;  
        $("input",this).datepicker();  
    }  
});

调用的代码直接指定type类型为datepicker即可。

$(".datepicker").editable('ajax.php', {   
    width     : 120,  
    type      : 'datepicker',  
    onblur    : "ignore",  
});

Ajax.php

编辑好的字段信息会发送到后台程序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 "数据出错";      
    }  
}


举报

资源举报

举报审核通过将会奖励威望

×
收藏 下载

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

我的威望:0已下载次数:49

登录、发帖、回帖、上传资源可获得威望

所需威望:5开始下载
网盘链接:  访问密码:
×

讨论这个工具(7)

csanyue
2017-05-22 15:11

学习一下下

gbnh82
2017-06-02 09:10

不错,学习一下

bbjteam
2017-09-16 18:58

不错!!学习下!!作者大大辛苦!!

程岩石
2018-04-15 15:41

请问,这个不是完整的代码吗?为什么没有save.php和数据库文件?运行不出你这个效果

程岩石
2018-04-15 15:45

找到了。看错文件了,抱歉

RobertJeep
2018-05-13 23:06

谁有完整代码,可以共享下么


zhl0418
2018-10-15 11:12

作者大大辛苦!!


请登录后发表评论