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

2024-09-28 00:19:01

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

本例依赖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，详细过程大家自己写一个吧。
如此，可编辑的表格就此收工。但是还不能完工，关于对输入信息的有效性的验证问题后面的文章我会陆续附上，敬请关注。

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

jQuery 实现双击编辑表格功能

先给大家展示下效果图: 下面用简单方法实现的简单表格编辑功能: 简单的HTML代码略过了,下面是js实现过程 JavaScript: <span style="font-size:18px;">$(".tables").on("dblclick","td",function(){ if($(this).children("input").length>0){ return false; }
jQuery(非HTML5)可编辑表格实现代码

功能: 单击单元格选中,选中过程中使用方向键更换选中的单元格,选中过程中按回车键或者直接双击单元格进入可编辑状态,单元格失去焦点时保存修改的内容. 主要实现思路: 选中,移动选中区域等都是依靠jQuery强大的API进行实现的.而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据源代码: HTML代码: 复制代码代码如下: <table class="editableTable"> <thead> <tr>
基于Bootstrap使用jQuery实现简单可编辑表格

editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu
jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera

要实现可编辑的表格功能,我们要解决以下问题: 1.明确要修改的数据在表格中是哪些列(如何找到这些单元格); 2.如何让单元格变成可以编辑的; 3.如何处理单元格的一些按键事件; 4.解决跨浏览器问题. 我们通过jQuery可以一步一步解决上述问题. 一. 绘制表格首先我们先画好一个表格. Code1: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
BootStrap和jQuery相结合实现可编辑表格

editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

下面是js Code: 复制代码代码如下: $(function() { // 相当于在页面中的body标签加上onload事件 $(".caname").click(function() { // 给页面中有caname类的标签加上click函数 var objTD = $(this); var oldText = $.trim(objTD.text()); // 保存老的类别名称 var input = $("<input type='text' value='&
jQuery+PHP实现可编辑表格字段内容并实时保存

本例适用场景:当查看详细资料,如用户详情信息,发现其中某几个字段信息需要修改,可直接点击该字段内容进行修改,节约了用户时间,(传统的做法是进入一个编辑页面,列出所有编辑的字段信息,即使你只需要编辑其中一两个字段内容,然后点击提交)提高了WEB响应速度,从而提高了前端用户体验. 本例依赖jquery库,并基于插件,具有以下特点: 实时编辑,后台实时响应,并即时完成局部刷新. 可自定义输入表单类型,目前jeditable提供text,select,textarea类型. 响应键盘的回车和ESC键.
jQuery实现的可编辑表格完整实例

本文实例讲述了jQuery实现的可编辑表格.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha
一个可以增加和删除行的table并可编辑表格中内容

页面文件复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript" src="jquery-1.6.min.js"></scrip
JQuery Ajax动态生成Table表格

前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q
jQuery实现可编辑表格并生成json结果(实例代码)

实现效果如下,在编辑表格的同时可以实现字段json内容的自动变化,点击提交可以保存到后台,页面加载的时候自动解析json并加载表格内容.该代码解析和加载功能都用前端js实现,简化了后台代码逻辑. 定义要操作的表格头: <input readonly="readonly" class="form-control" type="text" id="scorerange" value="" name=&qu
JQuery实现可直接编辑的表格

本文实例讲述了JQuery实现可直接编辑的表格.分享给大家供大家参考.具体分析如下: 功能: 创建一个表格,用户单击某个单元格后,可以直接修改单元格文本. 在编辑状态下,用户可按回车键确认修改,按ESC键撤销修改. 效果如下图: 思路: 当用户点击某个单元格后,立即向该单元格内插入一个文本框,将它的宽.高都设置成与单元格相的数值.用户确认输入后,清空该单元格内的所有HTML代码,然后把内容设置为用户刚刚输入的文本. HTML代码: <table align="center">

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

相关推荐

随机推荐