jQuery+PHP实现可编辑表格字段内容并实时保存


Posted in Javascript onOctober 09, 2015

本例适用场景:当查看详细资料,如用户详情信息,发现其中某几个字段信息需要修改,可直接点击该字段内容进行修改,节约了用户时间,(传统的做法是进入一个编辑页面,列出所有编辑的字段信息,即使你只需要编辑其中一两个字段内容,然后点击提交)提高了WEB响应速度,从而提高了前端用户体验。

jQuery+PHP实现可编辑表格字段内容并实时保存

本例依赖jquery库,并基于插件,具有以下特点:
实时编辑,后台实时响应,并即时完成局部刷新。
可自定义输入表单类型,目前jeditable提供text,select,textarea类型。
响应键盘的回车和ESC键。
插件机制,本例提供与jquery ui的datepicker日历控件的整合。
下面我们来一步步讲解实现过程。
XHTML
我们需要制作一个表格,如下:

<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">李小三</td> 
  <td width="20%" class="table_label">办公电话</td> 
  <td width="30%" class="edit" id="phone">021-12345678</td> 
 </tr> 
 <tr> 
  <td class="table_label">称谓</td> 
  <td class="edit" id="solutation">先生</td> 
  <td class="table_label">手机</td> 
  <td class="edit" id="mobile">13800138000</td> 
 </tr> 
 <tr> 
  <td class="table_label">公司名称</td> 
  <td class="edit" id="company">常丰集团</td> 
  <td class="table_label">电子邮箱</td> 
  <td class="edit" id="email">lrfbeyond@163.com</td> 
 </tr> 
 <tr> 
  <td class="table_label">潜在客户来源</td> 
  <td class="edit_select" id="source">公共关系</td> 
  <td class="table_label">有限期</td> 
  <td class="datepicker" id="sdate">2011-11-30</td> 
 </tr> 
 <tr> 
  <td class="table_label">职位</td> 
  <td class="edit" id="job">部门经理</td> 
  <td class="table_label">网站</td> 
  <td class="edit" id="web">www.helloweba.com</td> 
 </tr> 
 <tr> 
  <td class="table_label">创建时间</td> 
  <td>2010-11-04 21:11:59</td> 
  <td class="table_label">修改时间</td> 
  <td id="modifiedtime">2010-11-05 09:42:52</td> 
 </tr> 
 <tr> 
  <td class="table_label">备注</td> 
  <td class="textarea" id="note" colspan="3">备注信息</td> 
 </tr> 
 </tbody> 
</table>

这是一个用户信息的表格,从代码中可以发现响应的字段信息的td都给了一个class和id属性,并赋值。值得一提的是表格中的td对应的id的值是和数据库中的字段名称一一对应的,这样做就是为了在编辑时让后台获取相应的字段信息,后面的PHP代码中会讲到。
CSS

table{width:96%; margin:20px auto; border-collapse:collapse;} 
table td{line-height:26px; padding:2px; padding-left:8px; border:1px solid #b6d6e6;} 
.table_title{height:26px; line-height:26px; background:url(btn_bg.gif) repeat-x bottom; 
 font-weight:bold; text-indent:.3em; outline:0;} 
.table_label{background:#e8f5fe; text-align:right; }

CSS渲染了表格样式,让表格看起来更舒服点。
jQuery
提到jquery,一定要记住在页面的<head>之间要引用jquery和jeditable插件

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jeditable.js"></script>

然后开始调用插件。

$(function(){ 
  $('.edit').editable('save.php', { 
   width  :120, 
   height :18, 
   //onblur : 'ignore', 
   cancel : '取消', 
   submit : '确定', 
   indicator : '<img src="loader.gif">', 
   tooltip : '单击可以编辑...' 
  }); 
});

插件提供了很多属性和方法的调用。可以设置宽度,高度,按钮的文本信息,提交时的加载图片,鼠标滑上的提示信息等等。save.php是编辑后的信息最终提交的后台程序的地址。现在看看是不是表格中的信息可以编辑了哦。
jeditable还提供了select,textarea类型的编辑,并提供插件api接口。
来看下拉选择框select的处理:

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

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

$array['老客户'] = '老客户'; 
$array['独自开发'] = '独自开发'; 
$array['合作伙伴'] = '合作伙伴'; 
$array['公共关系'] = '公共关系'; 
$array['展览会'] = '展览会'; 
print json_encode($array);

这些数据是直接存在json.php文件里的,当然你也可以通过读取数据库信息,然后生成json数据,关于如何生成json数据,请查看。还有一种方法是直接在editable中指定data:

$('.edit_select').editable('save.php', { 
 data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}", 
 type : "select", 
});

不难发现,其实上述代码中的data就是一串json数据。
textarea类型就不再多数,将type类型改为textarea就可以了。PS:默认类型为text。
当处理日期类型时,我接入了一个jquery ui的日历插件,当然别忘了要引入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('save.php', { 
 width  : 120, 
 type  : 'datepicker', 
 onblur : "ignore", 
});

现在看看,表格中的“有限期”字段的日期是不是可以修改了。好了,还有其他更多的插件接入期待您的加入。
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(emptyempty($val)){ 
 echo "不能为空"; 
}else{ 
 //更新字段信息 
 $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1"); 
 if($query){ 
  echo $val; 
 }else{ 
  echo "数据出错"; 
 } 
}

再回到开始的HTML代码,表格中显示的字段内容信息当然是从数据库读取来的,所以要用PHP读取数据表,把内容显示出来就OK,详细过程大家自己写一个吧。
如此,可编辑的表格就此收工。但是还不能完工,关于对输入信息的有效性的验证问题后面的文章我会陆续附上,敬请关注。

希望小编整理的每一篇文章都对大家有所帮助。

Javascript 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 #Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 #Javascript
jQuery实现连续动画效果实例分析
Oct 09 #Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 #Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 #Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 #Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 #Javascript
You might like
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
angular十大常见问题
2017/03/07 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
使用node.js搭建服务器
2017/05/20 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
JS实现密码框效果
2020/09/10 Javascript
python提取字典key列表的方法
2015/07/11 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
django 模版关闭转义方式
2020/05/14 Python
Keras 使用 Lambda层详解
2020/06/10 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
模具专业推荐信
2013/10/30 职场文书
合作经营协议书范本
2014/09/16 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android