jQuery PHP實作可編輯表格欄位內容並即時儲存

本例適用場景：當查看詳細資料，如用戶詳情信息，發現其中某幾個字段信息需要修改，可直接點擊該字段內容進行修改，節約了用戶時間，（傳統的做法是進入一個編輯頁面，列出所有編輯的字段信息，即使你只需要編輯其中一兩個字段內容，然後點擊提交）提高了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，一定要記得在頁面的之間要引用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，詳細過程大家自己寫一個吧。
如此，可編輯的表格就此收工。但是還不能完工，關於對輸入資訊的有效性的驗證問題後面的文章我會陸續附上，敬請關注。

希望小編整理的每一篇文章都對大家有幫助。