在本例中，我們會(huì)通(tōng)過jQuery實現單擊将一個(gè)文本信息變為(wèi)可(kě)編輯的表單，你(nǐ)可(kě)以對文本內(nèi)容進行(xíng)編輯，然後點擊“确定”按鈕，新的內(nèi)容将發送到後台PHP程序處理(lǐ)，并保存到數(shù)據庫；當點擊“取消”按鈕，則頁面恢複到初始狀态。

本例适用場(chǎng)景：當查看詳細資料，如用戶詳情信息，發現其中某幾個(gè)字段信息需要修改，可(kě)直接點擊該字段內(nèi)容進行(xíng)修改，節約了用戶時(shí)間(jiān)，（傳統的做(zuò)法是進入一個(gè)編輯頁面，列出所有(yǒu)編輯的字段信息，即使你(nǐ)隻需要編輯其中一兩個(gè)字段內(nèi)容，然後點擊提交）提高(gāo)了WEB響應速度，從而提高(gāo)了前端用戶體(tǐ)驗。

本例依賴jquery庫，并基于jeditable插件，具有(yǒu)以下特點：

• 實時(shí)編輯，後台實時(shí)響應，并即時(shí)完成局部刷新。
• 可(kě)自定義輸入表單類型，目前jeditable提供text,select,textarea類型。
• 響應鍵盤的回車(chē)和(hé)ESC鍵。
• 插件機制(zhì)，本例提供與jquery ui的datepicker日曆控件的整合。

下面我們來(lái)一步步講解實現過程。

XHTML

我們需要制(zhì)作(zuò)一個(gè)表格，如下：

	
	

		
		

			
			

				客戶信息
			

		

	

	

		
		

			
			

				姓名
			

			

				李小(xiǎo)三
			

			

				辦公電(diàn)話(huà)
			

			

				021-12345678
			

		

		

			
			

				稱謂
			

			

				先生(shēng)
			

			

				手機
			

			

				13800138000
			

		

		

			
			

				公司名稱
			

			

				常豐集團
			

			

				電(diàn)子郵箱
			

			

				lrfbeyond@163.com
			

		

		

			
			

				潛在客戶來(lái)源
			

			

				公共關系
			

			

				有(yǒu)限期
			

			

				2011-11-30
			

		

		

			
			

				職位
			

			

				部門(mén)經理(lǐ)
			

			

				網站(zhàn)
			

			

				www.helloweba.com
			

		

		

			
			

				創建時(shí)間(jiān)
			

			

				2010-11-04 21:11:59
			

			

				修改時(shí)間(jiān)
			

			

				2010-11-05 09:42:52
			

		

		

			
			

				備注
			

			

				備注信息
			

		

	

這是一個(gè)用戶信息的表格，從代碼中可(kě)以發現響應的字段信息的td都給了一個(gè)class和(hé)id屬性，并賦值。值得(de)一提的是表格中的td對應的id的值是和(hé)數(shù)據庫中的字段名稱一一對應的，這樣做(zuò)就是為(wèi)了在編輯時(shí)讓後台獲取相應的字段信息，後面的PHP代碼中會(huì)講到。

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渲染了表格樣式，讓表格看起來(lái)更舒服點。

jQuery

提到jquery，一定要記住在頁面的之間(jiān)要引用jquery和(hé)jeditable插件

然後開(kāi)始調用插件。

$(function(){
	 $('.edit').editable('save.php', { 
		 width     :120,
		 height    :18,
		 //onblur    : 'ignore',
         cancel    : '取消',
         submit    : '确定',
         indicator : '',
         tooltip   : '單擊可(kě)以編輯...'
     });
});

jeditable插件提供了很(hěn)多(duō)屬性和(hé)方法的調用。可(kě)以設置寬度，高(gāo)度，按鈕的文本信息，提交時(shí)的加載圖片，鼠标滑上(shàng)的提示信息等等。save.php是編輯後的信息最終提交的後台程序的地址。現在看看是不是表格中的信息可(kě)以編輯了哦。

jeditable還(hái)提供了select，textarea類型的編輯，并提供插件api接口。

