这是一个真正可定制的jQuery editable plugin。当前它能够将任意不可编辑的标签(span、div、p…等)转换成可编辑的text input、password、textarea、下拉列表(drop-down list)等标签。你可以利用它的editableFactory对象来扩展添加自己所需的input type。
先引入插件的js文件,在页面放置要编辑的文字:
<div class=”d”>编辑的文字</div>
接着就是实现功能了
$(“.d”).editable();
很简单吧!要实现更多的效果就要给这个插件带入些参数了,若不带参数,是使用插件默认的。
你可以象下面这样使用:
$(selector).editable(‘disable’)
$(selector).editable(‘enable’)
$(selector).editable(‘destroy’)
上面的三个实例我想不说明你也知道是什么意思了,不明白可以自己亲自试试看,关键我们看看下面的用法
$(selector).editable(options)
这个options就稍有点复杂,使用是以下面的形式:
$(selector).editable({
type:
editBy:
submitBy:
submit:
…
})
我只说几个用的多一点的参数,其他的可以自己看官网。type :可以是 ‘text’,’password’,textarea’,’select’
比如:
$(selector).editable({type:textarea})
若type是select,就要另外给select指定option了
$(“.d”).editable({
type:select,
options:{‘选项1′:’值1′,’选21′:’21’,’选项3′:’值3′}
});
editBy :可以是’click’,’dblclick’,’change’,’blur’,就是说是单击的时候编辑还是双击的时候编辑,…
editClass :编辑的时候的样式
submitBy :提交的方式,可以是 ‘blur’,’dblclick’,’change’,’click’
onSubmit :提交的时候执行的函数
说了这么多,大家能关心的是既然可以编辑文字,那怎么把编辑后的结果保存呢??这个就要用到onSubmit了,我们可以在onSubmit的时候调用一个函数,执行ajax请求把结果保存到数据库。
/********************************************/以上部是粘贴自别人的部分,我在做开发的时候,也试过这个插件,我从一个用户的角度来考虑用户习惯,当我们要大量在表格中录入数据的时候,我们希望通过点击tab键
就可以切换到下一个表单上,并处于编辑状态,其实综上要实现这个效果并不难
$("#main_table2 tr td").not(":nth-child(9n-5)").editable({ submitBy:"blur", onSubmit:function(){ $(this).next().trigger("click"); } }); $("#main_table2 tr td:nth-child(9n-5)").editable({ type:"select", options:{"none":"","man":"男","women":"女"}, onSubmit:function(){ $(this).next().trigger("click"); } });
类似上面我写的部分,只要在指定的onsubmit回调函数的时候,通过jquery中的trigger事件模拟用户的点击事件,就可以完成我说的效果了