使用js编写行内编辑器
由于工作需要,需要一个行内编辑器,从网上看到x-editable很好用,但是奈何他的js和系统本身的js有冲突,无奈之下,自己写了一个行内编辑器:
代码块
首先在需要编辑的行中添加click事件,例如:
<td style="color:#0066FF" **onclick**="editNote(this,${allocation.allocationVendorId})">${allocation.allocationNote }</td>
js中的代码:
function editNote(opt,allocationVendorId){
// opt就是这个td(this),使用这个得到td的JQuery对象
var tdObj=$(opt);
// 获取td原有的值
var text=tdObj.html();
// 将tdObj中置空
tdObj.html("");
//创建一个input文本框,并设置他的样式
var inputObj=$("<input type='text'>");
inputObj.css("border-width","3");
inputObj.css("height","40px");
inputObj.width($(opt).width());
//将td原有的值赋给这个文本框
inputObj.val(text);
//将这个文本框放入到td中
inputObj.appendTo(tdObj);
//将文本框中的值选中
inputObj.get(0).select();
inputObj.click(function(){
return false;
});
//往文本框中输入新的值,就触发这个keyup事件,并且输入一个字符就触发一次,第一次的时候不触发。
inputObj.keyup(function(event){
var keycode=event.which;
//keycode==13的时候是enter键,只要点击enter键,就将新的数据放入到数据库
if(event.keyCode==13){
var inputtext=$(this).val();
tdObj.html(inputtext);
saveNewNote(inputtext,allocationVendorId);
}
/* if(keycode==13){
var inputtext=$(this).val();
tdObj.html(inputtext);
} */
//keycode==27的时候是esc退出键,这样的话,将使用原始值,不修改值
if(event.keyCode==27){
tdObj.html(text);
}
});
//当文本框失去焦点的时候,也被认为是数据输入完成,也会将新的数据放入到数据库
inputObj.blur(function(){
var inputtext=$(this).val();
tdObj.html(inputtext);
saveNewNote(inputtext,allocationVendorId);
});
}
function saveNewNote(newNote,allocationVendorId){
$.ajax({
url : "<%=request.getContextPath()%>/rmUserDetailController.do?action=editNote&type=ajax",
dataType : 'json',
contentType : 'application/json',
data : {
allocationVendorId : allocationVendorId,
newNote:newNote
},
error : function() {
AlertWithId("messageInfo","edit Note false","Message","messageInfo");
}
});
}