用Jeditable快速更新MySQL資料範例網頁

來源: http://blog.xuite.net/kb8.gyes/free/27183210-Jeditable%EF%BC%8C%E5%BF%AB%E9%80%9F%E4%BF%AE%E6%94%B9%E8%B3%87%E6%96%99%E5%BA%AB%E8%88%87%E8%A1%A8%E6%A0%BC%E7%9A%84%E8%B3%87%E6%96%99

之前一直在想用jQuery，將mysql顯示在網頁上的表格資料，用不換頁的方式，進行修改與刪除，但是弄了好久，只有完成新增與刪除，沒有做到修改的功能，後來找到一個好用的UI，

名叫：Jeditable，下載點在此：

http://www.appelsiini.net/projects/jeditable;

大概實作一下：

先做出一個檔案：1.php

在中加入底下標籤：

Dolor

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.

接著命名第二個檔案：1.js

加入底下的script：

$(document).ready(function() {
     $('.edit').editable('save.php', {
         indicator : 'Saving...',
         tooltip   : 'Click to edit...'
     });
     $('.edit_area').editable('save.php', {
         type      : 'textarea',    //輸入欄位的種類為textarea
         cancel    : '取消修改',
         submit    : '確認修改',
         indicator : '',
         tooltip   : 'Click to edit...'
     });
});

參數解說一下：

editable('xxx.php')：xxx.php這個檔案為用來進行修改欄位之後，進行將資料存入mysql的php頁面

indicator：正在儲存中，要顯示給使用者看的文字訊息，也能用圖片的方式

tooltip：當滑鼠經過其上方時，要顯示的提示訊息

cancel：表單上代表取消鈕的動作

submit：表單上代表送出鈕的動作

而當按下確認修改鈕之後，將會POST兩個變數給save.php這個頁面

id=您要修改的該筆資料的識別碼&value=要修改的值

嗯，沒有錯，一個變數的名稱就是id，另一個就叫value

而如果想取不一樣的變數名稱的話，請加入底下有色的兩行

$(document).ready(function() {
     $('.edit').editable(save.php', {
         id   : 'elementid',         name : 'newvalue'
     });
});

所以save.php的頁面可以這樣寫：

###############################

$id = $_POST['id'];

$value = $_POST['value'];

//如果有改變數名稱請改成底下

//

//$id = $_POST['elementid'];

//$value = $_POST['newvalue'];

  

//將$_POST['id']用explode函式拆解為$field和$id兩個變數

list($field, $id) = explode('_', $id);

  

//mysql query

mysql_query("UPDATE tb_category SET $field='$value' WHERE cId='$id'");

  

//將值傳回前端

echo $value;

#############################

而如果輸入的欄位是選單鈕的話，就要加入底下有顏色的程式：

$('.editable').editable('save.php', {
     data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
     type   : 'select',     submit : 'OK'
});

解說一下參數

data:"{'選項一的值':'選項一在表單上顯示的名稱','選項二的值':'選項二在表單上顯示的名稱'......,'selected':'選項一的值'}",

type:'select',  //輸入的欄位為選單

其中的selected就是選單預設選取的項目

而如果不想用data的方式的話，也可以改成這樣：

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

而json.php的樣子是長這樣：

###############################
 $array['E'] =  'Letter E';
$array['F'] =  'Letter F';
$array['G'] =  'Letter G';
$array['selected'] =  'F';
print json_encode($array);

###############################

要修飾外觀時，可以加入底下這個：

$('.editable').editable(save.php', {
     cssclass:'cellcolor'  //cellcolor為css檔案中的樣式名稱

     style   : 'display: inline' //顯示的方式

      });