编辑-标签--Seerph

03 24 2009

mootools的inline编辑

分类: mootools 标签: mootools inline 编辑阅读: 233

大家可能都见过这种效果，一点击网页中的特定文字，同时就进入编辑状态当编辑完成后。又把编辑后的文字保存到数据库中了。

我使用mootools来实现本次效果。

首先定义javasctipt函数

JavaScript代码

function inlineEdit(el,u,id){
var editing;
el.addEvent('dblclick',function(){
if(editing) return;
editing = true;
var before = el.get('html').trim();
el.set('html','');
var input = new Element('input', { 'value':before });
input.setStyle('width','95%');
input.addEvent('keydown', function(e) { if(e.key == 'enter') { this.fireEvent('blur'); } });
input.inject(el).select();
input.addEvent('blur', function() {
val = input.get('value').trim();
var name = el.get('rel');
if(before != val){
new Request({
url:u,
onSuccess: function(){el.set('text',val);},
onFailure: function(){el.set('text',before);}
}).send("id="+id+"&"+name+"="+val+"&colname="+name);
}else{el.set('text',val);}
editing = false;
});
});
}
window.addEvent('domready', function(){
$$('.editable').each(function(el){
inlineEdit(el,APP+'/User/update',$('uid').get('value'));
});
});

然后是html

XML/HTML代码

<tr>
<td class="cellLabel" align="right" width="20%" >用户名:td>
<td class="cellInfo" align="left" width="30%" >{$vo.account}td>
<td class="cellLabel" align="right" width="20%" >昵称:td>
<td class="cellInfo editable" align="left" width="30%" rel="nickname" >{$vo.nickname}td>
tr>
<tr>
<td class="cellLabel" align="right" >状态:td>
<td class="cellInfo"><select class="small bLeft" name="status">
<option <eq name="vo.status" value="1" >selectedeq> value="1">启用option>
<option <eq name="vo.status" value="0" >selectedeq> value="0">禁用option>
select>td>
<td class="cellLabel" align="right" >备注:td>
<td class="cellInfo editable" align="left" rel="remark" >{$vo.remark}td>
tr>

我使用的是ThinkPHP和MySQL

PHP代码

完成了！所有的请求都是AJAX完成的。这里我就不再上传DEMO了。

给大家一张截图吧，有兴趣的朋友可以试试呀。

1 条记录 1/1 页

登陆