可編者的表格：jQuery+PHP+jeditable實現即時編輯表格欄位內容

可編輯的表格：jQuery+PHP+jeditable實現即時編輯表格欄位內容

介紹一款超級實用的jquery外掛程式叫jeditable，即傳說中的即時編輯外掛程式。所謂即時編輯就是，實現無重新整理修改網頁內容的一個功能，並且無需重新整理即可即時顯示修改結果。具體舉例，見外掛程式官方網站的demo：http://www.appelsiini.net/projects/jeditable/custom.html，點擊可修改的文本即可！

//參數設定

$('.edit').editable('save.php', {
width :120,
height :18,
//onblur : "ignore",
cancel : '取消',
submit : '確定',
indicator : '',
tooltip : '單擊可以編輯...',
callback : function(value, settings) {
$("#modifiedtime").html("剛剛");
}

//select參數設定，其他方式見連結 參考文檔1

$('.edit_select').editable('save.php', {
loadurl : 'json.php',
type : "select",
cancel : '取消',
submit : '確定',
indicator : '',
tooltip : '單擊可以編輯...',
style : 'display: inline'
});

//調用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();
}

demo下載

參考文檔1

查考文檔2

查考文檔3

