快捷導(dǎo)航

jQuery+PHP實(shí)現(xiàn)可編輯表格字段內(nèi)容并實(shí)時(shí)保存

更新時(shí)間：2015年10月09日 11:40:12 投稿：lijiao

在本例中，我們會(huì)通過jQuery實(shí)現(xiàn)單擊將一個(gè)文本信息變?yōu)榭删庉嫷谋韱?，你可以?duì)文本內(nèi)容進(jìn)行編輯，然后點(diǎn)擊“確定”按鈕，新的內(nèi)容將發(fā)送到后臺(tái)PHP程序處理，并保存到數(shù)據(jù)庫；當(dāng)點(diǎn)擊“取消”按鈕，則頁面恢復(fù)到初始狀態(tài)，需要的朋友可以參考下

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

本例依賴jquery庫，并基于插件，具有以下特點(diǎn)：
實(shí)時(shí)編輯，后臺(tái)實(shí)時(shí)響應(yīng)，并即時(shí)完成局部刷新。
可自定義輸入表單類型，目前jeditable提供text,select,textarea類型。
響應(yīng)鍵盤的回車和ESC鍵。
插件機(jī)制，本例提供與jquery ui的datepicker日歷控件的整合。
下面我們來一步步講解實(shí)現(xiàn)過程。
XHTML
我們需要制作一個(gè)表格，如下：

<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">手機(jī)</td> 
  <td class="edit" id="mobile">13800138000</td> 
 </tr> 
 <tr> 
  <td class="table_label">公司名稱</td> 
  <td class="edit" id="company">常豐集團(tuán)</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">公共關(guān)系</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">部門經(jīng)理</td> 
  <td class="table_label">網(wǎng)站</td> 
  <td class="edit" id="web">www.helloweba.com</td> 
 </tr> 
 <tr> 
  <td class="table_label">創(chuàng)建時(shí)間</td> 
  <td>2010-11-04 21:11:59</td> 
  <td class="table_label">修改時(shí)間</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>

這是一個(gè)用戶信息的表格，從代碼中可以發(fā)現(xiàn)響應(yīng)的字段信息的td都給了一個(gè)class和id屬性，并賦值。值得一提的是表格中的td對(duì)應(yīng)的id的值是和數(shù)據(jù)庫中的字段名稱一一對(duì)應(yīng)的，這樣做就是為了在編輯時(shí)讓后臺(tái)獲取相應(yīng)的字段信息，后面的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渲染了表格樣式，讓表格看起來更舒服點(diǎn)。
jQuery
提到j(luò)query，一定要記住在頁面的<head>之間要引用jquery和jeditable插件

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jeditable.js"></script>

然后開始調(diào)用插件。

$(function(){ 
  $('.edit').editable('save.php', { 
   width  :120, 
   height :18, 
   //onblur : 'ignore', 
   cancel : '取消', 
   submit : '確定', 
   indicator : '<img src="loader.gif">', 
   tooltip : '單擊可以編輯...' 
  }); 
});

插件提供了很多屬性和方法的調(diào)用。可以設(shè)置寬度，高度，按鈕的文本信息，提交時(shí)的加載圖片，鼠標(biāo)滑上的提示信息等等。save.php是編輯后的信息最終提交的后臺(tái)程序的地址?，F(xiàn)在看看是不是表格中的信息可以編輯了哦。
jeditable還提供了select，textarea類型的編輯，并提供插件api接口。
來看下拉選擇框select的處理：

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

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

$array['老客戶'] = '老客戶'; 
$array['獨(dú)自開發(fā)'] = '獨(dú)自開發(fā)'; 
$array['合作伙伴'] = '合作伙伴'; 
$array['公共關(guān)系'] = '公共關(guān)系'; 
$array['展覽會(huì)'] = '展覽會(huì)'; 
print json_encode($array);

這些數(shù)據(jù)是直接存在json.php文件里的，當(dāng)然你也可以通過讀取數(shù)據(jù)庫信息，然后生成json數(shù)據(jù)，關(guān)于如何生成json數(shù)據(jù)，請(qǐng)查看。還有一種方法是直接在editable中指定data：

$('.edit_select').editable('save.php', { 
 data : " {'老客戶':'老客戶','獨(dú)自開發(fā)':'獨(dú)自開發(fā)','合作伙伴':'合作伙伴', '展覽會(huì)':'展覽會(huì)'}", 
 type : "select", 
});

不難發(fā)現(xiàn)，其實(shí)上述代碼中的data就是一串json數(shù)據(jù)。
textarea類型就不再多數(shù)，將type類型改為textarea就可以了。PS：默認(rèn)類型為text。
當(dāng)處理日期類型時(shí)，我接入了一個(gè)jquery ui的日歷插件，當(dāng)然別忘了要引入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(); 
 } 
});

調(diào)用的代碼直接指定type類型為datepicker即可。

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

現(xiàn)在看看，表格中的“有限期”字段的日期是不是可以修改了。好了，還有其他更多的插件接入期待您的加入。
PHP
編輯好的字段信息會(huì)發(fā)送到后臺(tái)程序save.php程序處理。save.php需要完成的工作是：接收前端提交過來的字段信息數(shù)據(jù)，并進(jìn)行必要的過濾和驗(yàn)證，然后更新數(shù)據(jù)表中相應(yīng)的字段內(nèi)容，并返回結(jié)果。

include_once("connect.php"); //連接數(shù)據(jù)庫 
$field=$_POST['id']; //獲取前端提交的字段名 
$val=$_POST['value']; //獲取前端提交的字段對(duì)應(yīng)的內(nèi)容 
$val = htmlspecialchars($val, ENT_QUOTES); //過濾處理內(nèi)容 
 
$time=date("Y-m-d H:i:s"); //獲取系統(tǒng)當(dāng)前時(shí)間 
if(emptyempty($val)){ 
 echo "不能為空"; 
}else{ 
 //更新字段信息 
 $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1"); 
 if($query){ 
  echo $val; 
 }else{ 
  echo "數(shù)據(jù)出錯(cuò)"; 
 } 
}

再回到開始的HTML代碼，表格中顯示的字段內(nèi)容信息當(dāng)然是從數(shù)據(jù)庫讀取來的，所以要用PHP讀取數(shù)據(jù)表，把內(nèi)容顯示出來就OK，詳細(xì)過程大家自己寫一個(gè)吧。
如此，可編輯的表格就此收工。但是還不能完工，關(guān)于對(duì)輸入信息的有效性的驗(yàn)證問題后面的文章我會(huì)陸續(xù)附上，敬請(qǐng)關(guān)注。

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

您可能感興趣的文章: