本例適用情境：當查看詳細資料，如使用者詳情資訊，發現其中某幾個欄位資訊需要修改，可直接點擊該欄位內容進行修改，節約了使用者時間，（傳統的做法是進入一個編輯頁面，列出所有編輯的欄位資訊，即使你只需要編輯其中一兩個欄位內容，然後點擊提交）提高了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，詳細過程大家自己寫一個吧。
如此，可編輯的表格就此收工。但是還不能完工，關於對輸入資訊的有效性的驗證問題後面的文章我會陸續附上，敬請關注。
希望小編整理的每一篇文章都對大家有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
