页面点击名称，修改元素名称
Posted shuaifing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面点击名称，修改元素名称相关的知识，希望对你有一定的参考价值。
知识点：点击名称，进入编辑名称框，离开页面，保存名称（ajax请求后台接口）
效果：
点击进入名称编辑框
鼠标离开页面保存成功
（1）页面代码
<div style="text-align: center;margin-top: 40px">
<input type="checkbox" name="checkbox" value={{id}}><span id="{{id}}" onclick="updatefilename(this)" data-fileid="{{id}}">{{file_name}}</span>
</div>
<script>
function updatefilename (file) {
var id = file.getAttribute("data-fileid");//自定义<span>标签name获取id属性
var filename=$("#"+id).text();//根据span标签的id,获取页面的名称
var txt = $.trim(filename);
var input = $("<input type=‘text‘value=‘" + txt + "‘ style=‘height: 18px;‘/>"); //将名称放到《input》框里，
$("#"+id).html(input);//将《input》框放在，鼠标点击的span标签位置
input.click(function () { return false; });
//获取焦点
input.trigger("focus");
//文本框失去焦点后提交内容，重新变为文本
input.blur(function () {
var newtxt = $(this).val();
//判断文本有没有修改,jaxa请求后台接口
if (newtxt != txt) {
//ajax
$.ajax({
url:"${pageContext.request.contextPath}/screen/updatefilename/"+id+"/"+newtxt,
type:‘get‘,
dataType:‘json‘,
success:function (data) {
if(data.result==0){
$("#"+id).text(newtxt);
}
if(data.result==1){
$.TimeAlert(‘error‘,data.msg,‘error‘);
$("#"+id).text(txt);
}
}
})
}else {
$("#"+id).text(newtxt);
}
})
};
</script>
（2）后台接口
@Controller
@RequestMapping("/screen")
public class ScreenAdvController {
private Logger LOGGER = Logger.getLogger(ScreenAdvController.class);
/**
* 修改文件名称
*
* @return
*/
@RequestMapping("/updatefilename/{id}/{filename}")
@ResponseBody
public Json updateFileNameById(@PathVariable("id") Integer id, @PathVariable("filename") String filename)
{
Json json=new Json();
try
{
json= screenAdvService.updateFileNameById(id,filename);
}catch(Exception e){
LOGGER.error(e.getMessage(),e);
json.setResult(1);
json.setMsg(e.getMessage());
}
return json;
}
}
以上是关于页面点击名称，修改元素名称的主要内容，如果未能解决你的问题，请参考以下文章