可编辑的表格:jQuery+PHP实现实时编辑表格字段内容

在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库;当点击“取消”按钮,则页面恢复到初始状态。

查看演示 下载源码

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

本例依赖jquery库,并基于jeditable插件,具有以下特点:

  • 实时编辑,后台实时响应,并即时完成局部刷新。
  • 可自定义输入表单类型,目前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">[email protected]</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   : ‘单击可以编辑...‘      }); }); 

jeditable插件提供了很多属性和方法的调用。可以设置宽度,高度,按钮的文本信息,提交时的加载图片,鼠标滑上的提示信息等等。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数据,请查看PHP中JSON的应用。还有一种方法是直接在editable中指定data:

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

不难发现,其实上述代码中的data就是一串json数据。

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(‘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(empty($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,详细过程大家自己写一个吧。

如此,可编辑的表格就此收工。但是还不能完工,关于对输入信息的有效性的验证问题我还在研究,后面的文章我会陆续附上,敬请关注,也期待各位朋友的加入。

声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接:http://www.helloweba.com/view-blog-74.html

时间: 2024-10-18 08:54:13

可编辑的表格:jQuery+PHP实现实时编辑表格字段内容的相关文章

Jquery无刷新实时更新表格数据

html代码: <table width="600" align="center">  <tr class="head">  <th>First</th><th>Last</th>  </tr>  <?php  $sql=mysql_query("select * from add_delete_record");  $i=1;  whi

JQuery实现可直接编辑的表格

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

jquery 表格排序,实时搜索表格内容

jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sor

基于Bootstrap使用jQuery实现简单可编辑表格

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

Ajax实现表格实时编辑

如果我们的对于一个表格中所有的数据都能在本页进行操作那该是多酷炫的一件事(用起来炒鸡爽)! 用Ajax就可以实现这个功能啦.废话不多说,下面贴出我写的demo吧哈哈.我用的TP框架(3.2)比较习惯啦. 首先是HTML代码部分: ##################################################################### <!DOCTYPE html><html lang="en"><head> <

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

第二百二十五节,jQuery EasyUI,PropertyGird(属性表格)组件

jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的使用方法,这个组件依赖 于 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <table id="box" class="easyui-propertygrid" style="width:300px" data-opt

jQuery整理笔记九----功能性表格开发

示例中用到的一些图片.插件.样式文件等下载地址:点我进入下载 过去在开发过程中关于table方面的jquery应用仅仅是局限于使用jquery操作table增加一行.删除一列等等操作.今天整理的跟过去用的不一样. 1.uiTableFilter uiTableFilter是一款表格数据行过滤插件,使用很简单,具体用法如下: $.uiTableFilter(table,phrase)  该函数包含两个参数,其中第一个参数为jQuery对象,即为jQuery方法匹配的表格,或者也可以是jQuery匹

jQuery ajax 动态append创建表格出现不兼容ie8

很多情况下,通过js(jQuery1.10)动态来创建一些样式,对页面的动态交互来说是很方便的 但是不同的浏览器针对动态生成的不是很兼容,在此遇见的不兼容ie8,跟各位分享下 代码: json数据 data.json [{"name":"ajax","job":"manong"},{"name":"js","job":"diaosi"}] html