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

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

}