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

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

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

猜你喜欢