使用js编写行内编辑器

使用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");
                     }
       });
 }