页面点击名称，修改元素名称

知识点：点击名称，进入编辑名称框，离开页面，保存名称（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;
}

}