Tad 教材網 - 線上書籍

:::

3-3 上課範例：ajax.php

4-1 上課範例：index.html next

\[1012\]PHP進階開發及TadTools工具應用
============================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1012/04.zip)

###  一、 jeditable：<http://www.appelsiini.net/projects/jeditable>

1. 此外掛可用來做「點擊編輯」的功能，是相當直覺的修改工具。
2. 支援「文字輸入框」、「大量文字框」、「下拉選單」等三種表單元件。
 
###  二、 基本用法

```
<pre class="brush: xhtml;" title="code">
<div class="edit" id='div1'>文字輸入框</div>
<div class="edit_select" id='div2'>下拉選單</div>
```

```
<pre class="brush: xhtml;" title="code">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jeditable.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
     $('.edit').editable('save.php');
     $('.edit_select').editable('save.php', {
         type      : 'select',
         cancel    : '取消',
         submit    : '儲存',
         indicator : '<img src="img/indicator.gif">'
     });
 });
</script>
```

1. 將欲修改的元件設定一個class，id則是會送出給php當作變數名稱（類似name）
2. 設定一個用來進行儲存的PHP檔，基本的寫法像這樣：
3. 您也可以設定各種參數（均非必要） 
  - type : 'text', //設定表單類型，可以是 text、textarea、select
  - indicator : 'Saving...', //儲存時呈現的文字或圖片
  - tooltip : '點此進行編輯...', //提示文字
  - loadurl : 'json.php', //預先載入的選項
  - cssclass : 'someclass', //套用CSS樣式（套用在form，而非輸入框）
  - style : 'display: inline', //直接套用樣式（套用在form，而非輸入框）
  - width: '100px', //表單元件寬度；height: '40px', //表單元件高度
  - cancel : '取消', //取消鈕；submit : '儲存', //送出鈕（沒設表示不用按鈕）
  - onblur:'submit', //離開表單元件時要進行的動作（還有cancel , ignore）
  - event: 'click', //進入編輯狀態的事件（如：dblclick，所有jquery事件均可）
  - submitdata : {op: 'save\_area' , sn : '100'}, //額外參數
  - data : {'boy':'男生' , 'girl':'女生'}, //下拉選單選項，左為值，右為呈現選項
  - placeholder : '點選編輯', //預設呈現內容（當該元件內容為空時才呈現）
4. save.php會接收到該元件的id值（$\_POST\['id'\]）及輸入的值（$\_POST\['value'\] ），若有submitdata，則會順便送出submitdata裡面設定的參數及值。
5. 此外，save.php所echo的值會出現在該元件中。
 
###  三、 TadTools中的用法

```
<pre class="brush:php;" title="code">
include_once XOOPS_ROOT_PATH."/modules/tadtools/jeditable.php";
$file="save.php";
$jeditable = new jeditable();
$jeditable->setTextCol("#id",$file,'140px','12px',"{'sn':$sn,'op' : 'save'}","點擊編輯");
$jeditable->setTextAreaCol("#id",$file,'140px','12px',"{'sn':$sn,'op' : 'save'}","點擊編輯");
$jeditable->setSelectCol("#id",$file,"{'boy':'男生' , 'girl':'女生' , 'selected':'girl'}","{'sn' : $sn , 'op' : 'save'}","點擊編輯");
$jeditable_set=$jeditable->render();
```

1. 先引入jeditable.php，再設定儲存檔$save\_file
2. 把$jeditable\_set放到表單前（或主內容之前即可）

:::