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 相关文章推荐
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
vue实现列表的添加点击
Dec 29 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
2014政务公开实施方案
2014/02/19 职场文书
感恩老师主题班会
2015/08/12 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS