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 相关文章推荐
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jquery禁用右键示例
Apr 28 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 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屏蔽过滤指定关键字的方法
2014/11/03 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
php DES加密算法实例分析
2019/09/18 PHP
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python import 上级目录的导入
2020/11/03 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
普通简短的个人自我评价
2014/02/15 职场文书
教师评语大全
2014/04/28 职场文书
党务公开方案
2014/05/06 职场文书
企业负责人任命书
2014/06/05 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang