jquery插件 ajax编辑插件

这个插件,自己生产制造,可以让一些本来不可编辑的标签可编辑化.

在开发网站的时候,经常会需要'增删改查'.尤其是改的时候,如果数据是以表格的形式呈现的,我们希望直接在表格里面修改,而不是点击某个编辑按钮进入到另一张页面来修改.通常的做法是把每个td标签里面加入<input type='text' />类似的编辑框.但是这样一来又会影响美观.于是有了这种需要:在查看的时候以表格的形式呈现,当我们需要编辑某条数据的某个字段的时候,那个<td>的内容就变成可编辑的,编辑完成之后,自动后台ajax提交到服务器进行修改.

这个插件,就是用来完成这个功能的.

我们有如下代码:

<table width="375" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="87">网站地址:</td>
    <td width="282">http://www.zeroplace.cn</td>
  </tr>
  <tr>
    <td>网站名称:</td>
    <td>第零空间</td>
  </tr>
</table>

比如我们需要编辑网站名称"第零空间",那么我们只需要双击"第零空间"这几个字,就可以进入编辑模式.

如果不需要编辑,按键盘ESC键即可取消编辑,如果编辑好了,敲一下回车键就可以把数据写入.

要实现上面功能,需要在头部加入以下代码

<script type="text/javascript" src="static/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="static/plus/jq.edit.js"></script>

<script language="javascript">
$(function(){
  $('td').editable();
 });

</script>

第一个是jquery库,这时每个jquery插件必须要的,

第二个是插件的核心库

第三个script,表明把所有的td元素都处理成上面所说的单元格类型.

$.editable()支持一个回调函数,形式为:

function(val,obj){}

val是新的值,obj是单元格的jquery对象,传入这个值是为了方便ajax更新.

下面是下载地址:点击下载此文件

演示:http://www.zeroplace.cn/editable/editable.html