?
在本例中，我們會通過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">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 : '單擊可以編輯...'
});
});
?
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 :? http://www.helloweba.com/view-search-74.html
?
參考：
1. http://www.appelsiini.net/projects/jeditable
2. http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html
?
?
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
