Jeditable - jQuery就地编辑插件的使用

    jeditable是一个jquery插件，它的优点是可以就地编辑，并且提交到服务器处理，是一个不可多得的就地编辑插件。(注： 就地编辑，也有称即时编辑？一般的流程是这样的，当用户点击网页上的文字时，该文字就会出现在一个编辑框中，用户对文字进行修改完成后点击提交按钮，新的文本将发送到服务器上，然后表单消失，显示最新编辑的文本。),你可以通过这个演示页面来亲自体验下。

    官网:http://www.appelsiini.net/projects/jeditable

基本的使用方法如下：

首先编辑一个 html 文件，包含这么一段：

<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>

然后我们使用如下的 JS 代码来实现即时编辑（要先引入 Jeditable 插件）：

$(document).ready(function() {
    $(".edit").editable("http://www.example.com/save.php");
});

 

实现不同内容的编辑以及更多的定制项：

$(document).ready(function() {
    $(".edit").editable("http://www.example.com/save.php", {
        indicator : "Saving...",
        tooltip   : "Click to edit..."
    });
    $(".edit_area").editable("http://www.example.com/save.php", { 
        type      : "textarea",
        cancel    : "Cancel",
        submit    : "OK",
        indicator : "<img src="img/indicator.gif">",
        tooltip   : "Click to edit..."
    });
});

上面的定制项包括按钮的文本，提示信息以及提交时的 loading 图片显示等等。

那么当用户点击了确定按钮时，发送到服务器上的是什么数据呢？

数据内容包含了编辑框的 ID 以及新的内容：id=elements_id&value=user_edited_content

你也可以使用下面的方法来修改默认的参数名：

$(document).ready(function() {
    $(".edit").editable("http://www.example.com/save.php", { 
        id   : "elementid",
        name : "newvalue"
    });
});

修改后传递的数据变成：elementid=elements_id&newvalue=user_edited_content

如果单行文本框不注意满足你的要求，可以使用 textarea 多行文本编辑框：　

$(document).ready(function() {
    $(".edit_area").editable("http://www.example.com/save.php", { 
        loadurl  : "http://www.example.com/load.php",
        type    : "textarea",
        submit  : "OK"
    });
});

另外 Jeditable 还支持下拉选择框哦：

$(".editable").editable("http://www.example.com/save.php", { 
    data   : " {"E":"Letter E","F":"Letter F","G":"Letter G", "selected":"F"}",
    type   : "select",
    submit : "OK"
});

 

或者你也可以从服务器获取下拉选择的数据内容：

<?php
 /* http://www.example.com/json.php */
 $array["E"] =  "Letter E"; 
 $array["F"] =  "Letter F"; 
 $array["G"] =  "Letter G"; 
 $array["selected"] =  "F";
 print json_encode($array);
?>

然后通过 loadurl 指定这个服务器输出数据的 URL 地址：

$(".editable").editable("http://www.example.com/save.php", { 
    loadurl : "http://www.example.com/json.php",
    type   : "select",
    submit : "OK"
});

 

如果你希望给组件设定不同的样式，可以这样：

$(".editable").editable("http://www.example.com/save.php", { 
    cssclass : "someclass"
});

$(".editable").editable("http://www.example.com/save.php", { 
    loadurl : "http://www.example.com/json.php",
    type    : "select",
    submit  : "OK",
    style   : "display: inline"
});　　

或者：

$(".editable").editable("http://www.example.com/save.php", { 
    loadurl : "http://www.example.com/json.php",
    type    : "select",
    submit  : "OK",
    style   : "inherit"
});

最后来点高级的内容，如果你希望使用一个 JS 函数而不是 URL 来处理提交，可以这样：

$(".editable").editable(function(value, settings) { 
    console.log(this);
    console.log(value);
    console.log(settings);
    return(value);
 }, { 
    type    : "textarea",
    submit  : "OK",
});

处理回调：　

$(".editable").editable("http://www.example.com/save.php", { 
    type     : "textarea",
    submit   : "OK",
    callback : function(value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
    }
});

使用附加参数：

$(".editable").editable("http://www.example.com/save.php";, {
   submitdata : {foo: "bar"};
});

 

直接从URL获取显示内容：

$(".editable").editable("http://www.example.com/save.php";, {
    loadurl : "http://www.example.com/load.php"

});

英文原文：http://www.appelsiini.net/projects/jeditable