Jquery编辑数据

效果在这里！点击数据项就可以进行编辑。最常看到这样的效果是在Flickr上（被河蟹很久了），要修改图片说明点一点就可以操作。我试着用jquery来实现这个功能……

假设DOM上已经存在下面的元素：

<div id=”data_1″><div id=”data_div_1″ οnclick=”edititem(1,’boho’);”>boho</div></div>
<div id=”data_2″><div id=”data_div_2″ οnclick=”edititem(2,’boho.net@gmail.com’);”>boho.net@gmail.com</div></div>
<div id=”data_3″><div id=”data_div_3″ οnclick=”edititem(3,’http://www.lzby.net/boho/blog’);”>http://www.lzby.net/boho/blog</div></div>

data_div_1，data_div_2，data_div_3元素都接受点击事件，并执行edititem函数。为了避免在编辑状态下也触发onclick事件，所以这三个元素分别嵌到外层的data_1，data_2，data_3元素里。外层的元素将会被edititem函数设置新的html。edititem函数体：

function edititem(div_id,div_val){
    var show=”<input οnblur=/”editok(”+div_id+”,this.value);/” type=/”text/” id=/”data_edit_”+div_id+”/” value=/”"+div_val+”/” />”;
    $(”#data_”+div_id).html(show);
    $(”#data_edit_”+div_id).focus();
}

函数有两个参数，div_id参数是告知函数将要对哪一个外层DIV元素设置新的html。如果传来1就对data_1这个元素设置html。div_val参数是原数据的值，传过来是为了提供在编辑状态下默认的数据值。要不然编辑状态下空空的，不是个好的用户体验。函数首先设置show变量，赋予新的html代码，然后再把代码设置到外层元素DIV中。事实上就是把编辑框设置到元素中，并马上放置焦点到该编辑框内等待用户进行编辑。该编辑框有一个离开焦点的onblur事件，当编辑框离开焦点后执行editok函数。editok函数体：

function editok(div_id,div_val){
    var show=”<div id=/”data_div_/”"+div_id+” οnclick=/”edititem(”+div_id+”,’”+div_val+”‘);/”>”+div_val+”</div>”;
    $(”#data_”+div_id).html(show);
}

函数同样有两个参数，div_id参数也是告知函数要把编辑后的新值设置到哪个DIV元素里。div_val参数就是编辑后的新数据值，编辑框已经把this.value（编辑框当前值）传了过来，函数要做的就是把值设置到div元素中去，表示编辑成功。设置新值要注意，要把被嵌入外层div的内层元素连同点击事件一同设置进去，要不然光设置新值，没有点击事件的div，再想点击编辑就不能实现了……

这只是简单的编辑，如果调用jquery的$.post对象，可以把新值post到数据库里，稍稍改一下editok函数就可以实现同步新数据到数据库里。

这些功能在asp.net ajax里也是很容易实现的，asp.net本身就有gridview控件，控件可以设置数据的编辑状态。只要在控件之外套上UpdatePanel就可以了。也是个很强大的应用……