參考網址:https://izo.tw/jeditable/
有時候我們會懶得登入phpmyadmin,
於是我們是可以製作一個前台的 MYSQL 管理表單,即點即編。
就是設置『點擊修改表單』的功能啦。
我們需要運用到jQuery的jeditable,去製作一個PHP的頁面。
https://blog.xuite.net/kb8.gyes/free/27183210#
之前一直在想用jQuery,將mysql顯示在網頁上的表格資料,用不換頁的方式,進行修改與刪除,但是弄了好久,只有完成新增與刪除,沒有做到修改的功能,後來找到一個好用的UI,
名叫:Jeditable,下載點在此:
http://www.appelsiini.net/projects/jeditable;
大概實作一下:
先做出一個檔案:1.php
在<body></body>中加入底下標籤:
<div class="edit" id="div_1">Dolor</div>
<div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</div>
接著命名第二個檔案: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 : '<img src="img/indicator.gif">',
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' //顯示的方式
});
參數:
https://www.tad0616.net/modules/tad_book3/html.php?tbdsn=306
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 1.method:傳輸方法,可用post或put 2.callback:指定送出資料後要執行的函數 3.name:設定欄位name名稱 4.id:設定欄位id名稱 5.submitdata:額外要送出的資料 6.type:欄位類型,可用text、textarea、select 7.rows:textarea的列高 8.cols:textarea的欄寬 9.height:欄位高度,其值可為:auto、none或指定高度(單位為px) 10.width:欄位寬度,其值可為:auto、none或指定寬度(單位為px) 11.loadurl:在欄位中載入指定連結之內容 12.loadtype:載入連結之請求類型,可為GET或POST 13.loadtext:載入額外資料時要呈現的文字 14.loaddata:擷取編輯內容前要傳送的額外參數 15.data:預設值 16.indicator:儲存時的顯示內容,可用HTML 17.tooltip:提示說明 18.event:jquery事件,如:click或dblclick 19.submit:送出的按鈕文字 20.cancel:取消的按鈕文字 21.cssclass:要套用的 class 名稱,是套到該元件的上一層。 22.style:直接指定style樣式,是套到該元件的上一層。 23.select:true 或 false,當選擇文字被標記時 24.placeholder:空值時,要呈線的內容 25.onblur:該元件不在焦點上時,要進行的動作:cancel、submit、ignore或 function |