Jeditable - jQuery就地编辑插件在ASP.NET MVC 中的使用 （一）Jeditable 简介
一：基本用法：再head中插入
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jeditable.mini.js"></script>
<div class="edit" id="div_1">Dolor</div> <div class="edit_area" id="div_2">test文字</div>
1.只有一个强制参数,发送内容的后台地址
$(document).ready(function() { $('.edit').editable('http://www.example.com/save.php'); });
2.自动匹配被编辑元素的宽高，当提交的时候，就提交到save.php 类edit_area可以做为textarea输入框. 还可以设置编辑后等待时文字信息或图像，编辑前悬停提示框，设置确定或者取消。
$(document).ready(function() {
$('.edit').editable('http://www.example.com/save.php', {
indicator : 'Saving...', //loading...时显示的内容，可以是img也可以是文本等
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...' }); });
继续...
3.加载外部到内容编辑框 设置loadurl参数，示例：
$(document).ready(function() {
$('.edit_area').editable('http://www.example.com/save.php',
{
loadurl : 'http://www.example.com/load.php',
type : 'textarea',
submit : 'OK'
}); });
load.php文件应该返回纯文本的内容，而不XHML，因为要显示在输入框中，而save.php则应该返回XHTML内容，另外还有一个选择就是标记数据源参数。
4.怎么使用SELECT?
可以使用JSON数组，这个数组通过data参数来设置，可以考虑通过loadur来返回，数组关联名称是<option>标签的name,数组的值则是<option>之间的值
JSON 数组如以下格式：
{'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}注意最后一个选择，当使用 'select'为名称时,后面跟着默认选中的name，示例：
$('.editable').editable('http://www.example.com/save.php',
{
data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
type : 'select',
submit : 'OK'
});
也可以通过loadurl外部加载动态的JSON数据：
脚本示范：
<?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加载：
$('.editable').editable('http://www.example.com/save.php', { loadurl : 'http://www.example.com/json.php', type : 'select', submit : 'OK' }); 如果担心消耗服务器资源，可以直接在javascript脚本中设定，如：
<?php $array['E'] = 'Letter E'; $array['F'] = 'Letter F';
$array['G'] = 'Letter G'; $array['selected'] = 'F'; ?> $('.editable').editable('http://www.example.com/save.php', {
data : '<?php print json_encode($array); ?>', type : 'select', submit : 'OK' });
5.用提交函数的方式代替URL
$('.editable').editable(function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return(value);
}, {
type :
'textarea',
submit : 'OK',
});
注意函数必须返回字符串，
6参数设置
indicator : 'Saving...', //loading...时显示的内容，可以是img也可以是文本等
data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",//设置显示在文本框或者下拉框的数据，
tooltip : 'Click to edit...' //设置显示在使用就地编辑插件的位置上显示的文字提示
loadurl : 'http://www.example.com/load.php',//动态获取显示在编辑框中的数据；可以使文本或Json
id : 'elementid', //提交到后台的编辑位置上的ID,可以是td的id。。。
name : 'newvalue' //提交到后台的value值，后台可通过requrest["newvalue"]获取
(String) type: 输入型类型，text, textarea or select. 自己定义的输入类型的API.
(Integer) rows: 使用textarea时定义行数.
(Integer) cols: 使用textarea时定义列数.
(Integer) height: 定义输入框的高度，单位是像素（px），默认是 auto. 意思是自动计算. 也可以设置为 none.
(Integer) width: 定义输入框的宽度，单位是像素（px），默认是 auto. 意思是自动计算. 也可以设置为 none.
(Integer) loadurl: 加载外部数据到输入框中，可以是普通字符串，也是JSON
$(".editable").editable("http://www.example.com/save.php";, { loadurl : "http://www.example.com/load.php" });
注意编辑元素的ID会自动添加到查询字符串，如：
http://www.example.com/load.php?id=element_id (Integer)
loadtype: 使用loadurl时的请求类型. 默认是GET. 可能用的只是GET和 POST之一.
(Mixed) loaddata: 使用loadurl的时候额外的请求参数，可以是一个哈希或函数返回一个哈希。
$(".editable").editable("http://www.example.com/save.php";, { loaddata : {foo: "bar"}; }); $(".editable").editable("http://www.example.com/save.php";, { loaddata : function(value, settings) { return {foo: "bar"}; } }); (Mixed) data:
可以是一个字符串或者函数返回的函数. 设置成编辑框的内容。
$(".editable").editable("http://www.example.com/save.php";, { data : "Lorem ipsum"; });
$(".editable").editable("http://www.example.com/save.php";, {
data: function(value, settings) {
/* Convert <br> to newline. */
var retval = value.replace(/<br[\s\/]?>/gi, '\n');
return retval;
} });
默认如果点击了编辑框之外就是取消编辑了，也可以设置 onblur 选项，以下选项
•onblur : cancel 点击编辑框之外的区域取消修改，点击submit按钮就提交修改。 •onblur : submit 点击编辑框之外的区域提交修改 •onblur : ignore 忽略编辑框外部的点击和按ESC键，点击submit按钮就提交修改。 可以使用事件响应，所有的Jquery时间都支持，一般使用 click 和 dbclick，单击和双击，还有 mouseover，鼠标感应。
7.如何修饰样式
可以设置输入框的class名称和样式参数，首先，在css中定义css名称，然后设置cssclass参数，第二，可以直接设置css样式参数。如：
$('.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' });
2个方式都可以设置inherit属性，如果不设置inherit就不会继承父属性，如：
Lorem <span class="editable" style="display: inline">ipsum</span> dolor sit amet.
$('.editable').editable('http://www.example.com/save.php', {
loadurl : 'http://www.example.com/json.php',
type : 'select', submit : 'OK', style : 'inherit'
});
二：发送到服务器的内容
1.当提交并且发送以下格式的信息给服务器：ID=HTML中的ID号，vause=输入框的内容。
有个时候，如果需要改变参数名称，比如像下面的格式：
elementid=elements_id&newvalue=user_edited_content
那么可以添加2个参数
$(document).ready(function() {
$('.edit').editable('http://www.example.com/save.php',
{
id : 'elementid',
name : 'newvalue'
}); });
2.(String) method: 提交方法默认为 POST. 最有可能使用Post和Input
(Function) callback: 当提交之后调用的函数，有2个参数(value, settings)，Value包括了From的内容，Settings包含了所有插件设置，原来的元素的内部函数。
$('.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);
} });
(String) name: 设置提交参数的名称，默认是value。
$('.editable').editable('http://www.example.com/save.php', { name : 'new_value' });
(String) id: 设置提交的输入框的ID号. 默认是 id.
$('.editable').editable('http://www.example.com/save.php', { id : 'element_id' }); (Mixed) submitdata: 表单提交时额外的参数，可以是哈希，或者函数返回的哈希。
$(".editable").editable("http://www.example.com/save.php";, {
submitdata : {foo: "bar"}; });
$(".editable").editable("http://www.example.com/save.php";, {
submitdata : function(value, settings) {
return {foo: "bar"};
} });
官方地址：http://www.appelsiini.net/projects/jeditable
浙公网安备 33010602011771号