來(lái)看下拉選擇框select的處理(lǐ)：

$('.edit_select').editable('save.php', { 
	loadurl   : 'json.php',
	type      : "select",
});

type指定的是select類型，select裏加載的數(shù)據來(lái)自json.php，json.php提供了下拉框所需的數(shù)據源。

$array['老客戶'] =  '老客戶';
$array['獨自開(kāi)發'] =  '獨自開(kāi)發';
$array['合作(zuò)夥伴'] =  '合作(zuò)夥伴';
$array['公共關系'] =  '公共關系';
$array['展覽會(huì)'] =  '展覽會(huì)';
print json_encode($array);

這些(xiē)數(shù)據是直接存在json.php文件裏的，當然你(nǐ)也可(kě)以通(tōng)過讀取數(shù)據庫信息，然後生(shēng)成json數(shù)據，關于如何生(shēng)成json數(shù)據，請(qǐng)查看PHP中JSON的應用。還(hái)有(yǒu)一種方法是直接在editable中指定data：

$('.edit_select').editable('save.php', { 
	data : " {'老客戶':'老客戶','獨自開(kāi)發':'獨自開(kāi)發','合作(zuò)夥伴':'合作(zuò)夥伴', '展覽會(huì)':'展覽會(huì)'}",
	type : "select",
});

不難發現，其實上(shàng)述代碼中的data就是一串json數(shù)據。

textarea類型就不再多(duō)數(shù)，将type類型改為(wèi)textarea就可(kě)以了。PS：默認類型為(wèi)text。

當處理(lǐ)日期類型時(shí)，我接入了一個(gè)jquery ui的datepicker日曆插件，當然别忘了要引入juqery ui插件和(hé)樣式：

接入jquery ui的datepicker日曆插件

$.editable.addInputType('datepicker', {
    element : function(settings, original) {
        var input = $('');
		input.attr("readonly","readonly");
        $(this).append(input);
        return(input);
    },
    plugin : function(settings, original) {
		var form = this;
		$("input",this).datepicker();
    }
});

調用的代碼直接指定type類型為(wèi)datepicker即可(kě)。

$(".datepicker").editable('save.php', { 
	width     : 120,
	type      : 'datepicker',
	onblur    : "ignore",
});

現在看看，表格中的“有(yǒu)限期”字段的日期是不是可(kě)以修改了。好了，還(hái)有(yǒu)其他更多(duō)的插件接入期待您的加入。

PHP

編輯好的字段信息會(huì)發送到後台程序save.php程序處理(lǐ)。save.php需要完成的工作(zuò)是：接收前端提交過來(lái)的字段信息數(shù)據，并進行(xíng)必要的過濾和(hé)驗證，然後更新數(shù)據表中相應的字段內(nèi)容，并返回結果。

include_once("connect.php"); //連接數(shù)據庫
$field=$_POST['id'];  //獲取前端提交的字段名
$val=$_POST['value']; //獲取前端提交的字段對應的內(nèi)容
$val = htmlspecialchars($val, ENT_QUOTES); //過濾處理(lǐ)內(nèi)容

$time=date("Y-m-d H:i:s"); //獲取系統當前時(shí)間(jiān)
if(empty($val)){
    echo "不能為(wèi)空(kōng)";
}else{
    //更新字段信息
	$query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1");
	if($query){
	   echo $val;
	}else{
	   echo "數(shù)據出錯";	
	}
}

再回到開(kāi)始的HTML代碼，表格中顯示的字段內(nèi)容信息當然是從數(shù)據庫讀取來(lái)的，所以要用PHP讀取數(shù)據表，把內(nèi)容顯示出來(lái)就OK，詳細過程大(dà)家(jiā)自己寫一個(gè)吧(ba)。

如此，可(kě)編輯的表格就此收工。但(dàn)是還(hái)不能完工，關于對輸入信息的有(yǒu)效性的驗證問題我還(hái)在研究，後面的文章我會(huì)陸續附上(shàng)，敬請(qǐng)關注，也期待各位朋友(yǒu)的加入。